Webデザイン 1-10
沢山の情報を見やすくする3カラムレイアウト

ブログなどで多用されているパターンで、コンテンツ・情報量が多い場合に利用したいレイアウト。マルチカラム構築のまとめとしていくつかの方法を紹介する。

制作・文／栗林宏之 B's StuDio
Browser IE 8over Firefox 4over　Safari 5over　Chrome 9over

01

まずは、floatプロパティを使った3カラムレイアウトに必要なタグをマークアップする。

ヘッダー［header］＋フッター［footer］＋コンテンツ［content］（左カラム［leftColumn］・右カラム［rightColumn］・メインコンテンツ［main］にそれぞれidを割り振る【1-1】。HTMLソースは［wrapper］［content］を追加して【1-2】のようにした。

【1-1】ヘッダー・フッターを含め、大きく5つにわかれる。

【1-2】全体の幅を指定するのに［wrapper］、コンテンツ部をまとめるのに［content］も追加。

02

HTMLでidを振り分けたら、それぞれにスタイルを指定する【2-1】【2-2】。

［wrapper］は全てのコンテンツをまとめるボックス。ここでは幅を800ピクセルで固定する。［header］は高さ100ピクセル、背景色を#66CC66で指定。

［content］はヘッダー・フッターとコンテンツの間にそれぞれ20ピクセルの空きをつくるため、padding: 20px 0; と指定。このままだと回り込みを使っているのでフッターとの余白が取れないが、overflow: hidden; を指定することでこれを回避できる。

［leftColumn］の部分をマルチカラムにするにはfloatプロパティを指定すればよい。左寄せなので float: left; で、幅のサイズを150ピクセルとし、背景色に#99CCFFを指定した。

［rightColumn］の右カラムは右寄せとなるのでfloat: right; 、幅のサイズは150ピクセル、背景色に#FF99CCと指定した。［main］では全体の幅800ピクセルから左右のカラム150×2=300ピクセルを除く幅500ピクセルがメインコンテンツに使える幅となる。直接幅を指定してもよいが、ここでは左右それぞれのカラム幅150ピクセルを、メインカラムに対して左右それぞれにマージンとして指定する方法でセンターに納める方法をとってみた。

【2-1】各コンテンツの関係はこのような感じ。

【2-2】Phone4では左のpng画像は引き伸ばされている。

【2-2】main ブロックはマージンを利用して位置を決めることになる。
デザインにもよるが、左右カラムとの空きが必要な場合は、マージン幅を調整すればよい。今回は左右のマージンをそれぞれ170ピクセルとして、背景色を#CCCCCCとした。

03

次は positionプロパティを利用するレイアウト方法を紹介する。なお、HTMLのソースは【1-2】を利用する。

position プロパティを指定する場合、位置の基準となる場所の指定を行う必要がある。absolute （絶対位置）を指定するのは［leftColumn］［rightColumn］の2つ。今回は［content］に対して位置指定を行うのでこれに position: relative; と記述し、［content］を基準として位置指定を行うことになる。これを指定しない場合はブラウザ画面基準として位置が決まることになる【3-1】。

［leftColumn］は［content］を基準としてposition: absolute; 、上から20ピクセル、左から0ピクセル、［rightColumn］は上から20ピクセル、右から0ピクセルと指定【3-2】。

気をつけなければならないのが、絶対位置指定したものは通常レイアウトコンテンツから完全に無視されること。［leftColumn］［rightColumn］の高さが［main］より長い場合はフッター部分と重なってしまうことになる。場合によっては高さ固定のレイアウトにする必要が出てくるので、コンテンツ内容が頻繁に変わるサイトでは考えて使用する必要がある【3-3】。

【3-1】position: relative; を指定することによって絶対値の基準になる。

【3-2】［main］は position 指定しないので、上下余白は生かしておく。また、絶対位置指定したものは他のコンテンツから完全に独立するので、［main］は左右のカラムが無いものとして通常のスタイルを指定する。

【3-3】content を基準にしてカラムの指定をする。

04

新たに注目されているのが「inlineblock」でレイアウトする方法だ。インラインとしてあつかえるブロック要素なので、幅・高さを指定して並べられる。そのため非常に簡単な作業でマルチカラムを構築できる【4-1】【4-2】。ただ、モダンブラウザは対応しているが、オールドブラウザ、IEなどは完全に対応していないので気をつける必要がある。それでも今後、主流になってくレイアウトの仕方だと思われるので積極的に使っていきたい【4-3】【4-4】。

【4-1】display: inline-block をしてするだけの簡単設置。

【4-2】3カラムのレイアウトが完成。

【4-3】IE6,7、Firefox2以前のブラウザではinlineblockは対応していない。

【4-4】inline-block を指定した各カラムにハックを使うとIE6,7でもきちんと表示される。

[目次に戻る]

【本記事について】
2012年1月28日発売のweb creators特別号「Webサイト制作最新トレンドの傾向と対策」から、毎週記事をピックアップしてご紹介! HTML5・CSS3によるコーディングから、次々と生まれてくる新しいソーシャルサービス、Webアプリケーション、スマートフォンやタブレット端末への対応など、いまWeb制作で話題になっているトピックを網羅した内容になっています。

※本記事はweb creators特別号『Webサイト制作最新トレンドの傾向と対策』からの転載です。この記事は誌面でも読むことができます。