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

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

　本連載では、Webページをデザインする際、具体的にどのようにコーディングすれば良いのか分からない人のために、見出しやリスト、フォームなど、Webページを構成する部品のデザインサンプルを紹介し、CSSによるスタイリング方法を解説します。本記事では、実務でよく使われるテクニックとして、floatプロパティによるレイアウト方法を紹介します。

はじめに

　floatを使ったレイアウトは、CSSレイアウトの基本と言っても過言ではありません。しかし、floatを使用すると「親ボックスの背景が表示されない」「後続のボックスのレイアウトが崩れる」などの問題も起こりがちです。これらの問題を回避する方法もあわせて紹介します。

対象読者

• （X）HTMLとCSSの基本を理解している方。
• デザインのコツを学びたい方。

必要な環境

　本連載で動作確認を行ったブラウザは次の通りです。

• Windows 7 Internet Explorer 11（以下IE 11）
• Windows 7 Firefox 30
• Windows 7 Chrome 35

floatレイアウトのポイント 1

　floatプロパティは、要素を左または右に浮動化するプロパティで、後に続く要素は、その反対側に回り込みます。図1のように、floatプロパティを使うと、通常はHTMLの出現順に縦に並ぶ要素を横並びに配置することができます。

図1　floatでコンテンツを横並びに配置（sample01.html）

　floatレイアウトは実務でもよく使われるテクニックです。使いこなすことができれば、段組レイアウトをはじめ、挿絵の周りにテキストを流し込んだり、コンテンツを横並びに配置したりと、レイアウトの幅が広がります。

　使い勝手が良く、便利な一方で、「後続の要素のレイアウトが崩れる」「親要素の背景が効かない」といった問題も起こりがちですが、これらは簡単なポイントさえ押さえておけば回避できます。

後続要素のレイアウト崩れはclearプロパティで防ぐ

　次の例では、親ボックス#wrapperを作成し、その中に、#boxA、#boxB、#boxCを作成しています。

リスト1　後続要素がある場合／HTML（sample02.html）

<div id="wrapper">
  <div id="boxA">A</div>
  <div id="boxB">B</div>
  <div id="boxC">C</div>
</div>

　CSSでは、#boxAをfloat:left;で左側に、#boxBをfloat:right;で右側にフロートさせました。

リスト2　後続要素がある場合／HTML（sample02.html）

#wrapper {
  width: 620px;
  padding: 10px;
  background-color: #ccc;
  margin: 0 auto;
}
#boxA, #boxB {
  background-color: red;
  ～中略～
}
#boxA {
  width: 200px;
  float: left; /* 左フロート */
}
#boxB {
  width: 400px;
  float: right; /* 右フロート */
}
#boxC {
  background-color: blue;
  ～中略～
}

　このままだと、フロートさせた#boxA、#boxBの後に続く要素#boxCが意図したように配置されず、レイアウトが崩れます。

図2　後続要素のレイアウトが崩れた例（sample02.html）

　後続要素のレイアウト崩れは、floatボックスの後に続く要素が、その反対側に回り込むという仕様のため起こります。これを回避するには、clearプロパティで回り込みを解除すれば良いのです。今回は左右にフロートさせているので、clear:both;を指定します。左フロートの回り込みを解除したい場合は、clear:left;、右フロートの場合はclear:right;を指定します。

リスト3　後続の要素にclear:both;を指定し、回り込みを解除／CSS（sample02a.html）

#boxC {
  clear: both; /* 回り込みを解除 */
  ～略～
}

図3　後続の要素にclear:both;を指定し、回り込みを解除した例（sample02a.html）

　floatプロパティを指定した要素の後に、兄弟要素がある場合には、そこにclearプロパティを指定して回り込みを解除しましょう。これで後続の要素のレイアウト崩れは、だいたい防げるはずです。