デザインサンプルで学ぶCSSによるスタイリング～「floatプロパティによるレイアウト」編

CSSで作るWeb用パーツ（8）

floatレイアウトサンプル：横並びの配置

　続いて、図10のような、サムネイル画像と簡易テキストのセットが横並びに配置されたスタイリングをしてみましょう。商品一覧、記事一覧などでよく使われるレイアウトです。

図10　floatレイアウトサンプル（sample05.html）

　ul要素の子要素liの中に、画像とテキストのセットがあり、それを繰り返したマークアップになっています。

リスト11　画像とテキストの配置例／HTML（sample04.html）

<ul>
  <li>
    <div><img src="sample.jpg" alt="画像サンプル"></div>
    <p>サンプルテキストです。サンプルテキストです。サンプルテキストです。サンプルテキストです。サンプルテキストです。</p>
  </li>
～中略～
  <li>
    <div><img src="sample.jpg" alt="画像サンプル"></div>
    <p>サンプルテキストです。サンプルテキストです。サンプルテキストです。サンプルテキストです。サンプルテキストです。</p>
  </li>
</ul>

　図11のように、ul要素の幅は640pxで上下左右のパディングは20px、li要素の幅はそれぞれ200pxとなっています。li要素の間の余白は、右マージン20pxで設定しますが、3番目のli要素のみ右マージンを0に指定します。

図11　floatレイアウトサンプル（sample05.html）

　3番目のli要素はli:nth-child(3n)というセレクタで指定できます。各li要素をfloat:left;で左フロートさせて横並びに配置しますが、この時、後続の兄弟要素がいないので、親要素ulにoverflow:auto;を指定して高さを算出できるようにしましょう。

リスト12　リストのスタイル／CSS（sample05.html）

ul {
  width: 640px;
  margin: 0 auto;
  background-color: #ffc;
  padding: 20px;
  overflow: auto;
}
li {
  margin: 0;
  padding: 0;
  list-style-type: none;
  width: 200px;
  margin-right: 20px;
  float: left;
}
li:nth-child(3n){
  margin-right: 0;
}
～略～

　overflow:auto;を指定しない場合は、図12のように親ボックスの高さが算出されず、背景色（淡い黄色#ffc）の高さが足りなくなります。

図12　floatレイアウトサンプル（sample05.html）

まとめ

　今回はfloatレイアウトでハマりやすいポイントを中心に紹介しました。floatレイアウトのテクニックを使えば、コンテンツをある程度自由に配置できます。次回は文章の段組を実現するcss3のcolumnsプロパティを紹介します。