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

CodeZine / 2014年11月19日 14時0分

図12 floatレイアウトサンプル(sample05.html)

 本連載では、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プロパティを指定して回り込みを解除しましょう。これで後続の要素のレイアウト崩れは、だいたい防げるはずです。



CodeZine

トピックスRSS

ランキング