Web Frontier

当サイトの上部にあるようなマウスがカーソルに入るとハイライトするメニューの作り方です。 通常はJavascriptなどで作成しますが、Javascriptでは環境依存が強いので、 確実に動作するスタイルシートでの方法を紹介します。 まず、メニューの作り方についてはWindowsのメニューのような項目をリストを応用して作るをご覧下さい。 もちろん、テーブルでメニューをレイアウトしても良いですが、 XHTMLとアクセシビリティを考慮に入れてリストでの制作を試みます。 まず、メニューを作る際には、以下のようにします。

<div id="menu-box">
   <ul id="menu">
      <li><a href="index.html">Home</a></li>
      <li><a href="contents.html">Contents</a></li>
      <li><a href="link.html">Link</a></li>
      <li><a href="contact.html">Contact</a></li>
   </ul>
</div>

メニューは通常1ページに1つしかありませんから、id属性で指定しまっても良いでしょう。 こうする事で、指定項目に余裕が持てます（例えば、divで囲まれた所で背景画像を指定して、ul要素の領域でも背景画像指定など）。 ul属性だけでも良いですが、背景画像のオーバーラップなどの融通が利かなくなりますね。

通常時とマウスがメニューの上に乗った時に変わる（アクティブ）用と2つの画像を用意しましょう。 それぞれ、通常時を"menu-bg.gif"とアクティブ時を"menu-bg-hover.gif"とします。 別に画像ではなくても、背景色だけ変えるのでもイイ感じになります。

ダウンロードできましたか？では続いてメニューの処理をしていきましょう。 スタイルシートを何もしていない状態だと当然ですが、以下のように複数行表示されますね。

以下のスタイルシートを適応します。

#menu-box
{
   /* 背景画像などがあればここに指定 */
}

#menu
{
   list-style-type: none;
   height: 32px;
   border-left: solid 1px #330000;
}

#menu li
{
   /* リストはインライン要素化して横に並べる */
   line-height: 32px;
   display: inline;
}

#menu li a
{
   /* リンクをブロック要素にする */
   background-image: url('menu-bg.gif');
   background-repeat: repeat-x;
   padding: 0px 12px;
   display: block;
   float: left;
   border-right: solid 1px #330000;
}

#menu li a:hover
{
   /* マウスがメニュー領域内に入った時 */
   background-image: url('menu-bg-hover.gif');
   background-repeat: repeat-x;
}

"#menu"でまずはメニューの全体的な高さを決めます。 li要素については、インライン要素にした上で、"line-height"を使って高さを調節します。 この"line-height"の値を設定しないと文字が上の方に寄ってしまいます。 "padding-top"でも良いですが、フォントサイズが変わった時に柔軟に対応できないため、 "line-height"を使いましょう。

a要素もブロック要素にしないとリンクの判定がおかしな事になってしまいます。 これは、「トップへ」「ホームへ」などで使う画像をimgタグで何度も書かずにスタイルシートで一括処理するで紹介したテクニックです。 しかし、a要素をブロック要素にしてしまうとそのままでは改行されてしまうのでそれを回避するために、 "float: left;"で回り込みを行っています。

後は"a:hover"でマウスがリンク内に入った時に画像を切り替える手法をとっています。 試しに、"display: block;"を取ってみたりして、どうなるか動作を確認してみると分かりやすいと思います。

かなりいろいろな手法が織り交ぜられていて煩雑ですね。