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

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

水平型に比べて縦型は情報数に従って下方向へ伸びていくだけなのでメニューが増えたとしても制約がなくて対応が楽だ。横型と同じくdisplay : blockを使ってロールオーバーを実現させる。問題なのはlist-styleのborderだ。このborderはIE6とFirefox1.5において表示が異なることがあるので極めて厄介な存在でもある。

9 March,2006

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

さて、作業に取り掛かる前に今回も説明が長くなってしまいそうだ。そこで下の「天道虫」を試しに置いてみた。ドラッグすると移動できるので、マーキングとして使ってもらえれば有り難い。小休止なんかの時にね

ウェブZYCO'Sでの「ロールオーバー・リストメニュー」の条件を整理しておこう。

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

完成形を最初に見てロールオーバーの動きを確認してほしい。このサンプルのリストメニューの仕組みはちょっと複雑だが、ひとつひとつ設定された意味を理解することが大切だ。分かりずらいときは背景に色を付けてみると分かりやすくなることもある。

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

▲上図はキャプチャー画像です
クリックしてサンプルを表示

左図のようにタイトル、サブタイトル、メニュー項目というように縦型メニューは下方向へ伸び、更に手を伸ばしてサブメニュー項目をも梱包することもできる。

今回のサンプルはボーダーを駆使する。メニュー項目の先頭のネイビー色はボーダーで色指定され、ロールオーバーではオレンジ色にチェンジする。各メニュー項目の境界線も同じくボーダーを使っている。

IE6では1pxの空きが発生する
▲ボーダーの不具合

このページを制作する準備として幾つかのパターンで試してみたとき、IE6においてlist-styleのボーダーが妙な表示をすることが分かった(上図は一例)。今回遭遇した不具合は、ある複合した条件下で発生する。

font-familyの指定や日本語のみのリストへの入力などがある条件下で引き起こすのは、ボーダーに関するものが殆どだ。

そこで、このようなトラブルから出来るだけ回避する方向で、背景画像(メニューボディー)でボーダーに代わる影付きイメージ部分を描き、まずはボーダーの使用の回数を間引くことにした。これで少しは単純になるだろう。

さて、今回のはちょっとタフだ。「こんなのが作りたかたんだ」と思わなきゃ、ここでやめて置いたほうがいいと思うよ。

画像の保存とHTML

さて、ここからが苦労のスタートだ。まずは以下イメージをこれから作業するディレクトリの中のimagesへ保存する。下の画像は2倍のサイズで表示させているだけなので、保存したファイルは1/2になる。画像の上にマウスポインタを乗せ、右クリックで保存する。

210×21

210×6

210×24

次はHTMLだが、少し複雑な構造になっているのでひとつひとつ行こう。下のソースと図を見比べながらじっくり行こう。

  • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    この「標準モード」で文書型宣言をする。(htmlのページの先頭に貼り付けること)
  • "dimension"でリストメニュー一式を格納するdivを設定する。ここに全てが収まるその大枠のサイズやポジションを指定する。ここでは上の画像の幅が基準になる。実践的に使うときはfloat なんぞを使用してページの左サイドまたは右サイドへレイアウトすることになるだろう。
  • "menu_bot"、 "menu_rails"、 "menu_top"でメニューボディーとなる背景画像を配置する。メニューボディーの下部分(menu_bot)と上部分(menu_top)はデコレーションだ。"menu_rails"で設定した画像がリピートして収縮するメイン部分の背景を埋めてくれる。
  • "menu_div"は画像で作られたメニューボディーの中にテキスト全部が収まる範囲("column")との関係(マージンや余白)を設定する。例えば上を24px空けてやらなければメニューボディーのトップ画像の位置からメニューが並んでしまう。だからちゃんと収まるように上26px、左右も6px余白を取って、その結果を#columnへ渡してあげる。
  • ここまで準備が整ったので、"column"は横幅サイズを記述しただけのシンプルなボックスという存在が出来上がった。
  • このあたりで、「ちょいと一服しませんか
    気分を変えるための束の間のミュージックが必要な方は是非どうぞ!
  • さて、ここからははdisplay : block を使ってロールオーバー効果の設定に取り掛かる。ここはCSSをしっかり眺めて欲しい。
  • 説明が必要なのはこの部分<li >だろう。ここで飾り気をおこしてfont-family : "trebuchet MS"なんぞを設定しようものならIF6は不要なボーダーを空き1px付きで表示してしまう。本当にこれには参った。
  • そして、"titlebar"でタイトルを、"b"でサブタイトルを設定する。"b"はインライン要素だからブロック化すると背景一面を塗ることができる。
  • 最後にリストについての記述だ。一部タイトルやサブタイトルが挿入されているが自分用に修正を加えてみよう。

