リストタグ

縦並びのリストと同様、横並びのリストに対しても各リストの先頭につくマーク（・のようなマーク）を非表示にする必要があります。

リストマークを非表示にするスタイルシートのタグ

li {
list-style: none;
}

リストマークを横並びにするスタイルシートのタグ

li {
display: inline;
}

リストマークを消す!

リストマークを消して、横並びにし、リストマークの表示位置をoutsideにします。

li {
list-style: none outside;
display: inline;
}

1つのliタグに対して、floatの命令をしなくても、display: inline;で横並びになります。

• ホーム
• メール
• リンク

デフォルトではこうなります。これを、

横並びのリストメニューにします。

• ホーム
• メール
• リンク

HTMLタグサンプル

<ul class="samplew"> <li>ホーム</li> <li>メール</li> <li>リンク</li> </ul>

スタイルシートサンプル

.samplew li { display: inline; list-style: none outside; }

これでは少々わかりにくいので、リストメニューにボーダーをつけてみます。

• ホーム
• メール
• リンク

HTMLタグサンプル

<ul class="samplew2"> <li>ホーム</li> <li>メール</li> <li>リンク</li> </ul>

スタイルシートサンプル

.samplew2 li { display: inline; border: 1px solid #999; list-style: none outside; }

リストはHTMLページを作成する際、よく用いられているようです。 横並びのリストメニューをよく見かけるようになりました。

リストメニューを横並びにしてくれるdisplay: inline;このタグを使って、横並びのリストメニューをスタイルシートでデザインをアレンジしてみましょう。