リスト(liタグ)で作ったメニューを横並びにする

|

liタグでメニューを横並びにする方法は主に2つあります。

1.floatプロパティを使う

横並びをするには、floatプロパティを用いる方法が一般的です。ただし、いろいろと問題があります。

まず、リストタグの次にコンテンツがある場合、そのコンテンツはリストの横に回りこまれてしまうので、回り込みを解除しなければなりません。

また、floatプロパティを使うと親要素(ここではulタグ)の内容が0になってしまい、例えば、ulタグに背景やborderを適用しようとしてもうまく表示できない場合があります。この解決方法として、「clearfix」というコードの書き方があります。

あと、注意しなければならないのが、リストマークです。この方法ではIEではリストマークが消えているように見えるのですが、Firefoxなどの他のブラウザではきちんとリストマークが見えてしまっています。リストマークを表示したくない場合は「list-style:none;」を指定しましょう。

以上をふまえてコードは以下のようになります。

(X)HTMLコード

<ul class="menu">
<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.menu {
   margin:0;
   padding:0;
}

ul.menu li {
   float:left;
   list-style:none;
}

/* モダンブラウザ(Firefox Opera Safari)対策 */
ul.menu:after{
   content:".";
   display:block;
   height:0;
   clear:both;
   visibility:hidden;
   font-size:0;
}

/* Win版IE7とMac版IE5対策 */
ul.menu{
   display:inline-block;
}

/* Win版IE5および6対策 */
/* Hides from IE-mac \*/
* html ul.menu{
   height:1px;
}

ul.menu{
   display:block;
}
/* End hide from IE-mac */

2.inline要素を使う

本来のリストが縦並びになるのは、ブラウザのデフォルトCSSにより、liタグのdisplayプロパティが「block要素」になっているためです。よって、displayプロパティを「inline要素」にすれば横並びになります。

しかし、注意しなければならないことがあります。

ブラウザによっては、なぜかulタグの上下やliタグの間に謎の隙間が空いてしまう場合があります。これはコードの書き方によるのですが、改行を半角スペースに変換してしまうようです。

この解決方法としては、コードを1行で書いてしまうか、改行の際に「<!--(改行)-->」というふうに書くかの2つがあります。

以上をふまえて、ソースコードは以下のようになります。

(X)HTMLコード

<ul class="menu"><!--
--><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.menu {
   margin:0;
   padding:0;
}

ul.menu li {
   display: inline;
}

このページに関連する記事

CSSの小技に関する記事(53)

参考サイト

お勧めCSS教本

Powered by Movable Type 4.21-ja

最近のブログ記事