レベル: 中級 Michael Russell (MikeRussell@VickiFox.com), Systems Architect, Vicki Fox Productions, Inc.
2008年 3月 05日 CSS の float プロパティーは、Web デザイナーがページのレイアウトによく使う手法の 1 つですが、あまりよく理解されていないことが多く、またブラウザーごとに実装が異なるという問題があります。この記事では、float プロパティーとその一般的な使い方、開発ツールの問題、そしてブラウザーによる動作の違いについて説明します。
画像の周囲を文字列で囲む習慣は、その昔、本に彩飾を施した頃の時代からありました。
Web の初期の頃の先駆者達は、文字列で画像を囲むことによる感覚的な美しさと空白の節約を認識し、Netscape 1.0 と、HTML 2.0 への更新の中に「float」機能を含めました。そして要素に対して float を指定できることは HTML 標準と CSS (Cascading Style Sheet) 仕様の基本となりました。
「float」プロパティーの定義は非常に単純ですが、その実装と使い方が原因で、多くの Web デザイナーが思い通りのページにできずに時間を無駄にする結果となっています。
この記事では、「float」プロパティーに関する次の側面を説明します。
- 定義と概念的なモデル
- 一般的な使い方
- 開発ツールの問題
- ブラウザーの問題
「float」プロパティーとは何か
CSS2 仕様には「float」プロパティーに関する明確な定義と動作ルールが規定されています。以下のサブセクションでは、CSS2 仕様の Section 9、Visual Formatting Model (9 章、視覚整形モデル) (「参考文献」にリンクがあります) 内の Section 9.5 (9.5 章) の記述を基にしながら説明します。
定義
float プロパティーは、あるボックスが左側に配置するか右側に配置するかを指定します。このプロパティーは、絶対位置では指定されないボックスを生成する任意の要素に対して設定することができます。
float プロパティーが値として持つことができるのは、以下の値です。
-
inherit - この値を持つ要素は、その要素を包含する要素の float プロパティーを継承します。これはデフォルトの値です。
-
left - この値を持つ要素は、左側に配置されるブロック・ボックスを生成します。コンテンツは上から開始され、そのボックスの右側にも回り込んで表示されます。このコンテンツ・フローは「clear」プロパティーを持つ要素の影響を受けます。値が「none」の場合以外、「display」プロパティーは無視されます。
-
right - この値を持つ要素は、右側に配置されるブロック・ボックスを生成します。コンテンツは上から開始され、そのボックスの左側にも回り込んで表示されます。このコンテンツ・フローは「clear」プロパティーを持つ要素の影響を受けます。値が「none」の場合以外、「display」プロパティーは無視されます。
-
none - そのボックスは、左右への配置とコンテンツの回り込みが行われません。
動作
float プロパティーは以下のルールによって決まります。ここでは、左 float (float プロパティーの値に left を指定した場合) の動作のみを説明します。right を指定した場合の動作は、単純に方向を逆にします (つまり左が右になります)。
CSS2 仕様では、float の動作を、ボックス辺を使って定義しています。下記は復習のために CSS のボックス・モデルの 4 つの異なるボックス辺を示しています。
-
内容辺または内辺は、その要素の表示される内容を囲みます。これは要素の内容の最も近くにある辺です。
-
パディング辺で囲まれる中には、その要素に適用されるパディングが含まれます。パディング辺は包含ブロックの辺を定義します。
-
ボーダー辺で囲まれる中には、その要素に適用されるボーダーが含まれます。
-
マージン辺または外辺には、その要素に適用されるマージンが含まれます。
包含ブロックの水平方向の制限。左 float ボックスの左マージン辺は、包含ブロックの左パディング辺の左に来てはいけません。
包含ブロックの垂直方向の制限。左 float ボックスの上マージン辺は、包含ブロックの上パディング辺よりも上に来てはいけません。
前にある float による制限。現在のボックスが左 float ボックスであり、その前のボックスが左 float ボックスの場合、現在のボックスの左マージン辺は、前のボックスの右マージン辺の右に来なければならないか、あるいは現在のボックスの上マージン辺が前のボックスの下マージン辺よりも下に来なければなりません。
重複に対する制限。左 float ボックスの右マージン辺は、同じ水平空間を共有する右 float ボックスの左マージン辺の右に来てはいけません。
前の要素による垂直方向の制限。左 float ボックスの上マージン辺は、ソース文書の中で前にある要素によって生成されたブロックあるいは float ボックスの上マージン辺よりも上に来てはいけません。
行ボックスによる垂直方向の制限。左 float ボックスの上マージン辺は、ソース文書の中で前にある要素によって生成されるボックスを含む行ボックスの上パディング辺よりも上に来てはいけません。行ボックスは、包含ブロック・レベル要素の行を構成するすべてのインライン・ボックスを含む仮想的な矩形です。行ボックスの高さ (上パディング辺) は、最も高い行ボックスの高さです。
水平方向反対側のマージンによる制限。左側に別の左 float ボックスを持つ左 float ボックスの右マージン辺は、包含ブロックの右パディング辺の右に来てはいけません。つまり左 float ボックスは、(既に可能な限り左側に配置されている場合を除き) 包含ブロックの右辺を越えて「突き出す」ことはできません。
最適垂直位置による制限。float ボックスは包含ブロック内で可能な限り上に配置される必要があります。
最適水平位置による制限。左 float ボックスは包含ブロック内で可能な限り左に配置される必要があります。
位置の優先順位のルール。float ボックスの位置を解決する際には、最適垂直方向に関する制限が最適水平方向に関する制限よりも優先されます。つまり、float ボックスを上に移動させる動作の方が、横方向に移動させる動作よりも優先されます。
図 1 は、この動作のルールによって、マージンを持つ画像がテキスト・ブロックに対してどう配置されるかを示しています。
図 1. 左 float ボックスの位置決めの例
上記以外の考慮事項
新人の Web デザイナーは、ソース文書のどこに float 要素を置べきなのかを決める上で、混乱するかもしれません。そうした混乱を解決する上で、次のような大まかな指針が役立ちます。
位置決めに関して。ブラウザーは float 要素の垂直位置を、その文書の「通常のフロー」におけるその要素の位置から判断します。通常のフローとは、ブラウザーが位置決めのプロパティーを無視した場合に文書がどのように表示されるかを言います。位置決めのプロパティーが無視されると、float 要素はフローから外れ、その要素の包含ブロックの中で可能な限り左 (または右) に移動されます。
インラインはブロックになる。float 要素はページのフォーマット設定用のブロック・ボックスになります。これは display: block プロパティーを指定することと同じです。
必要な幅。float 要素には幅を指定する必要があります。CSS2 仕様では、要素は、「width」プロパティーを使って明示的な幅を指定するか、あるいは包含されるサブ要素 (画像など) から暗黙的な幅を計算するように記述されています。画像は、そのプロパティーの一部として暗黙的な幅を持ちます。幅が指定されない場合の結果は予測できません。
「clear」プロパティーとは何か
float 要素の後に続く要素は、その float 要素の周りに回り込みます。一般的に、テキストに対しては、これは望ましい動作です。しかしレイアウト用に float を使っている場合には、回り込まないようにしたいかもしれません。float 要素の後に続く要素が回り込まないようにするには、その要素に「clear」プロパティーを指定する必要があります。
CSS2 の仕様は、clear プロパティーの定義と動作ルールを明確に規定しています。以下のサブセクションでは、CSS2 仕様の Section 9、Visual Formatting Model (9 章、視覚整形モデル) (「参考文献」にリンクがあります) 内の Section 9.5 (9.5 章) の記述を基にしながら説明します。
定義
clear プロパティーは、ある要素のボックスの辺 (一辺または複数の辺) が、その要素の前にある float ボックスと隣接できないことを示します。その要素自体が float 要素を子孫として持っている場合には、clear プロパティーはそれらの子孫には影響を与えません。
clear プロパティーはブロック・レベル要素に対してのみ適用されます。そうしたブロック・レベル要素には、float プロパティーを使うことでブロック・レベルになる要素も含まれます。
clear プロパティーが値として持つことができるのは、以下の値です。
-
inherit - この値を持つ要素は、その要素を包含する要素の clear プロパティーを継承します。これはデフォルトの値です。
-
left - 生成されるボックスの上ボーダー辺が、この前にあるソース要素から生成された任意の左 float ボックスの下マージン辺よりも下に来るように、生成されるボックスの上マージンを増加します。
-
right - 生成されるボックスの上ボーダー辺が、この前にあるソース要素から生成された任意の右 float ボックスの下マージン辺よりも下に来るように、生成されるボックスの上マージンを増加します。
-
both - 生成されるボックスを、この前にあるソース要素から生成されたすべての float ボックスの下に位置するようにします。
-
none - 前にある float 要素と、そのボックスとの位置関係に何も制限を適用しません。
動作
clear プロパティーの動作は、要するに float 要素の位置決めに関するルールを変更したものです。CSS2 の仕様では、clear プロパティーの動作は追加の制限として扱われます。
clear による制限。float ボックスの上マージン辺は、その前にあるすべての左 float ボックス (「clear:left」の場合)、あるいはすべての右 float ボックス (「clear:right」の場合)、あるいはその両方 (「clear:both」の場合) の、下マージン辺の下でなければなりません。
図 2 は、clear プロパティーの使い方の例を示しています。どちらの段落にもプロパティー「clear:left」があります。このプロパティーは、最初の段落に対して、あるいは最初の段落の中で定義されている float ボックスに対しては何の影響もありません。この clear によって、2 番目の段落が float の下に配置されます。2 番目の段落の上マージンが、この前の段落の下マージンと合うように大きくとられていることに注目してください。
図 2. clear による位置決めの例
上記以外の考慮事項
clear プロパティーの難しい点は、clear プロパティーを使うためには clear プロパティーの後に来る要素に対して文書の中でマークアップを追加しなければならないことです。
リスト 1 は、コンテンツを含まないマークアップを HTML 文書に追加するために空の div を追加する方法を示しています。
リスト 1. 「clear」を処理するための追加のマークアップ
<div class="myFloatClass">
<p>myFloatClass has float:left specified</p>
</div>
<div class="myClearClass" />
<!--myClearClass has clear:left specified-->
|
何人かの Web 作成者が、HTML 文書に余分なマークアップを追加せずにすませるための手法を提案しています。以下に示すのはそうした手法の一例です。
- コンテナー要素に「float」を追加する。
- コンテナー要素に「overflow:hidden」を追加する。
- コンテナー要素に CSS2 の「:after」疑似クラスを追加する。
コンテナーに float を追加する手法。これはページ・レイアウトや水平方向のナビゲーション・メニューによく見られる手法であり、float 要素を float コンテナーの中に配置します。float コンテナーは、その中に float の適用対象となる要素をすべて含むように作られます。この手法では、コンテナーの width プロパティーを (一般的な設定である 100% になるように) 正しく設定する必要があります。
この手法にはいくつかの欠点があります。その第 1 は幅の設定が困難なこと、つまり 100% を使うとパディングと競合するかもしれないという事実です。第 2 に、Internet Explorer V6 は余分な下マージンを追加するかもしれません。そして最後に、float ボックスが深くネストされると、一部のブラウザーで予期せぬ動作が起きる可能性があります。
リスト 2 は float コンテナーによる手法の CSS コードを示しています。
リスト 2. float コンテナーによる手法
.myFloatClass {
float: left;
width: 100%;
}
|
コンテナーに overflow:hidden を追加する手法。この手法は滅多に使われません。この手法は「overflow」プロパティーと「clip」プロパティーのデフォルトの動作を利用しており、overflow の対象要素は、すべてのサブ要素 (float 要素も含まれます) を含む範囲にまで拡張されます。
この手法にはいくつかの欠点があります。第 1 に、overflow を使うことで、自由に設定できるはずのコンテナー高さが影響を受けるかもしれません。第 2 に、overflow を指定する場合、Internet Explorer V6 に対しては、「hasLayout」プロパティーを設定する必要があります。
リスト 3 は、コンテナーに overflow:hidden を追加する手法の CSS コードを示しています。
リスト 3. コンテナーに overflow:hidden を追加する手法
.myFloatClass {
overflow: hidden;
height: 1%;
/* Or zoom:1 to trigger IE's hasLayout */
}
|
:after 疑似クラスによる手法。この手法もほとんど使われません。この手法では、CSS の疑似クラスを使うことでコンテナーの後にコンテンツを生成します。:after 疑似クラスを使うことで、作成される HTML 文書に、clear プロパティーが指定された新しい要素が追加されます。
これは最も望ましくない手法であり、ほとんどのブラウザーではサポートされていません。:after 疑似クラスは、Internet Explorer V7 でも、それ以前のバージョンでもサポートされていません。しかし最も重要なことは、この手法は、作成される HTML 文書に無意味なコンテンツを挿入してしまうことです。
リスト 4 は :after 疑似クラスによる手法の CSS コードを示しています。
リスト 4. :after 疑似クラスによる手法
.myFloatClass {
height: 1%;
/* Or zoom:1 to trigger IE's hasLayout */
}
.myFloatClass:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
|
 |
