メニューの書き方その2

続いて、メニューを横にする方法です。
一番簡単なのは、デフォルトではliはブロック要素ですが、インラインにします。
そうすると、横に並びます。

liタグでメニューを書いたときの基本的な構造は以下のとおりです。
HTML
<ul>
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
<li><a href="#">menu4</a></li>
<li><a href="#">menu5</a></li>
</ul>

CSS
ul{
list-style-type:none;/* リストマーク非表示 */
}

li{
display:inline;/* li要素をインラインに */
padding-right:2em;/* 右側を空ける。こうすると見やすくなります。 */
}

また、floatプロパティを使用するのも一般的です。
CSS
li{
float:left;
}
また、この場合は、回り込みを解除しなければなりません。以下のタグをCSSに追加してください。

CSS
ul{
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
本来は、メニューの次のカラム(例えばdivタグとか)に「clear:both;」を指定すれば、回り込みは解除されます。
IE6の場合は、なぜか「clear:both;」がなくても解除されます。(これはバグだと思います。)
「clear:both;」だけでは、Firefoxでは回り込みは解除されるのですが、メニューのボックスがきちんとうまく表示されません。
大抵のサイトを見ていると、メニューの次のカラムに「clear:both;」を指定しているだけですが、特にくずれなく表示されています。
しかし、メニューのボックスにborderプロパティを使用したときに弊害が出ます。
borderがうまくメニューの周りを囲んでくれないのです。
メニュー上部のみに表示されてしまいます。
つまり、メニューの内容がない状態と扱われているのです。
そのため、ちょっとトリッキーなやり方なのですが、ulタグに「:after擬似要素」を用い、ulタグ直後に回り込みを解除しています。

個人的には見えていなくても、ボックスがきちんと囲まれているほうが気持ち悪くないので、これを多用しています。
(配布しているデザインテンプレートにもよく使っています。)

あまりよくないかもしれませんが、メニューを横並びにするときはtableタグを使用すると、あまりCSSに悩まずできるような気がします。
CSSはカラムを横並びするのに、ハックとか使用しないとうまくいかないことが多いので、困り者です。


次回から、デザインのカスタマイズにはいっていきたいと思います。
top

ホームページ作成に役立つコーナー