テーブルレイアウトでのカラム作成
Webデザインのレイアウトではカラム（段組）という手法がよく使われています。この語源は「Column」表計算ソフトで使う「列」からきています。
Webサイトでは左側のカラムをナビゲーションにして、右側のカラムをコンテンツエリアとするパターンや、ポータルサイトのように情報量が多いWebサイトでは3段組カラムを使い、左側がナビゲーション、真ん中にメインコンテンツ、右側にバナーや関連へのリンク、という区分けもスタンダード な形式といえるでしょう。
テーブルレイアウトでのコーディングによるカラム作成は、まず全体をテーブル
タグで囲み左右にセルを作ります。 そして左カラムは左のセルに入れ子のテーブルを新規作成して、親のセルを左寄せ設定| にします。右カラムも同様に新規テーブルを入れ子にして親のセルを右寄せ | にします。
この手法は視覚的なコーディング方法で、作り手側からは簡単な作業となりますが、一方のユーザには不便なケースもあります。例えば、画面解像度によってはテーブルが画面内に収まりきれず、Webブラウザに横スクロールが発生することがあります。 また表示速度の面では、テーブルでカラムを作成すると全体を包括した親テーブルを読み込み終わるまで表示ができません。このテーブルレイアウトの表示時間が遅さの体感となっているのでしょう。  CSSコーディングでのカラム作成CSSでコーディングする場合はXHTML側が文章構造化することが前提です。テーブルコーディングの場合は タグの仕様から必ず左の内容を先に記述する必要がありましたが、CSSで制御すると左右関係なくXHTMLに記述することが可能です。例えば、構造化された文章ではメインコンテンツを先に記述して、ナビーゲーションを後に記述しても、CSS側から左右に振り分けることができます。この手法では左右を反対にすることもCSSファイルだけでできるのです。 「Web準拠」の概念では、XHTML文書は構造化された文章の流れで記述することができます。CSSコーディングを使用することでレイアウトに依存しない文章の流れを作ることが可能になります。 前回、アクセシビリティについて触れましたが、音声ブラウザを使用するユーザにとってはメインコンテンツの後に、ナビゲーションを読み上げた方が全体の流れとしてはスムーズになります。またSEOの観点からもコンテンツ内容が先に記述されていた方が、検索エンジンロボットに判別されやすいと 言われています。 CSSコーディングでは「float（フロート）」というプロパティを使用する機会が多いです。このfloatはテーブルコーディングにはない考え方で、難しい面があります。今回はこの「float（フロート）」の概念を理解して、CSSのカラム作成をマスターしましょう。 float（フロート）の概念floatプロパティは、元々ボックスの外側にテキストを回り込ませるためのプロパティです。例えば ボックスにfloat:leftと指定すると、そのボックスは浮動ボックスとなり、左端に配置され、その後に続くテキストが右側に回り込みます。
同様にfloat:rightと指定すると浮動ボックスは右端に配置され、続きのテキストは左側に回り込みます。 floatを使用する場合に注意する点は3つあります。 1つ目は、CSS2の仕様ではfloatプロパティを指定する場合に、そのボックス自身の幅を（width）を指定しておく必要があることです。この幅（width）を指定しないと一部のWebブラウザで回り込みが反映されない場合があるので注意しましょう。 2つ目は、floatを指定した後に続くボックスはすべて回り込み対象となることです。そのため、回り込みを必要としないボックスの段階で clearプロパティを指定します。float:leftの回り込み解除はclear:left、float:rightの解除は clear:right、左右両方にfloat指定している場合にはclear:bothで両方が解除となります。 3つ目は、floatの指定時にその親ボックスの背景が表示されないという問題です。これに対処する方法は親ボックスのoverflowプ ロパティにhidden、auto、scrollのいずれかを指定します。この指定の場合、Netscape7.1、Mac IE 5.xでバグが発生します。現時点でのベストな対処法はCSSハックの1つ「clearfix」を使う方法があります。CSSハックについては、本連載の第4回で詳しく解説します。  （画像をクリックすると別ウィンドウに拡大図を表示します） float（フロート）を使った2段組カラム作成では、ここからfloatプロパティを使って2段組みのカラムを作成してみましょう。ボックスは「ヘッダー」「フッター」「メインコンテン ツ」「ナビゲーション」の4つに、全体を囲む「コンテナ」からなります。前回と同様にそれぞれを タグ（division区切り）に分けます。
まず に幅を指定することでページ全体のサイズを固定します。そして「メインコンテンツ」エリアと「ナビゲーション」エリアにそれぞれfloat:right;、float:left;を使い左右に配置します。この場合には必ずwidth（幅）も忘れずに指定してください。 最後にフロートを解除するためのclear:both;をフッターに記述して完了です（リスト1、2）。
応用例として、 と
関連記事バックナンバーこの記事の筆者
筆者の人気記事Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。 
|