ホームページ用 Webデザイン フリーテンプレート

<p class="nav_title">スタイル1の場合</p>

<div class="nav_box">

<div class="nav_bg">

<p>ここは自由です。</p>

</div>
</div>

* {

font-size:100%;
line-height:1.6;
margin:0px;
padding:0px;
list-style:none;

}

*とは
全てのタグに対して共通のスタイルを指定できます。
この設定をすると、テーブルタグなどで余白を指定してもきかなくなりますのでご注意ください。
この設定はナシにして、下記スタイルに、余白を0pxで指定すれば同様のデザインで利用可能です。

.nav_title {

background-image: url(images/01_01.jpg);
background-repeat: no-repeat;
background-position: 0px 0px;
width: 180px;
height: 63px;
display: block;
padding: 10px 10px 0px 10px;
font-size: 16px;
font-weight: bold;
color: #FFFFFF;

}

nav_title
上記画像ファイル（01_01.jpg）の場合となります。
画像ファイルをimagesという名前のフォルダへ保存します。
（※フォルダ名は変更して構いませんがスタイルシート内のフォルダ名箇所も変更してください）
フォントのサイズ、色なども変更可能です。
調整は各自してくださってよいです。
フォントサイズについては、はみ出す大きさに指定しますと、切れてしまい、表示されない箇所がでますので、ご注意ください。

.nav_box {

background-color: #287A91;
padding: 0px 2px 2px 2px;
width: 196px;

}

nav_box
画像の色によって、「background-color: #287A91」の色が変わります 。
下記の色設定で変更してください。

.nav_bg {

background-color: #FFFFFF;
padding: 2px;

}

nav_bg
ここでは、中の白い部分の設定となります。
余白が欲しい場合などは変更してください。

<p class="nav_title">スタイル2の場合</p>

<div class="nav_box">

<div class="nav_bg">

<p>ここは&lt;ul&gt;タグ使用しています。</p>

<ul>
<li>ここはリストタグです。</li>
<li>ここはリストタグです。</li>
<li class="li_last">ここはリストタグです。</li>
</ul>
</div>
</div>

* {

font-size:100%;
line-height:1.6;
margin:0px;
padding:0px;
list-style:none;

}

*とは
全てのタグに対して共通のスタイルを指定できます。
この設定をすると、テーブルタグなどで余白を指定してもきかなくなりますのでご注意ください。
この設定はナシにして、下記スタイルに、余白を0pxで指定すれば同様のデザインで利用可能です。

.nav_title {

background-image: url(images/01_02.jpg);
background-repeat: no-repeat;
background-position: 0px 0px;
width: 180px;
height: 53px;
display: block;
padding: 20px 10px 0px 10px;
font-size: 18px;
font-weight: bold;
color: #FFFFFF;

}

nav_title
上記画像ファイル（01_02.jpg）の場合となります。
画像ファイルをimagesという名前のフォルダへ保存します。
（※フォルダ名は変更して構いませんがスタイルシート内のフォルダ名箇所も変更してください）
フォントのサイズ、色なども変更可能です。
調整は各自してくださってよいです。
フォントサイズについては、はみ出す大きさに指定しますと、切れてしまい、表示されない箇所がでますので、ご注意ください。

.nav_box {

background-color: #999900;
padding: 0px 2px 2px 2px;
width: 196px;

}

nav_box
画像の色によって、「background-color: #999900」の色が変わります 。
下記の色設定で変更してください。

.nav_bg {

background-color: #FFFFFF;
padding: 2px;

}

nav_bg
ここでは、中の白い部分の設定となります。
余白が欲しい場合などは変更してください。

.nav_box li {

border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #CCCCCC;
padding: 2px 0px 2px 0px;
padding-bottom: 2px;
list-style-position: outside;
list-style-type: circle;
margin: 0px 15px 0px 15px;

}

li
nav_box内のリストタグに下線を設定しています。

.nav_box li.li_last {

border:none;

}

li_last
リストタグの最後の部分、ボーダーを消しています。