div#a3内の編集
div#a3内には、サイドメニューの項目を記述します。
<div id="a3">
<p><img src="jpg/34.jpg" alt="画像" /></p>
<p class="b1">Menulist</p>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">Lesson1</a></li>
<li><a href="#">Lesson2</a></li>
<li><a href="#">Lesson3</a></li>
<li><a href="#">Lesson4</a></li>
</ul>
<p class="b1">Menulist</p>
<ul>
<li><a href="#">Lesson5</a></li>
<li><a href="#">Lesson6</a></li>
<li><a href="#">Lesson7</a></li>
</ul>
</div>
サイドメニューのタイトルはh2を使わずに、p要素を使います。
普通、サイドメニューって言うものはトップページだけでなくサブのページにも同じように配置しますよね?
もしサイドメニューのタイトルをh2でくくったら、どのページの小見出しも同じになってしまいます。
そこで、p要素でくくるわけです。
次に、スタイルシートで装飾していくわけですが、やり方はいつもと全くといっていいほど変わりませんので、解説は省略します。
といいつつ1点だけ、li aの高さを広げるためにline-heightを使用するとfirefoxでバグるので、paddingを上下に6pxとっております。
#a3 p.b1 { text-align:center; padding-top:10px; width:160px; padding-bottom:10px; background:url(../gif/33.gif) no-repeat; } #a3 ul { text-decoration:none; width:160px; } #a3 ul li { display:inline; list-style-type:none; } #a3 ul li a { display:block; padding:6px 0; text-align:center; border-bottom:solid 1px #fff; position:relative; background:#A0DC6F; }
ここまでの作成経過はコチラ→サンプル(ホームページ作成講座)
Lesson9~画像ビュアーの作成~
- XHTMLの骨格を記述する
- divとfloatで骨格を作る
- div#a1内の編集
- div#a2内の編集
- div#a3内の編集
- div#a4内の編集
- div#a5内の編集・最終調整
- 画像viewerを配置する
コメントor補足情報orご指摘あればをお願いします。
- << 前のページ
- 次のページ >>