サイトやブログでリストを列に並べる

1ページを使ってメニューを作る場合や、リンク集を作るときや、単にリストを表記するとき、一列に並べては冗長ですよね。

そうは言っても、スペース等で区切ると、スマートではありませんし、ずれてしまいます。

そこで、こうします。簡単な方法です。
スタイルシート（*.css）で定義しておきます。

.two-column{
 float : left;
 width : 100%;
}
.two-column li{
 float : left;
 width : 50%;
}

これは二列になります。columnsは何でも良いですし、重複していたら、変えます。

三列ならこんな感じです。

.three-column{
 float : left;
 width : 100%;
}
.three-column li{
 float : left;
 width : 33.3%;
}

４列にしたい場合は、33.3のところを25にしてください。

 

さて、実際のページでは、HTMLでこのように書きます。

<ul class="two-column">
 <li>東京</li>
 <li>大阪</li>
 <li>名古屋</li>
 <li>横浜</li>
</ul>

このような感じですね。

• 東京
• 大阪
• 名古屋
• 横浜