その中で、いちばん僕が調べ続け、それがいまでも続いているのが3カラムレイアウトのテクニック。しかし、そろそろCSSの勉強にもひとくぎりつけなければならないので、自分の卒論のつもりで3カラムレイアウトについてのトピックをまとめてみました。
3カラムレイアウトは、Webのレイアウトとしては非常に一般的であり、多くのニーズがあるにもかかわらず、HTMLとCSSによるスマートな記述法が存在せず、さまざまなテクニックの積み重ねが必要です。例えば、ThreeColumnLayoutsには、約60種類もの3カラムレイアウトのサンプルがあります。
なぜこういう状況になっているのか、想像するに、現在のHTMLとCSSが、文字の色や大きさ、見出しや文書構造といった文章の要素を表現する仕組みはきめ細かに提供しているのに対し、2段組や3段組といったページレイアウトを表現する仕組みがそれほどきめ細かく提供されていないためだと思われます。
■もっともシンプルな3カラムレイアウトの実装
3カラムレイアウトの単純な実装方法は、A、B、Cの順にdivで記述されたカラムを、単純に左寄せ（float:left;)で表示していけばいいわけです。しかしこの方法では、HTMLの記述としてもA、B、Cの順に書かねばなりません。
3カラムレイアウトでは一般的に中央にあるBにメインコンテンツがくるために、SEO的な観点ではHTMLの中ではBを先に記述したくなります。しかしこの方法ではそれができず、Aを先に記述しなければなりません。
これを改良したのが、ラッパーを用いた実装です。AとBの外側に、ラッパーのdivを作ります。そしてラッパーの中でAを左寄せ、Bを右寄せにします。そして、ラッパーに対してCを右寄せにします。こうすれば、HTMLではB、A、Cの順に記述しても、表示はA、B、Cの順に並びます。
ところが、これにも欠点があります。AやCはメニューなどの表示で背景に色が付いていることが多いのですが、Bの本文が長くなってると、背景の色がとぎれてしまいます。これはA、B、Cどのブロックが長くなっても同じです。それぞれの背景は、それぞれのコンテンツがあるところで終了し、ほかのブロックが長くなると、余白が増えていくだけです。
デザインの観点で考えれば、どの列がいちばん長くても、それぞれのブロックの背景色はフッタまで続いていてほしい、と思うことが多いでしょう。
これ以外にも3カラムレイアウトでは、横幅をブラウザの幅や文字の大きさに合わせて可変するレイアウトを実現したい、といったさまざまな要求を満たすべく、数多くのテクニックが開発されてきました。以下はそのテクニックの代表例を2つ紹介します。
■聖杯発見さる
2006年1月、Webデザインのテクニックを紹介することで有名なサイト「A List Apart」に、Matthew Levine氏が「In Search of the Holy Grail」（聖杯をさがして）、というコラムを発表しました。
Matthew氏は、これまで3カラムレイアウトのためにさまざまなテクニックが開発してきたけれど、次の要件を全て満たすものはなかった、としたうえで、自身はこれまでのテクニックの上に独自の実装を積み上げて、ついに下記のすべてを満たすテクニックを実現したとしています。その5つの要件とは、
・中央カラムは可変幅で、両側に固定幅のカラムを設定できる。
・中央カラムの記述がHTML上では先にくる
・どのカラムの背が高くてもOK
・シンプルなdivタグしか使わない
・シンプルなCSSで実装している
というもの。この要件を満たす3カラムレイアウトの実現は、ほとんどのデザイナーが望んでいたはずです。そして、Matthew氏は最初にこの要件を満たすレイアウトを実現したと宣言したわけです。
彼は、ラッパーの両側に広げたpadding領域に対して、marginをマイナスに設定するというネガティブマージンというテクニックを用いてカラムの位置を設定しました。ネガティブマージンを使うと、ラッパーの内側のコンテンツを、表示上はラッパーのPaddingの位置にまで移動させることができます。このテクニックを駆使して3つのカラムの位置関係を設定し、上記の要件を満たすレイアウトを実現しています。
しかし、サンプルを見るとそこにはまだ満たされない要件があることが分かります。それは、各カラムの背景色がフッタまですべて届いているわけではなく、1番背の高いカラムだけが背景色がフッタに届いており、それより短いカラムの背景色はフッタに届いていません。
上記の3カラムの要件には「どのカラムの背が高くても、すべてのカラムの背景がフッタまで届く」という要件を加えなければならないでしょう。
■Borderを使う驚異的なテクニック
そして登場するのが、同じく「A List Apart」で2007年2月にAlan Pearce氏が投稿した「Multi-ColumnLayouts Climb Out of the Box」。これによって、可変幅で、かつどのカラムが長くてもすべてのカラムの背景色がフッタに届くレイアウトが実現されました。
ここで使われているテクニックは驚異的です。どのカラムが長くてもすべてのカラムの背景色がフッタに届くレイアウトを実現するために、なんと両カラムの背景色をラッパーのborder-leftとborder-rightを使って設定しています。Alan氏は、ネガティブマージンを駆使してたくみに両側のカラムを、ラッパーの外側に表示されている色つきのborder-leftとborder-rightに重ねて配置しました。
こうすると、HTML上では、論理的にすべてがカラムはラッパーの内側に記述されているため、どのカラムが長くなってもラッパーが伸びて、そのラッパーに設定されたborder-leftとborder-rightの色が、フッタまで背景色として届くわけです。
■究極のレイアウト登場
同様に、可変幅でフッタまで背景色が届くマルチカラムレイアウトとして、 Matthew James Taylor氏が自身のサイトで「Ultimate multi-column liquid layouts (em and pixel
widths)」を2008年1月に発表しています。このレイアウトは、クロスブラウザで、CSSハックも使わず、SEOフレンドリで、iPodやiPhoneにも対応というのが売り文句ですが、こちらはかなり複雑なHTMLとCSSで実装されています。
仕組みとしては、Alan氏のテクニックと似ていますが、Matthew氏はborderの代わりにラッパーを3重にしたうえで、各ラッパーの位置をずらして背景色を設定。その内側にある各カラムのコンテンツを、ネガティブマージンを駆使してその上に重なるように記述するようにしています。
ちなみに、このレイアウトはhiguchi.comでも採用していますね。
■過去を引きずり、バグにからまれる聖杯
では、これらのテクニックで3カラムレイアウトはとどめを刺すのか、というと、残念ながらそうではなさそうです。
Matthew氏の究極のレイアウトは、ソースコードを見ると先頭にXML宣言がついています。つまりこれはIE6では互換モード（過去のIEとの互換性を優先するモード）で表示されているのです。IE6の標準モード（標準仕様を優先するモード）で表示させようと先頭のXML宣言をとると、レイアウトが崩れてしまいます。
Firefox3やIE7では、先頭のXML宣言があってもなくても正常に表示できるのですが、IE6では互換モードでしか正常に表示されません。
今後ずっと拡張や更新を続けていくWebサイトにこのテクニックを使うとすると、IE6の互換モードとお付き合いをしつづけなければならないわけです。しかし、できればそれは避けたい。標準仕様に準拠する標準モードに対応するレイアウトの方が望ましいわけですが、残念ながら対応していないようです（おそらく、うまく書き換えれば標準モードにも対応できるようになるはずとは思いますが）。
ということで、理想にはいま一つ足りません。
では、Alan Pearce氏のテクニックはどうかというと、これも実は落とし穴がありました。Matthew氏のテクニックにも共通するのですが、どちらもカラムの配置にネガティブマージンを使う際に、position:relativeを設定しています。
このposition:relativeはどうやらIEにとって鬼門の1つらしく、これをトリガーとしたいくつかのバグがあるようです。僕が遭遇したのは、position:relativeを設定してあるdiv内では、CSSでliに対するbackgroundで指定した画像が正常に表示されない（ところどころ欠ける）、というバグ。それ以外にも、position:relativeをトリガーとして発生するバグがいくつかあるようです。
しかし（僕が調べた範囲では）IE6に対応するかぎり、上記の2つのテクニックからposition:relativeをなくすことは不可能です。少なくとも、position:relativeを使わずに3カラムレイアウトのさまざまな条件を満たすレイアウトを見つけることはできませんでした。
例えば、上記のバグには、バグが発生する要素にwidthかheightを設定することで回避できるので、position:relativeをトリガーとするバグには、何らかの回避策で対応するしかなさそうです。
■新たな聖杯は見つかるか？
もちろん、ここで紹介した以外にもさまざまなテクニックで3カラムレイアウトを実現している例がありますが、長くなるので省略します。
さて、こうしたテクニックに刺激を受けて、基本的にはAlan Pearce氏の手法をなぞりつつ、もう少し内容をシンプルにしたCSS+HTMLを書いてみました。
このソースでも、どのカラムが長くなっても、すべてのカラムの背景色がフッタまで届いていますし、中央カラムの内容がHTMLでは先に記述するようになっていて、しかもCSSもHTMLの内容もシンプルになっています。そしてIE6に対応するかぎり、position:relativeをなくすことはできませんでした。
検証はIE6、IE7、Firefox3のみ。fixレイアウトのみです。
いまのところこれが、僕のたどり着いた聖杯です。しかしこの聖杯が本物なのか、偽物なんか、呪われたものなのかは、もう少しこれを土台にいろいろなWebサイトを作り込んでいったり、このエントリで過去の偉人達にツッコミを入れたように、誰かに突っ込んでもらってはじめて分かってくるのでしょう。
■意地をはるのはやめたほうがいいのか
しかしここまでの議論は、HTMLとCSSだけを用いて、カラムの背景色に画像をまったく使わない、という暗黙のルールのうえでCSSの達人達が競ってきたテクニックを見てきたのです。ルールを無視し、各カラムの背景色に背景画像を用いれば、複雑なテクニックを使わずとも、シンプルな方法でフッタまで届く背景色を簡単に実装できそうです（試してはいませんが）。
背景色に画像を使わない、という意地を張らずに、もう少し柔軟な方法で考えた方がいいのかもしれません。
Junichi Niino
Comments