マルチカラムレイアウトで自由度の高い段組みを構成する

CSS3の仕様であるマルチカラムレイアウトを使えば、新聞記事のような多段構成の段組みを簡単に実装することができます。各段の高さは自動で揃えられ、段数や段の幅は自由自在に設定可能です。レスポンシブWebデザインなどで特に効果を発揮する手法です。

マルチカラムレイアウトの特徴としては、段の並びが横に展開していくことです。
段数と段の幅から計算された高さに到達したら、次に横の段にコンテンツはレイアウトされていきます。

マルチカラムレイアウトの展開図

【コンテンツ】

  1. 仕様策定の動向とブラウザの対応状況
  2. プロパティ一覧
  3. 段数を指定したレイアウト
  4. 段の幅を指定したレイアウト
  5. 段数と段の幅を両方指定したレイアウト
  6. 段の間の余白を指定する
  7. 段の間に区切り線を引く
  8. 段の区切り方法を指定する

仕様策定の動向とブラウザの対応状況

マルチカラムレイアウトの正式名称は、「CSS Multi-column Layout Module」です。
記事執筆時点での最新仕様は、2011年4月12日付けの勧告候補(Candidate Recommendation)となります。
http://www.w3.org/TR/2011/CR-css3-multicol-20110412/

主要なブラウザの最新バージョンでは一部のプロパティを除きほぼ対応しています。
IEについては、IE9以下は非対応ですが、IE10以降はフル対応です。
Chrome、Safari(iOS含む)、Opera、Androidブラウザでは、
ベンダープレフィックス「-webkit-」が必要です。
Firefoxでは、ベンダープレフィックス「-moz-」が必要です。

以下はブラウザの対応状況をまとめた表です。

CSS Multi-column Layout Module ブラウザの対応状況表

プロパティ一覧

2011年4月12日付けの勧告候補(Candidate Recommendation)に書かれているプロパティ一覧を示します。

プロパティ名 初期値 説明
column-width 数値 | auto auto 段の幅を指定します。ここで指定した幅を最低値とする段が描画領域内に並びます。数値単位はpx, emなどが使用できます。
column-count 整数 | auto auto 段数を指定します。column-widthといずれも'auto'でなかったら、ここの値は最大段数を示します。
columns [column-width]
[column-count]
各プロパティの初期値 column-width と column-countをまとめて指定するショートハンドです。省略時はそれぞれの初期値が設定されます。
column-gap 数値 | normal normal 段と段の間の余白量を指定します。数値単位はpx, emなどが使用できます。 'normal'の値はユーザーエージェントによって決められます。
column-rule-color カラー colorプロパティと同じ 段と段の間に引く罫線の色を指定します。値の指定方法はcolorプロパティに準じます。
column-rule-style 線のスタイル none 段と段の間に引く罫線のスタイルを指定します。値の指定方法はborder-styleプロパティに準じます。
column-rule-width 線の太さ medium 段と段の間に引く罫線の太さを指定します。値の指定方法はborder-widthプロパティに準じます。
column-rule [column-rule-width]
[column-rule-style]
[column-rule-color]
各プロパティの初期値 罫線に関する3つのプロパティをまとめたショートハンドです。省略時はそれぞれの初期値が設定されます。
break-before auto | always | avoid | left | right | page | column | avoid-page | avoid-column auto このプロパティを指定した要素の直前でのページ区切り/段区切りを指定します。
break-after auto | always | avoid | left | right | page | column | avoid-page | avoid-column auto このプロパティを指定した要素の直後でのページ区切り/段区切りを指定します。
break-inside auto | avoid | avoid-page | avoid-column auto このプロパティを指定した要素内部でのページ区切り/段区切りを指定します。
column-span none | all none 要素がカラムを横切って表示するかどうかを指定します。'all'を指定するとすべてのカラムを横切って表示します。
column-fill auto | balance balance カラムの埋め方を指定します。 'balance'を指定するとカラムの高さが最小になるようにコンテンツを埋めていきます。'auto'を指定すると最初のカラムから順番にコンテンツを埋めていきます。

段数を指定したレイアウト

段数を指定するには、column-countプロパティをコンテンツを含む親要素に指定します。

例えば、HTMLが以下のようになっていたとします。

これを3段のカラムにするには、div要素に付加しているクラス "multi-column" を以下のように設定します。
background-colorプロパティはお好みで付けてください。

現在はベンダープレフィックスを付けないとほとんどのブラウザは動作しませんので、
「-webkit-」付きのプロパティも併記しています。Firefoxも対応させるなら「-moz-」付きのプロパティも併記してください。

表示は以下になります。

