ウェブページ上で段組(マルチカラム)を作る方法

段組(マルチカラム)レイアウトのウェブページ

段組(マルチカラム)レイアウトのウェブページ

凝ったウェブページのデザインには、何らかの「段組(マルチカラム)」構造が欠かせません。端に「サイドバー」を配置して、残りにメインコンテンツを掲載するようなシンプルな段組構造から、新聞紙面のように異なるサイズのボックスが多段に入り交じった複雑な段組構造まで、様々なレイアウトが使われています。

このような「段組」を作るには、多数の方法があります。


 
昔々は、table要素を駆使して段組を作成
昔はtable要素を駆使していた

昔はtable要素を駆使していた

2000年代初頭あたりまでは、「表組み」を作るためのtable要素を駆使して段組を作る方法が一般的でした。スタイルシートをうまく表示できるブラウザが少なかったので、他に実用的な方法がなかったのです。しかし、table要素は「表」を作るための要素ですから、段組などのレイアウトを作成する目的で活用するのは好ましくありません。


 
今は、スタイルシートを使って段組を作成
段組構造はCSS(スタイルシート)で作る

段組構造はCSS(スタイルシート)で作る

今では、段組構造はスタイルシートを利用して作るのが一般的です。ウェブページは「中身」と「デザイン」を分離し、デザインはスタイルシートだけで記述する方が、ソースが分かりやすくなる上、メンテナンスも楽になります。

※CSS3では、段組構造を作るためのcolumnsプロパティなどが新たに追加されています(最後のページで少し紹介)。


 
今回は、スタイルシートを使って段組レイアウトを作る方法の基礎を解説致します。


 

CSS(スタイルシート)で段組を作る方法の概要

スタイルシートを使って段組構造(マルチカラム)を作る際には、複数のブロックの配置や大きさを調節して「段組のように見せる」方法を使います。具体的なソースを解説する前に、まずは、スタイルシートを使って段組を作る大まかなイメージをご紹介致します。

シンプルなHTML
次のHTMLソースを見て下さい。
<div class="blocka">
   コンテンツA
</div>
<div class="blockb">
   コンテンツB
</div>
div要素が2つ並んでいるだけのシンプルなHTMLです。

そのまま表示させると……
上記のHTMLソースを、スタイルシートなしで表示させると、だいたい次のような感じで表示されます。

(コンテンツAとBが縦に並んでいるイメージ)

HTMLソースに記述した通り、A→Bの順序で縦に表示されるだけです。

横方向に並べられれば「段組」になる
この2つのブロック「コンテンツA」・「コンテンツB」を、下図のように横方向に並べることができれば、「段組」(2段組)になります。

(スタイルシートでAとBを横に並べ「段組」を作るイメージ)

これが、スタイルシートで作る「段組」の大まかなイメージです。HTMLソース側には特別な工夫はせず、スタイルシートを使ってブロックレベル要素を横方向に並べることで段組構造を実現します。


 

CSS(スタイルシート)で段組を作る方法

それでは、スタイルシートを使って段組構造を作る方法を順に見ていきましょう。次のページから、先ほどの図のように「複数のブロックを、段組に見えるよう配置」するためのプロパティについて、その書き方を詳しく解説致します。シンプルな段組構造であれば、HTMLソースもCSSソースもとても簡単に記述できます。

【本記事の目次】
1. floatプロパティで2段組を構成する方法 (p.2)
2. 3段組でも4段組でも作成できる (p.3)
3. 段組を解除するためのclearプロパティ (p.4)
4. CSS3での段組専用プロパティや、複雑な段組も簡単に作れるフレームワーク (p.5)

まずは、1から順にご覧下さい。なお、記事の最後には、CSS3で新たに追加された「段組を作る専用のプロパティ」についてや、複雑な段組を簡単に作成できるフレームワークなども紹介しています。そちらもぜひ、併せてご参照下さい。