段組レイアウトの夜明け

フツーに段組、そしてレスポンシブ対応

巷でよく解説されているのは、こんな感じの段組レイアウト。

See the Pen 普通の段組 by keiko (@kamekon) on CodePen.0

なんとなくわかると思いますが、column-gap（初期値1em）は段組の間の間隔、column-ruleは段組の間の区切り線を設定するプロパティです。

テキストが内包されたブロック要素に次のようなCSSルールを指定すると、要素の幅がどのように増減しても3段組のレイアウトになります。

columns : 3;

columnsプロパティは、実はショートハンドプロパティで、次のように値を設定できます。

columns :  段組の幅 段組の数;

初期値はautoで、省略した方はautoが設定されます。

これらを個別に指定することもできます。

column-width: 段組の幅;
column-count: 段組の数;

「段組の幅」のみを指定した場合は、「段組の数」は次のように変化します。

次のサンプルでは段組の幅を250px、columng-gapを50pxに設定しているので、要素の内容の幅が550pxより小さくなると、1段組になります（要素にはpaddingを25px設定しているので、画面サイズでいうと600pxより小さくなると1段組になります）。「段組の幅」は、例えば250pxという固定値を持つのではなく、250pxを最小値として要素の幅に合わせて変化します。

See the Pen 段組（columnsに幅のみ設定） by keiko (@kamekon) on CodePen.0

CodePenに直接アクセスして、ビューをfull pageに切り替え、画面サイズを増減させながら確かめてみてください。Chromeの場合は開発者ツールでスマホ表示にして、デバイスをResponsiveにすれば、スクロールバーの影響を受けずに確認できます。

要素の幅が大きくなった時に「段組の数」を増やしたくない場合は、段組の幅とともに段組の数も指定します。するとその値が「段組の数」の最大値となります。

columns :  段組の幅（最小値） 段組の数（最大値）;

See the Pen 段組（columnsに幅と数を設定） by keiko (@kamekon) on CodePen.0

「段組の幅」「段組の数」がどのように決定されるのか、詳しい計算式はこちらのページに。ですが、まー、この計算式を理解しなくて、感覚的にわかるんじゃないでしょうか。

適切な幅を指定すれば、PC表示時は2段組・スマホでは段組なしのレイアウトを、メディアクエリを使わずに実現できそうですね。

段組の高さを指定

通常、段組レイアウトでは格段に均等に内容が収まるように高さが自動で設定されますが、次のようにCSSルールを設定すると、heightで指定した高さに固定できます。

columng-fill: auto;（初期値はbalance）

ただし、要素の幅が狭くなると内容が溢れてしまう恐れがあるので、幅ごとに設定を書き換える必要があります。

今のところ実用に耐えるプロパティはこのくらいです。

See the Pen 段組の高さを指定 by keiko (@kamekon) on CodePen.0

見出しが段組を横断＼(^O^)／、その他実用に耐えないプロパティ

段組レイアウトでは、次のCSSルールを指定すると、見出しのみを要素内に広げて表示することができます。

column-span: all;

See the Pen 段組（見出しが段組を横断） by keiko (@kamekon) on CodePen.0

ただし、残念ながらFirefoxではサポートされていません（IE, EdgeはOK）。このプロパティに関する記事をほとんど見たことがないのはそのせいでしょうか。本文部分のみをブロック要素で囲んで、それに対して段組レイアウトを指定すればいいだけのことなので、要らないといえば要らないですが、このようなレイアウトを実現したい場合には余計なタグを書かずに済むので使えるに越したことはありません。

その他、何故かIE系のみでサポートされているナゾのプロパティがあります。

break-after
break-before
break-inside

段組レイアウト専用のプロパティではなく、Fragmentation Moduleという別のモジュールとして策定されているもののようです。Regions Moduleなどのプロパティと一緒に使用することも想定されているようです。

たとえば、段組レイアウト内の見出しに「break-before: column」を設定すると、見出しの直前で改段されるので、見出しを常に要素の上部に表示することが可能です。

See the Pen 改段する箇所を調整 by keiko (@kamekon) on CodePen.0

Webkit系ブラウザではベンダープレフィクスが必要との情報があるのですが、CodePenではつけなくても動いています(Chrome) 。そして、IE系とChromeでは若干動きが違うような気も…

縦組みでも使えるかやってみた＼(^O^)／

そういえば縦書き用のCSSは全ての主要ブラウザでサポートされていますね。縦書きの時、同様に段組が適用されるか実験してみました。

See the Pen 段組（縦書き） by keiko (@kamekon) on CodePen.0

できました＼(^O^)／

向きが90度変わるので、少し配慮が必要です。たとえば、テキストの量を均等にして段組みするよりは、要素の幅と段組の高さを固定した方が良さそうです。幅は100%、段組の高さは100pxにしました。

しかし、ちょっと問題が。高さを明示的に指定しないと、ブラウザの表示範囲を高さと認識するようで、その高さに対して段組の高さを調整してしまうようです。そしてブラウザの幅を狭くしていくと、テキストが要素から溢れ、後続の要素に重なってしまいます。画面サイズが変化する環境での利用はちょっと難しそうです。

このプロパティの使い所は存在するのか

はたして、この段組プロパティの使い所はあるのかどうか。筆者は一度だけ実務で使ったことはありますが、段組らしきレイアウトの含まれるそのデザインカンプを作ったデザイナーが、このプロパティの存在を知っていたかどうかはナゾです。単純に紙媒体のレイアウトみたいにできたらいいなーという願望を形にしていただけではないかと思われます。そういったデザイナーの無茶振りに呼応するかのように、紙媒体のレイアウトに近いものを実現できるようなCSSの仕様が増えてきた気がしています（Regions Moduleはまさにそんな感じ）。

グリッドレイアウトがほぼ実用可能になったというニュースが流れたときもそうですが、とりわけ筆者が関わることが多い、デザインとコーディングの分業が確立されている現場では、デザイン担当の方がこのようなプロパティの存在を意識してデザインに活かせるかどうか、ということは大いに疑問でした。

そのような現場では、コーディングをあまり行わないデザイナーの方とも知識を共有できるような場を持って、こういうCSSプロパティがあるから、例えばこういうレイアウトを（無理のないマークアップを行う中で）実現できる、という提案をこちらから積極的にしていくべきなのでしょう。「無理のないマークアップ」という部分は、コーディングをしない方にとっては意識の外にあることかもしれませんが、なぜそうすることが必要なのか、といった知識も同時に共有していくべきなのかもしれません。

参考

• CSS Multi-column Layout Module（勧告候補）
• CSS Multi-column Layout Module Level 1（最新の草案）
• CSS による段組 — CSS Multi-column Layout Module（草案の日本語訳）

• CSS Fragmentation Module Level 3
• CSS Regions Module Level 1
• CSS Exclusions Module Level 1
• CSS REGIONS：HTMLとCSS3でリッチなページレイアウトを実現する
• CSS current work & how to participate