次のページテーブルレイアウトでのカラム作成Webデザインのレイアウトではカラム(段組)という手法がよく使われています。この語源は「Column」表計算ソフトで使う「列」からきています。Webサイトでは左側のカラムをナビゲーションにして、右側のカラムをコンテンツエリアとするパターンや、ポータルサイトのように情報量が多いWebサイトでは3段組カラムを使い、左側がナビゲーション、真ん中にメインコンテンツ、右側にバナーや関連へのリンク、という区分けもスタンダードな形式といえるでしょう。テーブルレイアウトでのコーディングによるカラム作成は、まず全体をテーブル<table>タグで囲み左右にセルを作ります。align="left">にします。align="right">にします。この手法は視覚的なコーディング方法で、作り手側からは簡単な作業となりますが、一方のユーザには不便なケースもあります。画面解像度によってはテーブルが画面内に収まりきれず、Webブラウザに横スクロールが発生することがあります。表示速度の面では、テーブルでカラムを作成すると全体を包括した親テーブルを読み込み終わるまで表示ができません。このテーブルレイアウトの表示時間が遅さの体感となっているのでしょう。CSSコーディングでのカラム作成CSSでコーディングする場合はXHTML側が文章構造化することが前提です。テーブルコーディングの場合は<table>タグの仕様から必ず左の内容を先に記述する必要がありましたが、CSSで制御すると左右関係なくXHTMLに記述することが可能です。構造化された文章ではメインコンテンツを先に記述して、ナビーゲーションを後に記述しても、CSS側から左右に振り分けることができます。この手法では左右を反対にすることもCSSファイルだけでできるのです。「Web準拠」の概念では、XHTML文書は構造化された文章の流れで記述することができます。CSSコーディングを使用することでレイアウトに依存しない文章の流れを作ることが可能になります。前回、アクセシビリティについて触れましたが、音声ブラウザを使用するユーザにとってはメインコンテンツの後に、ナビゲーションを読み上げた方が全体の流れとしてはスムーズになります。SEOの観点からもコンテンツ内容が先に記述されていた方が、検索エンジンロボットに判別されやすいと言われています。CSSコーディングでは「float(フロート)」というプロパティを使用する機会が多いです。このfloatはテーブルコーディングにはない考え方で、難しい面があります。今回はこの「float(フロート)」の概念を理解して、CSSのカラム作成をマスターしましょう。印刷会社、Web制作会社などのデザイナー/ディレクターを経て、2007年からフリーランスとして活動。デジタルハリウッド講師。http://www.morethanwords.jpこの記事の評価をお聞かせくださいボタンをクリックしますとウインドウが開きます。