前回、DTP的な段組スタイルを実現するCSS 3 Multi-column moduleを紹介しましたが、今月はさらに一歩進めて、DTP的なグリッドシステムの概念を持ち込むCSS 3 Grid Positioning moduleを紹介します。率直にいって、将来、ウェブページ制作のフローに、きわめて大きな影響をあたえるかもしれない規格といっても過言ではないはずです。

• CSS Grid Positioning Module Level 3（W3C）
• CSS 3 Generated Content for Paged Media（W3C）
• CSS3 module: Multi-column layout（W3C）
• CSS3 モジュール： マルチカラムレイアウト仕様書邦訳（訳: Jintrickさん）

グリッドシステムの概念をCSSに

組版印刷の世界では、グリッドシステムと呼ばれる、紙面領域を仮想の格子（グリッド）状に分割して、文字や図版を格子で仕切られた区画に割りつけていくデザイン手法が、長い間 利用されてきました。その基本的なノウハウはウェブデザインの世界でも活かされ、論理的で一貫性のあるページデザイン（設計）に役立てられています。（下掲リソース参照。一例）

CSS 3 Grid Positioning moduleは、このグリッドシステムの概念をCSSに持ち込む規格です。

• 65 Resources for Grid-Based Design（Vandelay Website Design）
• Designing With Grid-Based Approach（Smashing Magazine）

こぼれネタ: グリッドシステムの原典

Grid Systems in Graphic Design: A Visual Communication Manual（Amazon）
Josef Muller-Brockmann

グリッドシステム考案者のJosef Muller-Brockmannによる原典ともいうべき文献です。初版はHastings House Publishers刊行の1981年版。

サンプル

早速、簡単なサンプルで確認してみましょう。

body {
columns: 3;
column-gap: 0.5in;
}

img {
float: page top right;
width: 3gr;
}

上のCSSスタイルのうち、body要素に対するものは、先月紹介したCSS 3 Multi-column moduleのスタイルです。おさらいも兼ねて説明を加えると、body内の内容を3段組（column: 3;）にし、段間隔を0.5インチとる（column-gap: 0.5in;）という指定ですね。

この3段組のテキスト領域に対して、Grid Positioningを使って、このページ領域の右上に2段抜きで図版を挿入しようというのが、次のimg要素のスタイルです。

では、次ページでグリッドシステムを使ってみましょう。