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

div#a2内の編集

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

div#a2内の編集

div#a2内には、ロールオーバーボタンを使用した横並びメニューを作成したいので、リスト(ul,ol)タグを使用してメニュー項目を記述しておきます。

<div id="a2">
<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>
</div>

スタイルは、float:leftで横並びにしたあとに、各メニュー項目の境界線画像として、縦1px、横1pxの画像をbackgroundにrepeat-yで繰り返し配列します。

position:relativeは、IEバグ対策(マウス範囲が広がらない)ですね。

素材作成がめんどいので、画像の切り替えは行いません・・・。

#a2 ul {
margin-left:0;
}
#a2 ul li {
display:inline;
background:url(../gif/31.gif) right top repeat-y;
height:30px;
}
#a2 ul li a {
position:relative;
padding:5px 20px 0 20px;
float:left;
display:block;
}

ここまでの作成経過はコチラ→サンプル(ホームページ作成講座)


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.