第4回 CSSでリストを横並びのメニューにするテーブルレイアウトを卒業しよう

CSS(スタイルシート)の色々なテクニックや知識を紹介します。

CSSでリストを横並びのメニューにする

前回に続き、今回もリスト、<ul><li>を扱っていきます。リストは項目ごとに改行されます。

したがって、縦方向に伸びていきます。「箇条書きなんだからあったり前じゃん」という感じかもしれませんが、これにはしっかりとしたワケがあります。

XHTMLの要素はブロック要素インライン要素に 大きく分けることができ、<ul><li>はブロック要素に分別されます。ブロック要素は名前の通りブロック=カタマリのようなもので、文書構造を構成する役割を持っています。代表的な要素としては見出しの<h1><h6>や段落の<p>がブロック要素にあたります。

そして、このブロック要素は、「前後が改行されて表示される」という大きな特徴があります。リストが項目毎に改行されるのはこのためです。 今回はこれを横並びに変えて、Webサイトのメニュー(ナビゲーション)として使おうというのが目的です。わざわざリストを使わずに、

<div id="nav">
    <a href="#">top</a> 	
    <a href="#">info</a> 	
    <a href="#">link</a>
</div>

これでいい…ような気もしますが、Webサイトのメニューということは、そのサイトの中身の一覧=リストということになるので、文書構造を考えると、やはり<ul>と<li>でマークアップした方がしっくりきます。

<div id="nav">
    <ul> 		
        <li><a href="#">top</a></li> 	
        <li><a href="#">info</a></li> 	
        <li><a href="#">link</a></li> 
    </ul> 
</div> 

この方がよいでしょう。ですがこのままでは項目毎に改行されてしまいます。デザイン上横並びで表示したい場合には不都合です。 そこで、CSSをつかってブロック要素をインライン要素に変えちゃおう!というのが今回のポイントです。(実際に変化するわけではなく表示上です。)

displayプロパティを使うと、要素の表示形式をカンタンに切り替えることができます。

#nav ul li{ 	
    display: inline;
 } 

たったこれだけです。すると、

リストが改行されずに表示される。

こうなります。 項目の間隔がつまりすぎていたりしますので、微調整します。

#nav{
    background-color: #444;	
    padding: 3px;	
} 


#nav ul{
    padding: 0px; 	
    margin: 0px;
} 


#nav ul li {
    display: inline; 	
    margin-right: 1em;
} 


#nav ul li a { 
    font-family: "Trebuchet MS", sans-serif; 
    text-decoration: none;
    color: #fff; 	 
} 


#nav ul li a:hover{ 
    border-bottom: dotted 1px #fff;	 
}

即席デザインですが、結果こんな感じです。

inlineのリストのデザイン調整

この<ul><li>は非常によく使われる要素で、たとえばYahoo!Japanなどでもそこら中がリストになっています。 ハイライトした部分はリストが使われています。

yahoo japanのサイトでもリストが使われている。

ぱっと見ただけでこれくらいあるので、もっとあると思います。

たかがリスト、されどリストってかんじですね。 このdisplayプロパティを使う以外にも方法はありますが、多分この方法がわかりやすくて手っ取り早いのではないかと思います。講座では他の方法もご紹介しています。(こう鈴木 航 (すずきこう)

次のページは…
CSSでドロップキャップ(先頭文字を大きくする)
関連リンク
鈴木 航 (すずき こう)
鈴木 航 (すずき こう)

XHTML、CSSなどのWeb関連技術を得意とする。かぼちゃの煮物が嫌い。

CSS 3分コーディング

RSSフィードで
最新情報を購読