ドリル式ホームページの作り方

div#a3内の編集

ドリル式ホームページの作り方TOP  >>  Lesson9〜画像ビュアーの作成〜  >>  div#a3内の編集

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〜画像ビュアーの作成〜

  1. XHTMLの骨格を記述する
  2. divとfloatで骨格を作る
  3. div#a1内の編集
  4. div#a2内の編集
  5. div#a3内の編集
  6. div#a4内の編集
  7. div#a5内の編集・最終調整
  8. 画像viewerを配置する

CGIの設置

  1. 掲示板を設置する
  2. カウンターを設置する
  3. アクセス解析を導入する
  4. アクセスランキングを設置する

ホームページの公開

  1. ドメインを取る
  2. サーバーを選ぶ
  3. ファイルをアップロード(公開)
Copyright(C) ドリル式ホームページの作り方 all right reserved.