TOPシステム開発【即実践!HTML+CSS】テーブルレイアウトから脱出せよ!> 第2回:カラムを理解する! (1/3)

【即実践!HTML+CSS】テーブルレイアウトから脱出せよ!

【即実践!HTML+CSS】
テーブルレイアウトから脱出せよ!

第2回:カラムを理解する!

著者:米倉 明男

公開日:2008/04/08(火)

テーブルレイアウトでのカラム作成

Webデザインのレイアウトではカラム(段組)という手法がよく使われています。この語源は「Column」表計算ソフトで使う「列」からきています。

Webサイトでは左側のカラムをナビゲーションにして、右側のカラムをコンテンツエリアとするパターンや、ポータルサイトのように情報量が多いWebサイトでは3段組カラムを使い、左側がナビゲーション、真ん中にメインコンテンツ、右側にバナーや関連へのリンク、という区分けもスタンダードな形式といえるでしょう。

テーブルレイアウトでのコーディングによるカラム作成は、まず全体をテーブル<table>タグで囲み左右にセルを作ります。そして左カラムは左のセルに入れ子のテーブルを新規作成して、親のセルを左寄せ設定<td align="left">にします。右カラムも同様に新規テーブルを入れ子にして親のセルを右寄せ<td align="right">にします。

この手法は視覚的なコーディング方法で、作り手側からは簡単な作業となりますが、一方のユーザには不便なケースもあります。例えば、画面解像度によってはテーブルが画面内に収まりきれず、Webブラウザに横スクロールが発生することがあります。

また表示速度の面では、テーブルでカラムを作成すると全体を包括した親テーブルを読み込み終わるまで表示ができません。このテーブルレイアウトの表示時間が遅さの体感となっているのでしょう。

図1:テーブルレイアウトとCSSの違い

CSSコーディングでのカラム作成

CSSでコーディングする場合はXHTML側が文章構造化することが前提です。テーブルコーディングの場合は<table>タグの仕様から必ず左の内容を先に記述する必要がありましたが、CSSで制御すると左右関係なくXHTMLに記述することが可能です。

例えば、構造化された文章ではメインコンテンツを先に記述して、ナビーゲーションを後に記述しても、CSS側から左右に振り分けることができます。この手法では左右を反対にすることもCSSファイルだけでできるのです。

「Web準拠」の概念では、XHTML文書は構造化された文章の流れで記述することができます。CSSコーディングを使用することでレイアウトに依存しない文章の流れを作ることが可能になります。

前回、アクセシビリティについて触れましたが、音声ブラウザを使用するユーザにとってはメインコンテンツの後に、ナビゲーションを読み上げた方が全体の流れとしてはスムーズになります。またSEOの観点からもコンテンツ内容が先に記述されていた方が、検索エンジンロボットに判別されやすいと言われています。

CSSコーディングでは「float(フロート)」というプロパティを使用する機会が多いです。このfloatはテーブルコーディングにはない考え方で、難しい面があります。今回はこの「float(フロート)」の概念を理解して、CSSのカラム作成をマスターしましょう。 次のページ




米倉 明男
著者プロフィール
米倉 明男
Webデザイナー
印刷会社、Web制作会社などのデザイナー/ディレクターを経て、2007年からフリーランスとして活動。デジタルハリウッド講師。
http://www.morethanwords.jp


INDEX
第2回:カラムを理解する!
テーブルレイアウトでのカラム作成
  float(フロート)の概念
  float(フロート)を使った3段組カラム作成