ウェブデザイン制作/ウェブ・ポジショニングのウェブZYCO'S [ CSSロールオーバー・リストメニューを作る ]

CSSロールオーバー・リストメニューを作る

リストにfloatを使って横一列に並べ、display : blockを使ってロールオーバーを実現させる。ついでにフォントサイズの大きさに合わせてメニューボタンの高さも変化するように作り込む。

17 February,2006

ロールオーバーの条件と準備

これまででリストスタイルのパディングやマージンの相互関係が見えてきたと思うので、このページではさらに進展させてCSSを駆使して次のようなロールオーバー・リストメニューを作ってみることにする。

さて、作業に取り掛かる前にウェブZYCO'Sでの「ロールオーバー・リストメニュー」の条件を整理しておこう

  • フォントサイズは固定にしないので、サイズを大きくしてもテキストがボタン枠からはみ出さないこと(特にFirefox)
  • フォントサイズを標準から2クラス上まで大きくしても周辺のデザインとレイアウトが崩れないこと
  • ブラウザはIE6とFirefox1.5を対象として表示確認する
  • 実践的な使われ方を踏まえてデザインとレイアウトを実行する

さて、準備だ。ロールオーバーの背景画像として以下のようなonとoffの2種類の画像を用意する。マウスポインタがリンクに乗っかるとオレンジの画像に切り替り、離れるとグレーの画像に戻るようにするためだ。それと、ボタンのバックにも映える画像も作っておこう。

とりあえず、完成形をみてもらっておこう。ブラウザの上底に張り付いたレイアウトで、背景のデザインも手を加えて、こういうロールオーバー・リストメニューについてこれから説明しようと思う。

背景画像のボタン1 背景画像のボタン2 

背景画像3 height : 52px

初めに基本的なリストを書くのだが、ボタンの後ろに更に背景画像を配置したいので、以下のように<div>を追加する。ここでは<div id="container">とした。#の部分は実際のリンク先を記入すること。

<div id="container">
<ul>
   <li><a href="#">web</a></li>
   <li><a href="#">zyco's</a></li>
   <li><a href="#">news</a></li>
   <li><a href="#">css</a></li>
   <li><a href="#">seo</a></li>
</ul>
</div>
<div style="clear:both; "></div>

※この方法はJavaScriptを使用しないで、CSSで演出するためSEOにも有効だ。

ロールオーバーのCSSを設定する

さて、ここから全てはCSSの設定になる。

ロールオーバー・リストメニューの条件をクリアするためには、CSSの設定を大雑把にやると実現できないので細かく設定することになる。以下は<head>内に記述したCSSの例だ。ボタンの横幅は下記の「width : 5em;」(リストの幅の設定)の数字部分を変更するだけだ。

<style type="text/css">
<!--
body{
  background-color : #f2f2f2;
  padding : 0; /*メニュー表示を左と上をくっ付ける設定*/
  margin : 0;  /*メニュー表示を左と上をくっ付ける設定*/
}
#container{    /*メニューボタンの背景を設定*/
  width : 100%;
  height : 52px;   /*背景画像(bg.gif)の高さを設定*/
  background-image : url(images/bg.gif); /*背景画像*/
  background-color : #c0c0c0;  /*画像が表示されないときの背景色設定*/
  background-position : left top;  /*左上に配置*/
  padding : 0;
  margin : 0;
}    
ul{
  list-style : none;  /*リストマークを消す*/
  text-align:center;  /*ボタン枠のテキストをセンター寄せ*/
  padding : 0;
  margin : 0;
}
li{
  width : 5em;  /*リストの幅の設定*/
  float:left;  /*これで一列にリストを並ばせる*/
  padding : 0;
  margin : 0;
}
li a{
  font-size:75%;    
  display:block;  /*リンク範囲をブロックに変更する*/
  width:100%;     /*リンク範囲の横幅は100%*/
  height : auto;  /*リンク範囲の高さを自動に:firefox必須*/
  background-image:url(images/button_off.gif);  /*off画像*/
  background-position : left top;  /*画像を左上に配置*/
  background-repeat : no-repeat;   /*背景画像を繰り返さない*/     
  padding : 0;
  margin : 0;
  text-decoration : none;  /*下線を表示しない*/  
  color : brown;
  line-height : 200%;  /*テキストの位置を調整*/
  border-top-style : solid;  /*ボタン枠を設定*/
  border-bottom-style : solid;
  border-right-style : solid;
  border-width : 1px 1px 1px 0;
  border-top-color : #c0c0c0;
  border-bottom-color : #999;
  border-right-color : #999;
}
li a:visited{
  color:brown;
  text-decoration : none;  /*下線を表示しない*/
}                 
li a:hover{  /*マウスポインタがリンクに重なったときの設定*/
  background-image:url(images/button_on.gif);   /*on画像*/
  background-position : left top;  /*画像を左上に配置*/
  background-repeat : no-repeat;   /*背景画像を繰り返さない*/   
  color:red;  /*テキストを赤色へ変更*/
  padding : 0;
  margin : 0;
  line-height : 200%;
  border-top-style : solid;  /*ボタン枠を設定*/
  border-bottom-style : solid;
  border-right-style : solid;          
  border-width : 1px 1px 1px 0;
  border-top-color : #fe9700
  border-bottom-color : #f2b859;
  border-right-color : #fe9700;
}
-->
</style>

※水平型メニューのレイアウトはフォントサイズを固定にしない場合は横に伸びるので、まとまった横方向の余白を確保する必要がある。

水平型(horizontal)リストメニュー CSSのポイント

Firefox1.5とIE6でほぼ同じように表示させるには

  • display : block;を設定した「li a」のheightにピクセルでサイズ指定した場合、heightを越える大きなサイズのテキストはオーバーフローして枠外へはみ出すということに注意する。
  • よって、Firefox1.5でも正常表示させるにはheight : auto; にする。
  • IE6はCSSの解釈が違うのでサイズ指定してもはみ出さないがバグ。
  • borderの表現で便利なinset、outsetがあるが、FirefoxではIE6と表示が異なるので使用を避けたほうが無難だろう。
  • リストとリストの境界線がFirefox1.5では1pxダブってしまうので、画像とCSSを次のように処理した。画像の左端にシャドウのライン、続けてライトのラインを各々1px書き加え、左以外の上、右、下についてはborderをCSSで設定した。
  • 以下はIE6とFirefox1.5の画面キャプチャーである。境界線が各1pxダブルのでFirefox1.5の方が全幅で4pxほど短くなっている。

キャプチャー画像1

キャプチャー画像2

以上の設定が終われば、ロールオーバーするメニューが完成だ。今回はシンプルなボタン画像にしたが、演出の決め手はこの画像になる。諸君の才能でクールなヤツを決めてみてくれ。

尚、このページで提示した3点の背景画像はビジネスページで使うことは禁止するが、該当しない方は大いに活用してほしい。

リストスタイルについて、別ページに詳しい説明を掲載しているので、以下リンクからどうぞ。

CSSロールオーバー・リストメニューを作る-2 解決編

縦型CSSロールオーバー・リストメニュー

リスト(list)画像を使って正しく表示させる

リストスタイルを仔細に設定してCSSを理解する

ページのトップへ


文字の大きさについて 文字の大きさは、ブラウザで調節して下さい。
当サイトへのリンクは自由に行えます。