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

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

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

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

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


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

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

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

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


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

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

段組レイアウトはCSSを利用して作るのが一般的です。一口にCSSで作ると言っても、その方法は多数あります。

floatプロパティを使って端から寄せる方法、table-cellプロパティを使って組む方法、フレキシブルボックス(flexbox)を使って並べる方法など様々です。また、CSS3の仕様そのものにも、columnsプロパティのような段組レイアウトを作るためのプロパティがあります(本記事の末尾で紹介)。


 
そこで今回は、CSSを使って段組レイアウトを作る方法の基礎と、最もシンプルな段組レイアウトをfloatプロパティで作る方法をご紹介いたします。


 

CSSで段組レイアウトを作る方法の概要

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を使ってブロックを横方向に並べることで段組レイアウトを作ります。


 

CSSで段組レイアウトを作る方法

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

  1. CSSのfloatプロパティで2段組レイアウトを作成する方法 (p.2)
  2. CSSのfloatプロパティで3段組レイアウトを作成する方法 (p.3)
  3. 段組(回り込み)を解除するためのclearプロパティの書き方とclearfix (p.4)
  4. (参考) 段組レイアウトをCSSやフレームワークで作る方法4選 (p.5)