段数を指定したレイアウト portlaitモード

スマートフォンをlandscapeモードにしても適切に3段のレイアウトになります。

段数を指定したレイアウト landscapeモード

段の幅を指定したレイアウト

段の幅を指定するには、column-widthプロパティを使います。

CSSを以下のようにしてみます。

スマートフォンで表示すると、以下のように2段のレイアウトになりました。

段の幅を指定したレイアウト portlaitモード

スマートフォンをlandscapeモードにすると、段数が変わり4段のレイアウトになります。

段の幅を指定したレイアウト landscapeモード

なお、ここで指定した'10em'という段の幅は、幅の最低値です。
マルチカラムレイアウトでは描画領域の幅一杯まで段組みが表示されますから、最低10emの幅の段が入る分の段数が描画領域に並びます。

段数と段の幅を両方指定したレイアウト

段数と段の幅は両方同時に指定することもできます。
column-countプロパティとcolumn-widthプロパティでそれぞれ指定することもできますが、ショートハンドで2つを一緒に指定できるcolumnsプロパティを使ってみます。

例えば以下のようにしてみます。

スマートフォンで表示すると、以下のように3段のレイアウトになりました。
段数を'5'にしているのに3段にしかならないのは、「最大5段」という意味になるからです。
段数を単独で指定した場合と、段の幅と両方指定した場合とでは意味合いが違ってきますので注意します。

一方、段の幅の意味は変わらず、幅の最低値です。
つまりこの例では、「最大5段でかつ最低幅が6em」を保つようにレイアウトされます。

段数と段の幅を両方指定したレイアウト portlaitモード

スマートフォンをlandscapeモードにすると、段数が最大の5段となります。

段数と段の幅を両方指定したレイアウト landscapeモード

段の間の余白を指定する

デフォルトでは、段と段の間の余白をどれくらいとるかはユーザーエージェントにまかされています。だいたい1emが多いようです。

それをcolumn-gapプロパティで指定することができます。

例えば以下のように'40px'に指定してみます。

以下のように余白が広がりました。

段の間の余白を指定した画面

段の間に区切り線を引く

段と段の間に区切り線を引くことができます。

区切り線用のプロパティとしては、以下の3つが用意されています。
[column-rule-width]:線の太さを指定する
[column-rule-style]:線のスタイルを指定する
[column-rule-color]:線の色を指定する

また、ショートハンドとしてcolumn-ruleプロパティを使えば、3つ一緒に指定することができます。

ここではショートハンドを使って、以下のように指定してみます。

表示は以下のようになります。

段の間に区切り線を引いた画面

段の区切り方法を指定する

デフォルトでは、段の区切り位置はパラグラフの途中であろうとなかろうと、自動で決められます。それをプロパティを使うと、「区切って欲しい位置」「区切って欲しくない位置」を指定できます。

プロパティとしては、break-before/break-after/break-insideの3種類が用意されています。
このプロパティは、CSS2.1の[page-break-*]プロパティにマルチカラム用の値をいくつか追加したものです。
それぞれのプロパティの意味と指定できる値は、「プロパティ一覧」を参照してください。

なお、breakプロパティは最新のブラウザではIEのみが対応しています。

例として、2番目のパラグラフの後で段を区切るようにしたコードです。

表示は以下になります。

段の区切り方法を指定した画面

以上、CSS3のマルチカラムレイアウトを使って段組みを構成する方法を解説しました。これを従来の方法だけで実現するとなると、かなりの力技となりますので、ブラウザ実装の動向に注意しながら活用していきたいものです。

スポンサーリンク

特集記事

  • WordPress Image

    WordPress の基礎から応用まで
    Webサイト制作ツールとして圧倒的な人気を誇るWordPress。利用するにあたって必要な知識を体系的にまとめた記事です。
  • jQuery Mobile Image

    jQuery Mobile を基本から覚える
    スマホサイト制作に最適なフレームワークの利用方法を解説。DEMOページ・サンプルコードで動作を確認できます。

オンライン講座

Webの基礎マスター講座ページへのリンク


連載講座:WordPressで作る簡単Webサイトページへのリンク

提供しているサービス

WordPressサイト制作出張講座ページへのリンク

WordPress を利用した Webサイト制作の方法を、
あなたのオフィスにうかがいご説明いたします。
料金:¥49,500

サービス詳細ページ >>

申し込みフォーム >>


Webサイト1日公開サービスページへのリンク

一刻も早く Webサイトが必要な方のために、
一緒に作業し1日で公開までもっていきます。
料金:¥49,500

サービス詳細ページ >>

申し込みフォーム >>

スポンサーリンク

ページの先頭へ