リストを横並びに配置する
ul要素もli要素もブロックレベルなので、デフォルトの状態では横並びにはなりません。ここからは、リストを横並びに配置する方法を紹介します。
display:inlineでテキストをシンプルに横並びにする
図06のように、リストのテキストをシンプルに横並びにしたい場合は、li要素にdisplay:inlineを指定します。li要素はブロックレベルですが、インライン表示にすることでリストを横並び表示にできます。
このサンプルでは、li:afterセレクタとcontentプロパティで、li要素の直後に区切り文字「|」を表示しています。最後のli要素に区切り文字は不要なので、CSS3の要素:last-childセレクタを使って、最後のli要素の直後には何も表示しないように指定しています。
この横並びリストをウィンドウの右側に表示したい場合には、ul要素にtext-align: rightを指定します。
<ul id="sample04"> <li><a href="#">ホーム</a></li> <li><a href="#">プライバシーポリシー</a></li> <li><a href="#">お問い合わせ</a></li> </ul>
ul#sample04 {
text-align: right; /* ウィンドウの右側に配置 */
}
ul#sample04 li {
display: inline; /* リストをインライン表示にして横並びにする */
}
ul#sample04 li:after {
content: "｜"; /* 区切り文字を入れる */
}
ul#sample04 li:last-child:after {
content: none; /* 最後は区切り文字を入れない */
}
float:leftで画像を横並びにする
先ほどのdisplay:inlineでリストを横並びにする方法は、シンプルにテキストを横並びにしたい場合には便利ですが、画像のような固定幅を持った要素を横並びにしたいときには適していません。
こうした場合には、floatプロパティを使ったレイアウトがお勧めです。floatプロパティは、要素を左または右側に配置し、後続の要素をその反対側に回り込ませるプロパティです。floatレイアウトのポイントは、以下の2つです。
- 配置する要素や回り込ませる要素の幅を指定すること
- 最後にclearプロパティで回り込み解除を行うこと
サンプルのHTMLコードは次のとおりです。リストには画像を使用しました。また、後続の要素で回り込みを解除するため、ここではh1要素をおいています。
<ul id="sample05"> <li><a href="#"><img src="menu.png" alt="menu"></a></li> <li><a href="#"><img src="menu.png" alt="menu"></a></li> <li><a href="#"><img src="menu.png" alt="menu"></a></li> <li><a href="#"><img src="menu.png" alt="menu"></a></li> <li><a href="#"><img src="menu.png" alt="menu"></a></li> </ul> <h1>title</h1>
このとき、先ほどのdisplay:inlineを使って横並びにすると、図08のように画像と画像の間に隙間ができてしまいます。これは、ソースコード上の改行や半角スペースなどの空白文字が原因です。改行やインデントを付けずにコードを記述すれば、この空白はなくなります。
しかし、floatプロパティでレイアウトすれば、ソースコードの空白文字はレイアウトに影響しません。今回は画像なので幅の指定は不要ですが、テキスト等の場合はwidthプロパティで幅を指定したうえで、float:leftを指定します。
ul#sample05 {
width: 750px;
margin: 0 auto 20px auto;
}
ul#sample05 li {
width: 150px; /* 幅150px */
float: left; /* 左に配置 */
}
回り込みを解除していないため、図09のように、後続のh1要素が回り込んでしまっています。
回り込みを解除するには、回り込ませた要素と同じ階層の兄弟要素にclear:leftを指定します。しかし、ここではli要素を回り込ませているため、後続の兄弟要素がありません。そこで、clearfixというテクニックを使って、回り込みを解除します。簡単に言うと、:after擬似要素で空の内容を作り、そこにclearプロパティをかけるという仕組みです。ソースは次のようになります。今回は汎用的に使えるクラスにするため、「clear:both」としていますが、サンプルではfloat:leftしかかけていないので、clear:leftでも機能します。
/* clearfix */
.clearfix:after {
content: "";
display: block;
clear: both;
}
このclearfixクラスは、親要素（ul要素）に指定します。
<ul id="sample05" class="clearfix"> <li><a href="#"><img src="menu.png" alt="menu"></a></li> ～中略～ </ul>
これで回り込みが解除され、後続のh1要素も本来意図した場所に配置されます。
