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

サンプルにロールオーバーメニューを配置する

ドリル式ホームページの作り方TOP  >>  Lesson8〜floatを使ったレイアウト〜  >>  サンプルにロールオーバーメニューを配置する

サンプルにロールオーバーメニューを配置する

サンプルに文字の下の背景画像を切り替えるタイプのロールオーバーボタンを導入します。

index.htmlのdiv#b1ボックスのh1要素の下に、リストで作ったメニューを作成します。ulにid="a1"とつけといてください。

<div id="b1">
<h1><img src="gif/24.gif" alt="ホームページ作成講座" /></h1>
<ul id="a1">
<li><a href="#">HOME</a></li>
<li><a href="#">Lesson1</a></li>
<li><a href="#">Lesson2</a></li>
<li><a href="#">Lesson3</a></li>
</ul>
</div>

これにスタイルを適用して、ボタンを作成してみます。

リスト項目をfloatで横並びにした後、背景画像をwidth:102pxで配置し、a:hover擬似クラスを使用して、カーソルが当てられたときのみ、背景画像を102pxだけずらして画像が切り替わったかのように見せます。

また、あらかじめdiv#b1ボックスに、position:relativeを指定してあるので、ここを基点に絶対配置することができます。

ul#a1 {
margin-left:0;
width:408px;
position:absolute;*/div#b1を基点に絶対配置*/
top:20px;
right:10px;
}
ul#a1 li {
float:left;*/フロートで横並びに*/
width:102px;
display:inline;
list-style-type:none;
text-align:center;
}
ul#a1 li a {
font-size:14px;
display:block;
position:relative;
color:#fff;
background:#ccc url(../gif/26.gif) no-repeat;*/背景画像を幅102px(100+線幅2px)で配置*/
text-decoration:none;
padding:1px 0 1px 0;
}
ul#a1 li a:hover {
color:#222;
background-position:-102px 0; */カーソルを当てたときに画像をずらす*/
}
ul#a1:after {
height:0;
visibility:hidden;
content:".";
display:block;
clear:both;*/フロートの高さ算出(流し込みの解除)。モダンブラウザ向け*/
}

これで完成!サンプル画像はコチラ→サンプル(ホームページ作成講座)


Lesson8〜floatを使ったレイアウト〜

  1. XHTMLの骨格を記述する
  2. floatタグを使用する
  3. divとfloatで骨格を作る
  4. div内に文章を記述する
  5. スタイルシートを適用する
  6. ブラウザによる表示の違いを学ぶ
  7. サイトを画面の中央に配置する
  8. ロールオーバーボタンの作成(文字の背景切替型)
  9. ロールオーバーボタンの作成(文字画像切替型)
  10. サンプルにロールオーバーメニューを配置する

CGIの設置

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

ホームページの公開

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