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

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

複数のカラム(段)を組み合わせた、複雑な段組レイアウトの例

文章や画像など複数のコンテンツを横方向に並べるには、何らかの段組(マルチカラム)レイアウトを作る必要があります。

左右の端にサイドバーを配置して、残りの空間にメインコンテンツを掲載するようなシンプルな段組レイアウトもあれば、新聞紙面のように異なるサイズのボックスが多段に入り交じった複雑な段組レイアウトまで、様々なレイアウトがあります。

 
CSS普及前まではtable要素を駆使して段組を作るテーブルレイアウトが使われていた
昔はtable要素を駆使していた

昔はtable要素を駆使して段組レイアウトを作っていた


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

この方法は今でも使おうと思えば使えます。しかし、table要素は表を作るための要素ですから、段組などのレイアウトを作成する目的で活用するのは好ましくありません。

 
CSSを活用して段組レイアウトを作る簡単な方法が今ではたくさんある
段組レイアウトはCSS(スタイルシート)で作る

段組レイアウトはCSSで作る


今では、段組レイアウトはCSSを活用して作るのが一般的です。その方法は1つではなく、たくさんあります。

例えば、CSSのfloatプロパティを使ってブロックを横並びにすることで段組に見せるシンプルな方法、CSS版テーブルレイアウトとも言えるtable-cellを使って段組に見せる方法、各段の表示順序までも自在に調整できるflexを使って段組を作る方法、長い文章を自動で段組化できるcolumnsプロパティを使う方法など様々です。

 
本記事では、CSSを使って段組レイアウトを作る際の基本中の基本として、シンプルな段組レイアウトをfloatプロパティで作る方法をご紹介いたします。また、それ以外の方法についても、本記事の最後にまとめて紹介します。


 

HTML+CSSで段組レイアウトを作る方法の基本

HTMLにCSSを適用して段組レイアウトを作るには、HTMLで用意した複数のブロックの配置をCSSで調節することで、段が組まれているように見せる方法を使います。具体的なソースを解説する前に、大まかなイメージを紹介しておきます。

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

そのまま表示させると、ブロックが縦方向に並ぶだけ
上記のHTMLソースを装飾せずに表示させると、次のような感じに見えます。

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

HTMLソースに記述した「コンテンツA」→「コンテンツB」の順序で縦方向に並ぶだけです。

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

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

これが、CSSで作る段組の大まかなイメージです。HTMLソース側には特別な工夫はせず、CSSを使ってブロックを横方向に並べることで段組レイアウトを作ります。

 

HTML+CSSで段組レイアウトを作る具体的な書き方

それでは次のページから、CSSを使って段組レイアウトを作る方法を順に見ていきましょう。複数のブロックを段組に見えるよう配置するための書き方を詳しく解説いたします。シンプルな段組レイアウトなら、HTMLソースもCSSソースもとても簡単な記述で済みます。
 
  1. CSSのfloatで2段組を作る方法 (p.2)
  2. CSSのfloatで3段組を作る方法 (p.3)
  3. CSSのclearで段組を解除する書き方とclearfix (p.4)
  4. 複雑な段組も楽に作れるその他の方法4選 (p.5)