ウェブサイト内の各コーナーへのリンクをメニューとして横向きに配置した「メニューバー」を簡単に作るにはいくつかの方法があります。最も簡単なのは、ただ普通にリンク(a要素)を並べるだけです。標準で文字列は横向きに並びますから、バーのように見えるデザインさえ加えれば「メニューバー」になります。そういう単純なメニューもよく見かけます。

しかし、「メニュー」というのは一種の「リスト」なので、リストを構成するHTML(ul要素＋li要素)を用いて記述すべきだという意見もあります。私も基本的にはその方法で作るようにしています。
ul要素とli要素とで作るリストは、デフォルトでは「箇条書き」の装飾を伴って縦方向に並びます。そこで、この「リスト(箇条書き)」をメニューバーのように見せるためには、「リストとして記述した項目一覧をスタイルシートで横向きに配置」されるようデザインする方法が必要です。

デザイン(レイアウト)を細かく指定すると複雑になりますが、「とりあえず一般的なメニューバーっぽく見えて使える」レイアウトなら、それほどソース量を記述しなくても作れます。

リスト(ul要素＋li要素)を横向きに配置してメニューバーを作るHTML＋CSSソース

例えば、以下のようなHTMLソース（メニュー項目を記述したリスト）がある場合を例にします。

<ul>
   <li><a href="/">ホーム</a></li>
   <li><a href="info.html">新着情報</a></li>
   <li><a href="prod.html">製品案内</a></li>
   <li><a href="comp.html">会社概要</a></li>
   <li><a href="supp.html">サポート</a></li>
   <li><a href="cont.html">お問い合わせ</a></li>
</ul>

これを、まったく装飾せずに表示させると、以下のように見えます。

代表的なブラウザでは、リスト項目の先頭に黒丸などの記号を付加して、縦向きに項目を配置します。この「リスト」をスタイルシートで装飾することで、「横向き」に配置します。
とりあえず、以下のようにCSSソースを書けば、最低限の横向きデザインにできます。

ul {
   margin: 0px;  /* ul内部の左端余白(外側)をゼロに */
   padding: 0px; /* ul内部の左端余白(内側)をゼロに */
}
ul li {
   list-style-type: none; /* 先頭記号を消す */
   float: left;           /* リスト項目を横方向に並べる */
   margin: 0.3em 0.1em;   /* 各項目周囲の余白 */
   border: 1px gray solid; /* 各メニュー項目の枠線 */
   padding: 0px;          /* 枠線と内容の距離をゼロに */
}

上記のスタイルシートで、とりあえず各項目は横向きに配置されます。項目同士が詰まって表示されないよう、余白も設けられます。項目の範囲が分かりやすいように、枠線も付加しています。

で、「メニュー」は当然「リンク」でもあるので、リンクに対する装飾も欲しいところです。そこで、以下のスタイルを加えます。

/* メニュー項目のリンクを装飾 */
ul li a {
   text-decoration: none; /* 下線を消す */
   display: block; /* ブロックレベルに */
   padding: 0.3em; /* 内部の余白量 */
}
ul li a:hover {
   background-color: blue; /* 背景色 */
   color: white; /* 文字色 */
}

上記のCSSソースでは、だいたい以下のようなことをしています。

• メニュー項目には枠線を付加してあるので、見栄えがクドくならないよう(text-decorationプロパティを使って)リンクを示す下線は消しています。まあ、付けておく方が分かりやすくて良いかも知れませんが。
• displayプロパティに値「block」を指定することで、リンク自体をブロック化(ブロックレベル要素のように表示)しています。これで、リンク項目内の全体に背景色を塗ったり、項目内の全体をクリック可能にすることができます。
• hover疑似クラスを使って、メニュー項目(＝各リンク)の上にマウスポインタを載せたときに、項目全体の背景色と文字色が変化するようになっています。

これらのCSSソースを適用させて先ほどのHTMLを表示させると、以下のように見えます。(項目の上にマウスポインタを載せると、項目の色が変化します。)

スタイルシートが有効な環境であれば、横向きメニューバーのように配置されているはずです。スタイルシートが無効な環境だと、通常のリスト項目として表示されるでしょう。

なお、この「メニューバー」の直後に記述するブロックには、回り込みを解除するための何らかの方法が必要です。メニューバーの直後に来る要素が決まっているのであれば、その要素にclearプロパティを記述することで回り込みを解除できます。例えば、以下のように書いておくと良いでしょう。(aftermenuクラスを付加したp要素の場合)

p.aftermenu {
   clear: left;
}

しかし、メニューバーの直後にどんな要素が来るのか(ページによって異なるなどの理由で)確定できないこともよくあります。そのような場合は、ClearfixのようなCSSハックを使って回り込みを解除させましょう。例えば以下のように記述します。

ul:after {
   /* Clearfix */
   content: "";
   clear: both;
   display: block;
}

さて、あと「バー」のように見せるには、ul要素全体に背景色を加えたり枠線を加えたりする必要があるかもしれません。ul要素に含まれるli要素は、全部floatプロパティで浮かせているので、ul要素自体の装飾にはちょっと工夫が必要です。その話はまた別の機会に。

実は、floatプロパティよりもdisplayプロパティにinline-blockを指定する方が楽。

ここまで読ませておいて最後にこういうのもどうかと思いますが(^_^;)、上記でご紹介したfloatプロパティを使って横方向に並べるテクニックよりも、displayプロパティにinline-blockを指定して横方向に並べる方が楽です。その方が装飾しやすいですし、Clearfixのようなハックも不要です。
そんなinline-blockを使って横方向に並べる方法は、All Aboutに記事として書きましたので、ぜひそちらをご参照下さい！
→「ul要素で作るリストを、横向きメニューに装飾する方法」

(更新日：2016年02月02日)