リストを横並びにする

2005/04/04

liを横並びにする方法

いつも良く使っている「りすと」コレを横並べにしてみようと思います。
コレでメニューバーなどが作れますし、他の使い方もあります。

これは色んな所で活用できますし、実際私のサイトでも大活躍です。

とにかくやってみよう。

１．ごちゃごちゃ言ってもしかたない、とりあえずやってみましょうね。

これは普通のリストですね。
htmlではこのようにマークアップします。

<ul>
<li>ホーム</li>
<li>コンテンツ</li>
<li>日記</li>
<li>リンク</li>
<li>掲示板</li>
</ul>

２．コレを横並べにするために少し付け加えます。

idとclassを入れました。
htmlではこのようにマークアップします。

<ul id="nav">
<li class="menu">ホーム</li>
<li class="menu">コンテンツ</li>
<li class="menu">日記</li>
<li class="menu">リンク</li>
<li class="menu">掲示板</li>
</ul>

３．そして、スタイルシートはこのように

スタイルシートは私は外部ファイルにしていますが
htmlのファイルに入れても結構です。

#nav { width: 500px;
 margin: 0px;
 padding: 0px;
 list-style: none;
 }

.menu { float: left;
 border: 1px solid #ff0000;
 width: 90px;
 text-align: center;
 font-size: 12px;
 margin: 0px;
 padding: 2px;
 }

４．コレを表示するとこのようになります。

更にココにリンクを張るとメニューバーの完成です。

簡単な解説。

まず、htmlファイルの中にidとclassを指定します。
同じファイル内に一度しか使わないものをid
何回も使うものをclass指定します。

そして指定した要素にCSSを適用させます。
スタイルシートのlist-styleというので、リストのマークを非表示にします。
そして、floatで左から横並べに表示されます。このfloatプロパティは指定した要素を左、または右に配置して、その反対側に後に続く要素を回り込ませます。
この場合widthを500pxに設定していますので幅が許す限り左に表示されオーバーすると自動的に改行します。
その他はボーダーや文字の位置などを好きなように決めます。

勿論、背景画像や文字色、など細かい設定も出来ます。

大体こんな感じで

私も基本的にはこのような方法でやっています。
勿論、もっと細かく設定しています。後は皆さんで色々挑戦してみて下さい。

このコラムにコメントして頂ける場合Travail掲示板-バイト チャットレディまで！