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

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

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

DreamweaverでCSSの使い方を習得: スタイルシートの書き方から使い方、ブラウザーごとの動きの差まで、ページレイアウト手法を習得します。; Dreamweaver CS5 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のリストのデザイン調整