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

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

リストにdisplay : inlineを使って1列に並べfloatを使ってピッタリ寄せてロールオーバーを実現する。ついでにフォントサイズの大きさに合わせてメニューボタンの高さと幅も変化するように作り込む解決策。

17 November,2006

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

前回のロールオーバーはボーダーと横幅の問題が残ったが、このページではその問題を解決して次のようなロールオーバー・リストメニューを作ってみることにする。

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

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

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

以下画像にマウスポインタを移動させ右クリックして画像を保存する。

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

初めに基本的なリストを以下のように書くのだが、li要素(ブロックレベル)をインラインレベルに変更するのでidを追加しそのCSSを設定する。するとこのように横並びになる。

<ul id="rollover2">
   <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>
#rollover2 li{
  display:inline;/* ←リストをブロックレベルからインラインレベルに変える */
}

最後の右端のメニューにボーダーを引くためにhtmlにidを追加設定する。htmlはこれでお終い。

<ul id="rollover2">
   <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="#" id="rightmenu">seo</a></li>
</ul>

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

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

#rollover2{
  float:left;
  padding : 0;
  margin : 0;
  font-size:88%;
  font-weight:bold;
  font-family:Arial;
  list-style-type: none;
}
#rollover2 li{
  display:inline;/* ←リストをブロックレベルからインラインレベルに変える */
}
#rollover2 li a{
  float:left;
  color:#268be0;
  padding:10px 26px 14px 26px;
  text-decoration:none;
  background-image:url(images/buttonzyco_off.gif);
  background-color:#663300;
  background-position:top left;
  background-repeat:no-repeat;
  border-bottom: 1px solid #999999;
}
#rollover2 li a#rightmenu{
  border-right: 1px solid #999999;
  background-position: top left;

}
#rollover2 li a:visited{
  color:#268be0;
}
#rollover2 li a:hover{
  color:red;
  background-image: url(images/buttonzyco_on.gif);
}
p.iepara{ /*Conditional CSS- For IE (inc IE7), create 1em spacing between menu and paragraph that follows*/
padding-top: 1em;
}

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

Firefox2.0IE6で同じように表示できる

  • display : inline;を設定したのでブロックレベルで起こる横幅やボーダーの解釈の違いが解消されたことの意味は大きい。
  • inlineに設定して、それをfloat:left;を使ってピッタリ寄せる。
  • borderはなるべく画像のほうで対処する。

以上の設定が終われば、ロールオーバーするメニューが完成だ。今回もシンプルなボタン画像にしたが、演出の決め手はこの画像とテキストの色になる。

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

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

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

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

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

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

ページのトップへ


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