columnsとは？ 雑誌や書籍で見られる段組みレイアウトを簡単に実装する方法

Webページをデザインする際やコーディングをする際

と悩むことはないでしょうか。

columnsというCSSプロパティを使うと、この段組みレイアウトが簡単に実装することができます。

今回は、columnsの

について説明します。

columnsとは

columnsの読み方

columnsの読み方は「カラムス」です。行列の列を示すカラムの複数形です。

columnsの説明

columnsは複数のCSSプロパティを一度に指定できる、一括指定プロパティです。columnsで指定できるプロパティはcolumn-countとcolumn-widthです。

column-coutやcolumn-widthは段組みレイアウトをWebページで表現するためのCSSプロパティです。段組みレイアウトとは、雑誌や書籍でよくみられる、文章を１ページで複数の列に区切りレイアウトすることで可読性を上げる表現のことです。

column-countの概要

column-countでは整数を指定します。指定した数の段数で段組みレイアウトを表現します。

下記図のように、整数で3を指定すると3列の段組みレイアウトが表示されます。

参考文献：羅生門（青空文庫）

column-widthの概要

column-widthは幅を指定します。column-countとは異なりコンテナ（親要素）の幅に収まるように、かつできるだけ列の幅が指定した幅になるように自動計算して列幅が決まります。

参考文献：羅生門（青空文庫）

columnsで利用できる値

【キーワード】では以下の属性を使うことができます。

対応ブラウザ

対応ブラウザは以下の通りです。

columnsの基本的な使い方

columnsの使い方

columnsの使い方自体はcolumn-countやcolumn-widthと同じです。雑誌や書籍で見られる段組みレイアウト（文章を複数列に分けて表示するレイアウト）をしたい時に使うCSSプロパティです。

columnsは「整数」を指定するとcolumn-countの動作をして「幅」を指定するとcolumn-widthの動作をします。

上記は一度に複数の設定をしていますが、本来はどれか一つの方法で指定します。

文章だけではなく一連の要素も段組みレイアウトが適用される

columns等、Webページで段組みレイアウトをできるのは文章だけではありません。ブロック要素の連続も文章のように指定された列の段組み表示をすることができます。

しかし、ブロック要素を段組みレイアウトで表示させると若干意図と違うように動作する感覚を持つかもしれません。下記図のように、要素の途中でも列が切り替わるところで、切られて表示されます。

もともとは、文章を段組みレイアウトするCSSプロパティで、仕様通りの動作なのですが、やはりブロック要素はひとかたまりで表示されるのが望ましいことが多いです。

要素が途中で切られて別の列に分割されないようにする方法

要素を途中で切られないようにする方法も実はありますが、ブラウザにより異なる動作をする場合があるので注意が必要です。

要素を途中で切られないためには、コンテンツとなる要素にbreak-insideというCSSプロパティを指定すると途中で切られなくなります。

下記のように記述すると、ブロックがきられなくなるのですが、Firefoxだけこの動作が効かず下の図のようになってしまいます。

Chromeなどのブラウザでは左の図のように、break-insideが指定されたブロックが途中で切れずに表示されます。しかし、Firefoxの場合にはこのbreak-insideが効きません。

まとめ

columnsはcolumn-countやcolumn-widthを一括指定できるCSSプロパティであることがわかりました。

しかし、columnsやcolumn-countなどはbreak-insideと併用すると一部のブラウザで違う動作をすることがわかりました。

この点を踏まえ、この記事がWebページの制作に役立てていただければ幸いです。