カラム幅を指定するcolumns-widthプロパティ

カラム幅を指定するcolumns-widthプロパティ

columns-widthプロパティはカラム幅を指定するプロパティです。対象の要素は指定された幅のカラムに分割され、カラムの数はWebブラウザの幅に応じて変化します。

以下はcolumns-widthプロパティを使ったサンプルです。ここでは、段組表示の対象となるdivタグについて、stlyeタグ内でcolumn-widthプロパティを使ってカラム幅を指定しています。

columns-widthプロパティを使ったサンプル（multicolumn-sample.html）

  <!DOCTYPE html>
  <html lang="ja">
  <head id="header">
  <style>
  <!--
  div {
  column-width: 400px;                                ←カラム幅の指定
  -webkit-column-width: 400px;                           ←Webkitブラウザ用
  ・・・他のWebブラウザ用の指定は省略・・・
  }
  -->
  </style>
  <title>マルチカラムレイアウトサンプル</title>
  </head>
  <body>
  <div>
  <p>
  ひどく寒い日でした。 雪も降っており、すっかり暗くなり、もう夜 ―― 今年さいごの夜でした。 この寒さと暗闇の中、一人のあわれな少女が道を歩いておりました。 頭に何もかぶらず、足に何もはいていません。 家を出るときには靴をはいていました。 ええ、確かにはいていたんです。 でも、靴は何の役にも立ちませんでした。 それはとても大きな靴で、 これまで少女のお母さんがはいていたものでした。 大層大きい靴でした。 かわいそうに、道を大急ぎで渡ったとき、少女はその靴をなくしてしまいました。 二台の馬車が猛スピードで走ってきたからです。
  </p>

（テキストは青空文庫より「マッチ売りの少女」）

今回はカラム幅を400ピクセルに指定しているため、以下のように、Webブラウザの幅に応じてカラム数が自動的に増減します。

図2：Webブラウザの幅が広いため3カラム表示（クリックで拡大）	図3：Webブラウザを縮小したため2カラム表示に自動的に切り替わる（クリックで拡大）

カラム数を指定するcolumns-countプロパティ

columns-countプロパティはカラム数を指定するプロパティです。columns-widthプロパティとは逆に、対象の要素は指定された数のカラムに分割され、カラムの幅はWebブラウザの幅に応じて変化します。

先ほどのコードのうち、styleタグの内容だけを以下のように書き換えます。ここでは、カラム数を2に指定します。

columns-countプロパティを使ったサンプル（multicolumn-sample2.html）

  <style>
  <!--
  div {
  column-count: 2;
  -webkit-column-count: 2;
  ・・・他のWebブラウザ用の指定は省略・・・
  }
  -->
  </style>
  ・・・以下省略・・・

図4：Webブラウザの幅に応じて広めの2カラム表示（クリックで拡大）	図5：Webブラウザの幅が狭くなったので2カラム表示を維持しつつカラム幅を狭める（クリックで拡大）

columnsプロパティはスマートフォンでもサポートされています。以下は上記のサンプルをAndroid端末で表示した例です。

図6：Androidでも2カラム表示が可能（クリックで拡大）

スマートフォンでもきちんと2カラム表示になっていることが分かります。なお、スマートフォンは画面サイズが小さいため、マルチカラムレイアウトにする場合には読みやすさを損なうことが無いよう注意が必要です。

このように、columnsプロパティを使用することで、コンテンツ量やWebブラウザの画面幅などに応じた柔軟なマルチカラムレイアウトを実現できます。

まとめ

CSS3はモジュールという単位で機能をまとめるようになり、様々な種類の機能が追加されています。今回解説したマルチカラムレイアウトだけでなく、画面サイズなどに応じてレイアウトを切り替え可能なメディアクエリ、要素の透明度を変化させるopacityプロパティなど、大小様々な機能がありますので、ぜひ試してみてください。

サンプル一式は、会員限定特典としてダウンロードできます。記事末尾をご確認ください。

次回は、JavaScriptやFlashなどを必要としない、CSS単体でのアニメーション機能について解説します。

＜編集部より＞サンプルプログラムのリンクが間違っていたため、修正しました（2012.04.13）