CSS3ではグリッドレイアウト(段組)が可能になるのか？
今、CSSで実現して欲しい機能を1つ挙げるとしたらグリッドレイアウト。Webサイトの画面デザインは、PC環境によって大きく変わってきた。特に、ページの横幅をいくつにするかは昔からよく議論されていて、一昔前は800pxだったが、最近では1024px幅を基準に考えることが多い。
某お遊び系サイトの閲覧者が使用する画面サイズの統計(2007年9月分)
このように画面サイズは徐々に広がりつつあるが、フォントの大きさはそれほど変わってはいない。最近はユーザビリティを考えて少し大きめのサイズを基準に設定しているが、それ以上に画面サイズが広がってきたため、1行の文字数が多くなりすぎてしまった。1行の文字数が多くなると、文章を読むための視線移動が増え、かえってコンテンツを読みづらくさせている・・・
そのため、最近のブログテンプレートでは3カラムが人気のようだが、結果としてメニューやバナーの数が増えただけで、コンテンツ自体は一昔前の画面サイズで表示していたものと変わらない状況に逆戻りしている。
W3CでCSS Grid Positioning Module Level3 のWorking Draft (2007年9月5日版) が公開されたが、これが実装されればこの悩みも解消されそうだ。DTPの世界では当たり前だが、ページを段に区切ってそこにテキストを流し込むグリッドレイアウトをCSS3で実現させるためのWorking Draft。
規約にはサンプルコードとその表示例の画像が掲載されている。非常にシンプルな考え方でグリッドレイアウトを実現しようとしていて、個人的にはぜひ実装して欲しい。雑誌でよくあるような段をまたぐ画像の配置も考えられているので、 画面デザインの自由度もさらにアップしそうだ。
Working Draftで掲載されている表示例の一つ
ただし、各要素のポジショニングについては新たな概念が必要になってくる。規約を見るとgrという単位が新たに使われているが、このgrとpxやem、ptがそれぞれどのような関係になってくるのかを理解する必要があるだろうし、しっかりと定義しておかないと新たなバグ(Hackもか!)の発生につながりそうだ・・・
もう一つ個人的なことで思いつくのは、これまCSSは手書きでコーディングしてきたが、ここまでくるとさすがにエディタを使ったほうが効率がよさそう。それもDreamweaverなどではなく、InDesignやQuarkXPressのようなDTPソフトでレイアウトするほうが、効率的に思えてしまう。
