CSS column-wrap プロパティ
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
column-wrap は CSS のプロパティで、CSS 段組みレイアウトにおけるあふれた段の折り返し動作を指定します。
構文
/* キーワード */
column-wrap: auto;
column-wrap: nowrap;
column-wrap: wrap;
/* グローバル値 */
column-wrap: inherit;
column-wrap: initial;
column-wrap: revert;
column-wrap: revert-layer;
column-wrap: unset;
値
auto-
初期値です。コンテンツコンテナーの
column-heightが<length>に設定されている場合、autoはwrapとして解釈されます。それ以外の場合は、nowrapとして解釈されます。 nowrap-
段組みは行方向にあふれます。
wrap-
オーバーフローした段は、ブロック方向の新しい行に配置されます。
解説
column-wrap プロパティを使用すると、CSS 段組みレイアウトにおいて、段組みの幅が収まりきらない場合に、新しい行に折り返すように設定できます。このプロパティを使用することで、column-count や column-width プロパティを使用して複数列を設定する際に、読みやすいレイアウトを作成するのに有益です。
column-wrap を指定しない場合、余分な段は横方向にあふれ、読者はすべてのコンテンツを読むためにインライン方向へスクロールする必要があります。column-height プロパティを column-wrap と合わせて使用することで、各段を特定の高さに設定し、コンテナーの端に達した際に新しい段へと折り返すように設定できます。
column-wrap のデフォルト値は auto ですが、column-height が <length> 値に設定されている場合は wrap として解釈されます。wrap を指定すると、高さが固定された段が複数行にまたがって表示されるようになります。column-height が auto の場合、column-wrap: auto は nowrap として解釈され、コンテナーの高さが設定されている場合でも、段が水平方向にあふれることがあります。
このデフォルトの動作により、通常は column-wrap プロパティを明示的に設定する必要はありません。
公式定義
| 初期値 | auto |
|---|---|
| 適用対象 | 段組み要素 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |
形式文法
column-wrap =
auto |
nowrap |
wrap
例
基本的な使い方
この例では、column-wrap プロパティの基本的な使い方を示しており、column-height プロパティを設定することで、折り返される段組みレイアウトを作成しています。
HTML
ドクター・スースの詩を、28 個の <li> が含まれている <ol> で表示し、その後に <p> で作成者の名前を記載します。
<ol>
<li>One fish</li>
<li>Two fish</li>
<li>Red fish</li>
<li>Blue fish</li>
...
</ol>
<p>-- Dr. Seuss</p>
CSS
<ol> を段組みのコンテナーとして定義するために、column-width プロパティを 150px に設定します。これにより、コンテナーには可能な限り多くの段が含まれており、それぞれの段の幅は少なくとも 150px になります。gap プロパティは、段間の水平方向の隙間と、段の行間の垂直方向の隙間を設定します。そして、column-height を 3em に設定することで、column-wrap プロパティのデフォルト値である auto が wrap として解決され、段の行が折り返されるようになります。
ol {
column-width: 150px;
gap: 2em;
column-height: 3em;
}
結果
wrap と nowrap の比較
この例では、段組みレイアウトを用いて、段組みコンテナーの column-wrap プロパティの値を wrap と nowrap の間で切り替えることができ、wrap と nowrap の違いを視覚的に確認できます。その結果、レイアウトが水平スクロールと垂直スクロールの間で動的に切り替わります。
HTML と JavaScript
この例のマークアップには、MDN の HTML、CSS、JavaScript の各ホームページから引用した複数の段落のコンテンツと、コンテナーの column-wrap プロパティの値を nowrap と wrap の間で切り替えるための JavaScript を使用した <input type="checkbox"> 要素が含まれています。簡潔にするため、HTML と JavaScript は省略しています。
CSS
<body> 要素の column-count を 3 に設定することで、段組みコンテナーにします。そして、gap を 3em 2em に設定することで、行間の間隔を 3em、列間の間隔を 2em にします。
次に、column-height を 90vh に設定し、段組みの高さをビューポートの高さにほぼ合わせるようにします。同時に、column-wrap を nowrap に設定することで、コンテンツが列の幅を超えた場合に水平方向にあふれて発生するようにします。これは、初期値の column-wrap が auto であり、column-height が <length> 値に設定されると wrap として解釈されるため、この設定が必要になります。
チェックボックスにより、column-wrap プロパティを nowrap と wrap の間で切り替えます。wrap に設定すると、余ったコンテンツの段が縦方向に新しい段組みの行にあふれて、縦方向のレイアウトが作成されます。column-height の値により、それぞれの段の行がビューポートいっぱいに表示されます。
body {
column-count: 3;
gap: 3em 2em;
padding: 0 2em;
column-height: 90vh;
column-wrap: nowrap;
}
次に、<h1> 要素の column-span プロパティを all に設定し、見出しがすべての段にまたがるようにします。また、最初の <p> の margin-top プロパティを 0 に設定し、段の上端と揃うようにします。
h1 {
column-span: all;
}
p:first-of-type {
margin-top: 0;
}
結果
チェックボックスを切り替えることで、column-wrap プロパティの値を変更し、レイアウトを水平スクロールと垂直スクロールの間で切り替えることができます。column-wrap が nowrap に設定されている場合、段は水平方向にあふれます。column-wrap が wrap に設定されている場合、新しい段組みの行が垂直方向に追加されます。
仕様書
| 仕様書 |
|---|
| CSS Multi-column Layout Module Level 2 # propdef-column-wrap |
ブラウザーの互換性
関連情報
column-countcolumn-widthcolumns一括指定column-height- CSS 段組みレイアウトモジュール