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

ロールオーバーボタンの作成(文字の背景切替型)

ドリル式ホームページの作り方TOP  >>  Lesson8〜floatを使ったレイアウト〜  >>  ロールオーバーボタンの作成(文字の背景切替型)

ロールオーバーボタンの作成(文字の背景切替型)

ロールオーバーボタンの作成方法には、大きく、カーソルがのっている時に文字の背景画像を切り替えるか、文字の入った画像を切り替えるかの二通りあります。

いずれも、リスト(ul,li)タグを使用してメニューを作り、各リスト項目に対して文字画像及び背景画像を指定・切り替えしていきます。

文字の背景画像を切り替える

文字の背景画像を切り替えるロールオーバーボタンは、文字入りの背景画像を使う場合に比べて、検索エンジンにきちんと”文字”として認識されるので、SEOを考える上でも効果的です。

まずは、リストタグを使用してメニューを作ります。

<html>
<head>
<title>ロールオーバー1</title>
<link rel="stylesheet" type="text/css" href="style/style.css" media="all" />
</head>
<body>
<ul id="a1">
<li><a href="#">HOME</a></li>
<li><a href="#">会社概要</a></li>
<li><a href="#">店舗案内</a></li>
<li><a href="#">社内教育</a></li>
</ul>
</body>
</html>

このhtml文書に対して、スタイルを適用していきます。

ユニバーサルセレクタとimgのスタイルはいつも通りに全ての余白をゼロにします。

charset "utf-8";
* {
margin:0;
padding:0;
}
img {
border:0;
}

次に、背景となる画像(マウスを当てないときと当てたときの連結画像)を用意します。

liにwidthを指定(150+1+1)して、floatで横並びにしたあと、floatでのカラム落ちを防ぐためにulに対してもwidthを指定(152×4)します。

ul#a1 li aの背景に上の画像の左半分を表示させておき、マウスカーソルが当たったときに152px分だけ横に動かして画像が変わったかのように見せます。

ul#a1 {
padding-bottom:1px;
border-bottom:solid 3px #ccc;
width:608px;
}
ul#a1 li {
float:left;
width:152px;
list-style-type:none;
text-align:center;
display:inline;
}
ul#a1 li a {
display:block;
position:relative;
color:#fff;
background:#ccc url(../gif/48.gif) no-repeat;
text-decoration:none;
padding:12px 0 10px 0;
}
ul#a1 li a:hover {
color:#888;
background-position:-152px 0;
}

文字エンコードがutf-8だとHOMEの文字とほかの漢字の高さが微妙に異なるため?かレイアウトにズレが生じるので、エンコードはshift_jisかeuc-jpで。

サンプル画像はコチラ→サンプル(ロールオーバー1)

ついで、メニューの下に画像を表示させて見ます。

<html>
<head>
<title>ロールオーバー1</title>
<link rel="stylesheet" type="text/css" href="style/style.css" media="all" />
</head>
<body>
<ul id="a1">
<li><a href="#">HOME</a></li>
<li><a href="#">会社概要</a></li>
<li><a href="#">店舗案内</a></li>
<li><a href="#">社内教育</a></li>
</ul>
<p>
<img src="jpg/47.jpg" alt="" width="608" />
</p>
</body>
</html>

今までfloatさせたコンテンツの流し込み解除(子ボックスのフロートのクリア)は、それより下のコンテンツにclearを指定しておこなっていましたが、今回のような場合、clearを指定できる要素がないので、after擬似要素とcontentプロパティを使って流し込みの解除を行います。

ul#a1:after {
height:0;
visibility:hidden;
content:".";
display:block;
clear:both;
}

この方法は、after擬似要素とcontentプロパティをサポートしたfirefox,opera,netscape,safariで有効です。

サンプル画像はコチラ→サンプル(ロールオーバー1)

ロールオーバーボタンの全体幅が608pxですので、幅640pxのサイトを作りたいときは32pxの補正幅がほしいところだと思います。

これを補うには、幅1pxの画像を用意して、repeat-xで(サンプルでは、幅1pxの画像を640pxに敷き詰めます)背景画像として繰り返し表示するとよいでしょう。

 ←(幅1pxの画像)

以下の記述をstyle.cssに追加します。

ul#a1 {
background:url(../gif/51.gif) repeat-x;
width:640px;
}

サンプル画像はコチラ→サンプル(ロールオーバー1幅調整後)


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.