【ホームページ作成】CSS段組1：スタイルシートだけで段組を作る方法

table要素で段組（マルチカラム）を作る時代は終わり

従来、「段組（マルチカラム）を作る」方法といえば、table要素を駆使して作るテクニックが主でした。 しかし最近では、スタイルシートに対応したブラウザが増えてきたため、スタイルシートで段組を作っても問題なくなってきました。
※従来はスタイルシートを解釈できないブラウザが多かったため、tableを使って段組を作る方が無難でした。

そもそもHTMLの「table要素」は「表」を構成するための要素ですから、段組デザインに活用するのは（tableの本来の用途からすると）好ましくありません。
「ウェブページの中身」と「ウェブページのデザイン」は分離し、デザイン（レイアウト）はすべてスタイルシートで記述する方が、ソースが分かりやすくなり、メンテナンスも楽になります。

というわけで今回は、スタイルシートを使って段組（マルチカラム）を作る方法をご紹介致します。

スタイルシートでの段組の作り方

スタイルシートには、直接「段組を作る」ために用意された仕組みはありません。 しかし、あるプロパティを使うことで、簡単に段組を実現できます。

具体的なソースをご紹介する前に、まずは、スタイルシートを使って作る段組のイメージをご紹介致します。

次のHTMLソースを見て下さい。

<div class="blocka">
   コンテンツA
</div>
<div class="blockb">
   コンテンツB
</div>

これを普通に（特別なスタイルシートなしで）表示させると、次のような感じになりますね。
※範囲を分かりやすくするため枠線を加えています。

ただ、A → B の順に縦に表示されるだけです。

これをスタイルシートを使って、次のように横に並べることができれば、「段組」（2段組）になりますね。

これが、スタイルシートでの「段組」の作り方のイメージです。
HTML側では特殊な工夫は何もせず、スタイルシートだけを使ってブロック要素を横に並べます。

段組を作るためのプロパティは？

スタイルシートの floatプロパティを使うと、この A・B 2つのブロックを横に並べることができます。 つまり、段組が作れるわけです。

段組の具体的な記述方法は、次のページで！ →