「float」のさまざまな使い方
float プロパティーは、Web デザイナーが使う手法の中でも頻繁に使われる手法になりました。float プロパティーの使い方は、デザイナーの想像力次第でいくらでも広がります。以下に示すのはよく見られる float の使い方の例です。
「参考文献」セクションには、float プロパティーを使ってこうした効果を実現する方法について詳細を解説した何冊かの本と Web サイトを挙げてあります。
画像の固定。画像を左に移動するか右に移動するかは話の半分にすぎません。float はソース文書の中でその要素が含まれるポイントにおいて有効なため、float の対象はそのポイントに固定されます。これは、画像を説明するテキストから画像が離れないようにしておきたいテキスト文書で特に重要です。
表題の追加。画像に対して、例えば「図 1 サンプル画像」のような表題を追加した方が望ましいことがよくあります。画像を <div> ブロックなど別のコンテナーの中に置き、その <div> ブロックを float にすることで、画像に表題を含めることができます。
大きなサイズの大文字。古典的な本のスタイルを再現し、テキスト・ブロックの左上のコーナーの文字を大きなサイズの大文字にすることができます。ただし、単純にフォント・サイズを変更することはできません。その文字がテキストの他の文字の上に広がってしまうからです。そこでフォント・サイズを変更する代わりに、その文字を下方向に拡張し、その文字を残りのテキストが取り囲むようにします。
インライン・リスト。float と display:inline を組み合わせて使うことで、順序なしリスト (<ul>) を水平方向のメニューやナビゲーション・タブに変換します。メニューを順序なしリストとして表現すると、高度なレイアウトやグラフィカル・レイアウトを表示しない Web ブラウザー (例えばテキスト専用ブラウザーなど) ではメニューが明確な選択肢のリストとして表示されます。
複数列で構成されるページ・レイアウト。Web ページの水平方向のレイアウトに表を使うと、コンテンツとは無関係な大量のマークアップがソース文書の中にあるため、非常に保守が困難な Web ページになりがちです。Web 標準に準拠したブラウザーが増えてきたことにより、div や CSS を使うことで同じようなレイアウトを容易に実現できるようになり、ソース文書に含まれるマークアップはずっと少なくなりました。float プロパティーは、div ブロックを表のセルのように配置させるための 1 つの方法です。
柔軟なギャラリー・ページ。画像のギャラリーをレイアウトするために、従来より表が使われています。表の問題は、柔軟性がなく、ユーザーが表示ウィンドウのサイズを変更した場合にうまく対応できないことです。表の代わりに float を画像に適用すると、ギャラリーは表によるレイアウトのように見えますが、ユーザーが表示ウィンドウのサイズを変更すると、それに応じてレイアウトが狭くなったり広くなったりします。例えば、柔軟なギャラリー・ページで 12 枚の画像を表示するための表示の組み合わせは、1x12、2x6、3x4、4x3、6x2、そして 12x1 のようになります。
|
|
開発ツールに関する考慮事項
開発者なら誰もが知っているとおり、HTML/CSS の WYSIWYG エディターはどれも同じわけではありません。各エディターは特有の癖を持ち、Web 標準への準拠レベルが異なり、また使用されているページ描画エンジンも異なります。
私が IBM® Rational® Software Architect V7 や Adobe Dreamweaver CS3、そして Genuitec MyEclipse V6 など、よく使われる WYSIWYG エディターを使った経験から言うと、これらのツールはページの作成を始めるためには便利ですが、ページの微調整にはソース・コード・レベルの作業を余儀なくされることがよくあります。ターゲットとするブラウザーでそのページをテストすることは非常に重要です。多くのエディターには、さまざまなブラウザーのためのアド・オンがサポートされており、そのエディターからブラウザーを起動してページをテストできるようになっています。
もし皆さんが WYSIWYG エディターを評価する立場にあるならば、そのエディターを Acid2 Browser Test (「参考文献」を参照) でテストするようにお勧めします。Web Standards Project はブラウザー・ベンダーの間で Web 標準への準拠のレベルをテスできるように Acid2 Browser Test を開発しました。しかし Acid2 Browser Test のソースは、検討対象である HTML/CSS の WYSIWYG エディターが Web 標準に準拠しているかどうかをテストするためにも使うことができます。
ブラウザーに関する考慮事項
Web デザイナー達は、よく利用される Web ブラウザーに、標準に従わない動作がいくつかあることを指摘しています。
ネストされた float 要素の実装はブラウザーによって異なります。そのため、深くネストされた float 要素を使って位置決めすることは避けた方が賢明かもしれません。そうした場合には、選択肢としては相対位置指定プロパティーまたは絶対位置指定プロパティーを使った方が適切です。
Internet Explorer の場合。「Position Is
Everything」という Web サイトでは、Internet Explorer のバグと、それらのバグの修正方法を一覧にしています。Explorer Exposed ページを参照してください。
Firefox の場合。float に関連して私が Firefox の中で見つけた主なバグは、ウィンドウの先頭に隙間ができてしまうバグ (Top Gap Bug) です。このバグがよく現れるのは、複数列のレイアウトで列に float が指定されていて、ヘッダー・セクションに float が指定されていない場合です。複数の列の中に、上マージンを持つ要素が含まれる列があると、その要素のマージンがヘッダーよりも上に押しやられ、ウィンドウの先頭とヘッダー・セクションの先頭との間に隙間ができてしまいます。これを修正するためには、float が指定される列の上に何かを置きます。1 つの方法として、clear:both プロパティーを持つ 1 つの要素をヘッダーの下部に追加します。別の方法としては、ヘッダーも float にします。
Opera の場合。「Position Is Everything」の Web サイトでは、Opera のバグと、それらのバグの修正方法を一覧にして管理しています。Opera Omnibus ページを参照してください。
まとめ
ページ上で要素を左右へ配置し、その周りにも要素を表示させる float プロパティーに相当する機能は Web ブラウザー技術の初期の頃からありました。最近の Web デザインでは、これまでは表を使って実現していたページ・レイアウトにも一層 float プロパティーを使うようになっています。float プロパティーの定義と動作は単純ですが、ブラウザーによって動作が一貫していないため float プロパティーの使い方が難しくなっています。この記事では float プロパティーの基本的なことを説明しただけなので、詳しくは「参考文献」セクションを調べてみてください。そしてもちろん、皆さん自身が恐れずに float プロパティーを試してみてください。
参考文献 学ぶために
製品や技術を入手するために
-
IBM 製品の試用版をダウンロードし、DB2® や Lotus®、Rational®、Tivoli®、WebSphere® などが提供するアプリケーション開発ツールやミドルウェア製品をお試しください。
議論するために
著者について | 
| | Michael Russell は、物理学の学士号とコンピューター・サイエンスの修士号を持っています。14 年近くの間、ロジスティクス・エンジニア、テクニカル・サービス・マネージャー、そして認定 IT アーキテクトとして IBM に勤務しました。現在は防衛航空宇宙 (シミュレーション及びロジスティクス) 産業でシステム・アーキテクトとして活躍しています。Windows、UNIX、OS/400 での経験を持ち、彼が所有する会社の Web サイトではエンターテイメント用の Web 技術を使用しています。 |
記事の評価
| 
