サイトのメニューはリストで（テキスト編）

サイトの上や左にメニューを配置して、マウスを重ねると表示が変わる仕組み自体は、サイトを作っている人にはもう必須とも言えるようなものになってきています。
でも、それを実現するために使われているのは、ほとんど JavaScript による、イメージの置き換えという手法です。
これは、DreamWeaver + Fireworks で自動的にコードが作成される機能が実現されて以来、多くの Webオーサリングソフトに実装され、誰でも簡単に使える定番の仕組みになりました。

しかし、定番といわれてきたこの手法が最近になって問題とされてきています。
●内容と関係のない部分（イメージの置き換えのためのコード）が非常に大きくなるため、検索エンジンに対して不利になる（内容が検索されにくい）。
●修正時には、Webオーサリングソフトを使用して、オリジナルファイルから作り直さないといけない。
●画像やJavaScript がオフだと機能しないので、代替手段が必要になる。
といったことです。

では、これをCSSで書き直すとどうなるでしょう？

実際にコードを見てください。
もう、何度もお見せした、プロフィールのページです。

実際のサイトはこちら

●ページ全体のHTML

サイト上部に置かれたメニューは、マウスを置くと色が変わって、ちょっと動くようになっています。
で、この部分のHTMLはというと

＜div id="navi"＞
＜a name="pagetop"＞＜/a＞
＜ul＞
＜li＞＜a href="../index.html"＞Top＜/a＞＜/li＞
＜li＞＜a href="../shop/pieshp_0.html"＞AnnaMiller's＜/a＞＜/li＞
＜li＞＜a href="../flash/flash_0.html"＞Flash＜/a＞＜/li＞
＜li＞＜a href="../cg/cg_0.html"＞Illustration＜/a＞＜/li＞
＜li＞＜a href="http://cherrypie.cocolog-nifty.com/"＞CSS＜/a＞＜/li＞
＜li＞＜a href="profile.html"＞Profile＜/a＞＜/li＞
＜li＞＜a href="../ftalk_1.html"＞BBS＜/a＞＜/li＞
＜li＞＜a href="../link/link_0.html"＞Link＜/a＞＜/li＞
＜/ul＞
＜/div＞

と、単なるリンクのリストになっています。
信じてくださいね。メニュー部分のHTMLは、本当にこれだけです。
これを、メニューに変えるのが CSS というわけです。

では、CSS です。

#navi {
position: absolute;
left: 120px;
top: 39px;
height: 16px;
width: 640px;
z-index: 1;
}
#navi ul {
margin: 0px;
padding: 0px;
}
#navi ul li, #navi ul li a, #navi ul li a:visited {
list-style-type: none;
display: inline;
text-decoration: none;
margin: 0px;
padding-top: 2px;
padding-right: 4px;
padding-bottom: 4px;
padding-left: 4px;
font-family: "ＭＳ Ｐゴシック", Osaka;
color: #FFFFCC;
font-size: 16px;
font-style: normal;
font-weight: bold;
}
#navi ul li a:hover {
position: relative;
left: 2px;
top: 1px;
padding-top: 2px;
padding-right: 2px;
padding-bottom: 4px;
padding-bottom: 0px;
display: inline;
background-color: #CC0000;
color: #FFFF00;
border: 1px groove #CC0000;
}

メニューに関わる全ての定義部分に #navi がついているのは、これらがメニューの部分（div id="navi"で囲まれた部分）だけの定義だということを示しています。
（他の部分のリストがメニューみたくなってはまずいですから）

#naviの定義部分では、メニューが表示される位置を決めています。
position:absolute で、ヘッダ部分ののサイトロゴに重ねています。

ul タグを再定義しているのは、メニューの位置がずれるのを防ぐためです。
Webブラウザのデフォルトでは ulタグにマージンが指定されていて、使用するブラウザによって位置がずれてしまいます。

そして、liタグの再定義が、今回の一番のキモです。
通常、liタグの要素は要素ごとに改行され、縦に並びます。
ここで、display:inline とすることで、liタグの要素が改行されず、横に並びます。
そして、paddingで要素間の距離を決めます。
li a:hover は、マウスが乗ったときの振る舞いを定義します。
ここで、position:relative で、top, left を指定して、マウスが乗っていないときから相対的に位置をずらします。
右下にずらし、背景と周囲の色を変えることによって、押されたような感じを表しています。

これだけで、簡単なメニューが実現できるのです。
画像もJavaScriptも使用していないので、ブラウザの設定でオフになっていても問題ありません。
さらに、リンク部分がリストで作られていると、音声ブラウザや検索エンジンがこの部分をひとかたまりの構造として捉えてくれるので、アクセシビリティの面でもSEOの面でも非常に有利です。

しかし、もっとも良い点は、更新のしやすさ。
CSSは全て相対的な指定になっているので、メニューの内容が変わったり、増えたり減ったりしても、HTMLのリスト部分を変えるだけで更新できるのです。
注意すべきは、メニュー項目を増やしたときの横方向の長さだけ。
結構、すごくありませんか？

ここまできて、ちょっと不満な方もいらっしゃるでしょう。
「テキストでなく、画像を使ってこういうことは実現できないの？」
と思われる方はきっと多いはずです。

はい、まかせてください。
これほど単純ではありませんが、従来の方法からは考えられないほど簡単に、画像によるメニューが実現できます。
もちろん、画像オフでも問題なく、アクセシビリティもSEOも考慮したものです。
（つづく）