<!--bodyタグの中へ以下全てをコピー-->
<div id="dimension">
<div id="menu_bot">
<div id="menu_rails">
<div id="menu_top">
<div id="menu_div">
<div id="column">
<div class="blocklook">
<div class="titlebar">Web making</div>
<b>Web tricks</b>
<ul>
  <li><a href="#">JavaScript</a>
  <li><a href="#">Dynamin HTML</a>
  <li><a href="#">Tools</a>
</ul>
<b>Khow-How</b>
<ul>
  <li><a href="#">For beginner</a>
  <li><a href="#">デザイン</a>
  <li><a href="#">品質</a>
  <li><a href="#">レイアウト</a>
  <li><a href="#">リストスタイル</a>
</ul>
<div class="titlebar">Web Positioning</div>
<ul class="alttheme">
  <li><a href="#">チェック</a>
  <li><a href="#">コンサル</a>
  <li><a href="#">解析</a>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

CSSを設定する

下のCSSのソースは<head>の中へコピーして使う。

<style type="text/css">
<!--
body{    /*リストにはfont-familyを設定しない方が無難*/
  padding : 0px;
  margin : 0px;
  font-size : 80%;
  background-color : white;
}
/*メニュー画像枠設定*/
#dimension{
  width : 210px;
  padding : 0px;
  margin : 0px;
}
/*メニュー画像配置ここから++++++++++++++++++++++*/
div#menu_bot{ /*メニューボトム画像*/
  background-image : url(images/menubar_bot.gif);
  padding : 0 0 21px 0;
  margin : 0px;
  background-repeat : no-repeat;
  background-position : left bottom;
  height : auto;
}
div#menu_rails{ /*メニュー項目画像*/
  background-image : url(images/menubar_rails.gif);
  padding : 0px;
  margin : 0px;
  background-repeat : repeat-y;
  background-position : left top;
}
div#menu_top{ /*メニュートップ画像*/
  background-image : url(images/menubar_top.gif);
  background-repeat : no-repeat;
  background-position : left top;
  padding : 0px;
  margin : 0px;
}
/*メニュー画像配置ここまで++++++++++++++++++++++*/
#menu_div{ /*画像で作られたメニューボディーの中にテキスト全部が収まる範囲("column")との関係(マージンや余白)を設定する*/
  padding : 24px 0 0 0;
  margin : 0 6px 0 6px;
  width : 198px;
}
#column { /*この中にリストを収める*/
  width: 198px;
}
#column .titlebar {   /*タイトルの設定*/
  font-family : "trebuchet MS";
  color: white; 
  padding : 4px 0 4px 0;  /*上下余白4px空ける*/
  font-weight: bold; 
  background-color : #97b2d9; 
  border-bottom: black 1px solid;     /*ボトムにラインを引く*/
  text-align: center; /*タイトルはセンターポジションにする*/
}
#column .blocklook b {   /*サブタイトルの設定*/
  display: block;       /*ブロックにする*/
  font-family : "trebuchet MS";
  padding-left: 5px;    /*左余白5px空ける*/
  background-color : #000080; 
  border-bottom: black 1px solid;
  color : white;
}
#column .blocklook ul {   /*リストメニュー*/
  padding: 0px;          /*余白マージン0*/
  margin: 0px; 
  list-style-type: none;
}
#column .blocklook li a {
  display: block;       /*ブロックにする*/
  padding-top: 3px;     /*上下に3px余白 */
  padding-right: 0px;
  padding-bottom: 3px;
  padding-left: 14px;   /*左14pxの余白  */
  font-weight: bold;            
  border-left: navy 6px solid;   /*ネイビーカラー*/
  width: auto;
  color: #3c3c3c;
  border-bottom: gray 1px solid; 
  text-decoration: none;
}
html #column .blocklook li a {
  width: 178px;  /*198-(6+14)*/
}
#column .blocklook ul.alttheme li a {
  border-left: gray 6px solid;
}
#column .blocklook li a:hover {
  border-left-color: orange; 
  color: black; 
  background-color: #f6f6fe;
}
#column .blocklook ul.alttheme li a:hover {
  border-left-color: red; 
  color: black; 
  background-color: #f6f6fe;
}
-->
</style>

縦型リストメニュー CSSのポイント

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

  • まず、文書型宣言をする。横幅サイズ、余白、マージン、ボーダーの全てが絡むので「互換モード」だとここでつまずく事になる。最初から「標準」で行くのが賢明だ。
  • IE6ではlist-styleにfontを無指定にしないと不具合がでることがある。
  • ボーダーが勝手に表示されたり、空きが1px挿入されたりと怪しい表示をすることがあるのでボーダーを多用しないようにしたい。この現象に出逢ってしまったら間違いなく長時間苦しむ。
  • 気楽に行くには、今回のサンプルのようなベタ塗りのデザインは避けて、本ウェブで使っているサイドメニューのタイプの方が応用が効くだろう。

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

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

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

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

水平型ロールオーバー・リストメニューを作る

ページのトップへ


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