PR

1. 3段組みは2段組みの応用!

 前回、左右2段組みのレイアウトに挑戦しましたが、そのテクニックを応用して、3段組みのレイアウトを作ってみましょう。

 以下のサンプルを例に学んでいきます。

[画像のクリックで拡大表示]

 さて、このページは、「Contents」という小見出しがついた左の段、「1年ドキュメント」として猫たちの写真や文章を含む中央の段、そして、「猫ってどんな動物?」や「猫の育て方」などの小さな白地のボックスが並んでいる右の段の、合計3段の構造になっています。

 しかし、今回ご紹介する方法においては、これを見たまま通りの3段ではなく、「2段ずつの入り子構造」であると考えます。

 つまり、「左の段+(中央の段+右の段)」ととらえます。下の図を見てください。

[画像のクリックで拡大表示]

 中央の段と右の段をひとまとまりにし、左の段と、このグループとの2段組みとします。これらをそれぞれ、左寄せ、右寄せにします。

 そして、グループの内部で、中央の段と右の段をそれぞれ左寄せ、右寄せにするというやり方です。

 言い換えれば、3段というのは、2段組みを多層化したものです。このことが分かれば、どんな込み入ったレイアウトも、グリッドデザイン(水平・垂直に区切ってレイアウトする、最も一般的なデザイン手法)である限りは、2段組みのテクニックだけで実現することができます。