デザインテンプレート1212は、「意図的にfloatを壊すレイアウト」だ。表示領域の横のピクセル数が960、760、600、470、230のそれぞれでそれなりに見えるよう、本文を550ピクセル + max-width:100%、サブメニューAを200ピクセル、サブメニューBを200ピクセルとし、960のときには3段組、760のときには2段組、600から400のときには本文の下にメニューがふたつならび、それ以下では段組なしになるようにしている。想定する最小の横幅は200ピクセルだ。IE6は3段組のまま、ウインドウサイズを縮めたら横スクロールが出るレイアウトを採用した。
技術的には、約3年前のADP: デザインテンプレート1124と同じである。何が違うか、といえば、これをやる意味がようやく出てきたことだ。
状況の変化のひとつは、2008年1月からYahoo!Japanトップページが950ピクセルのレイアウトにしてくることである。ウインドウを広くできるユーザーは、通常のウインドウサイズを950ピクセル以上にするだろうが、一部の利用者は横幅950ピクセルのレイアウトのサイトでは横スクロールをしなければいけなくなる。今のよくある横幅760ピクセル固定のレイアウトでは、広いウインドウではスカスカになるし、かといって画像を多用するサイトでは単純なリキッドレイアウトは使いにくい。
さらに、ケータイの進化が混乱に拍車をかけている。横幅480ピクセルの端末がうようよ出てきて、フルブラウザはscreenメディアのCSSをあたりまえのように読んできている。フルブラウザのPCモードでは相変わらず仮想スクリーンを使う場合が多いため（PC用のサイトと同じになることを目指しているわけだから）制作者が追加的に対応することは特にないが、ケータイモード（デバイスの横幅に合わせるモード）は有無を言わせずfloatを壊しにかかってくる。また、NetFrontがfloatをまともに解釈するようになったことも大きい。これで、狙ってやることが現実的な意味を持つようになった。
狙ってfloatを壊さなくても、勝手に壊されたときどうなるか、を考えることが徐々に重要になってくる。デザインテンプレート1212は、横幅が足りなくて勝手に壊されるのと、width/max-widthの制限にひっかかって意図的に壊れるのが同じ表示になるようにしている。
以下、これを書き換える際の注意点を書く。
とにかく縦の線を合わせるよう、本文、サブメニューの左マージンをピクセル指定で同じ値にすることが基本だ。本文、サブメニューはfloat:leftのみを使う。IE6のfloatは横のマージンに対して地雷があるので、divでfloatを指定し中の要素でmarginなりpaddingを設けるとよい。
メインメニューを横に並べている場合は、そこもfloatにして壊れるようにする。（デザインテンプレートとしてなるべく共通化している）今のHTMLだとメインメニュー部の背景指定が非常にしづらいので、いまは背景を真っ白にしている。実際に使う場合は、HTML自体に手を入れる必要があるだろう（※このケースでいわゆる"clearfix"が使えるのかどうかはよく知らない。）
#containerにwidth:100%を指定すれば、IE6も550ピクセルまで縮めることができる。また、別の画像を用意すれば、ウインドウサイズの横幅が960ピクセル以上になったときセンタリングさせることも可能だ。
今回は最小の横幅は200ピクセルであることを示すため、わざとlink要素でmedia="screen,handheld"として、そのかわり画像のファイルサイズを少なくしている。だがこれはネタの要素が大きく、帯に短し襷に長しなので、実際にはscreenメディア専用にしてちゃんと画像を使ったほうがいいだろう。
今後これがテクニックとして使えるものになるかどうかは、メディアクエリの実装が今後どう進むのか、NetFrontのケータイモードがちゃんとhandheldメディア用のCSSを読むようになるのか、などに依存する。とにかく、これを使わないにしても、「時流に乗って次のリニューアルでは横幅950ピクセルで」と考える際には、フルブラウザのケータイモードのことも考慮してみてはどうだろうか？
トラックバックURL: http://adp.daa.jp/cgi/mt2/mt-tb.cgi/699
最初はcontainerにwidth:100%を指定したやつを1212で採用して当エントリで「横幅固定も可能」と説明していましたが、より普通っぽく見える横幅固定のほうを1212で使って、説明のほうを「width:100%も可能」に変更しました。
こんにちは。以前、こちらのレイアウトを参考にさせていただいて、ブログのレイアウトを考えた者です。
さらに可変自在な形になっていて、びっくりしました。
このレイアウトにも挑戦してみたいなぁと、ただ今心の中だけでですが準備中です。
沢野さん、参考にしてくださってありがとうございます。
max-width、まだいろいろ面白いことができると思います。どんどん使っちゃってください。