CSS column-height プロパティ
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
column-height は CSS のプロパティで、CSS 段組みレイアウトにおける各段の高さを指定します。
columns 一括指定プロパティを使用すると、column-height、column-count、column-width の各プロパティ値を、単一の宣言で設定することができます。
構文
/* キーワード */
column-height: auto;
/* <length> 値 */
column-height: 300px;
column-height: 25em;
column-height: 70vh;
/* グローバル値 */
column-height: inherit;
column-height: initial;
column-height: revert;
column-height: revert-layer;
column-height: unset;
値
解説
column-height プロパティは、段組みレイアウトにおけるそれぞれの段の高さを設定します。これは、column-count や column-width プロパティを使用して複数の段を設定する際、読みやすさを確保するために段の高さを制約するのに役立ちます。
column-height を指定しない場合、段のコンテンツの高さがビューポートの高さを超えると、読者は 1 つの段の最後までスクロールし、それから次の段の先頭までスクロールし直さなければなりません。解決策の一つとして、コンテンツのコンテナーに固定の高さを設定する方法がありますが、その場合、余分な段が横方向にはみ出してしまい、読者はすべてのコンテンツを読むために横方向にスクロールしなければならなくなります。
column-height プロパティと column-wrap を組み合わせることで、段の高さを個別に設定し、コンテナーの端に達した際に段を新しい行に折り返すことができます。
column-wrap のデフォルト値は auto ですが、column-height が <length> 値に設定されている場合は wrap として解釈されます。wrap を指定すると、高さが固定された段が複数行にまたがって表示されるようになります。column-height が auto の場合、column-wrap: auto は nowrap として解釈され、コンテナーの高さが固定されている場合でも、段が水平方向にあふれる可能性があります。このデフォルトの動作により、通常は column-wrap プロパティを明示的に設定する必要はありません。
公式定義
| 初期値 | auto |
|---|---|
| 適用対象 | 表ラッパーボックスを除くブロックコンテナー |
| 継承 | なし |
| 計算値 | auto if specified as auto, otherwise for <length> the absolute value specified |
| アニメーションの種類 | 計算値の型による |
形式文法
column-height =
auto |
<length [0,∞]>
例
基本的な使い方
この例では、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 になります。2em の gap プロパティは、段間の水平方向の隙間と、段の行間の垂直方向の隙間を設定します。そして、column-height を 2em に設定することで、column-wrap プロパティのデフォルト値である auto が wrap として解決され、段の行が折り返されるようになります。
ol {
column-width: 150px;
gap: 2em;
column-height: 3em;
}
結果
スクロールスナップする段
この例では、段組みレイアウトと CSS スクロールスナップを組み合わせています。これにより、スクロールするたびに新しい段がビューポートの全体の高さにきれいに収まり、快適に読み進められるような使い勝手の良い体験を実現しています。
HTML
MDN の HTML、CSS、JavaScript の各ホームページから引用した複数の段落分のコンテンツを含む HTML で、簡潔にするために非表示にしています。
CSS
まず、column-width を <body> 要素に設定し、段の推奨幅を定義します。gap を 3em 2em に設定すると、行間が 3em、段間が 2em になります。column-rule は、段間の中央に線を追加します。column-height を 95vh に設定すると、段の高さはビューポートの高さにほぼ等しくなります。
適用された折り返し動作を明確にするため、column-wrap を明示的に wrap に設定しました。値を auto に設定したり、プロパティを省略したりすることもできます。column-height が <length> 値に設定されている場合、デフォルトで column-wrap は wrap として解決されるためです。
body {
column-width: 150px;
column-rule: 2px solid red;
gap: 3em 2em;
padding: 0 2em;
column-height: 95vh;
column-wrap: wrap;
}
次に、<h1> 要素の column-span プロパティを all に設定し、見出しがすべての段にまたがるようにします。また、最初の <p> の margin-top プロパティを 0 に設定し、段の上端と揃うようにします。
h1 {
column-span: all;
}
p:first-of-type {
margin-top: 0;
}
最後に、 <html> 要素の scroll-snap-type を y mandatory に設定し、生成されたそれぞれの列を表す ::column 擬似要素に対して scroll-snap-align を start に設定することで、スクロールスナップ機能を追加します。これにより、スクロールするたびにコンテンツが新しい段の先頭にスナップするようになります。
html {
scroll-snap-type: y mandatory;
}
::column {
scroll-snap-align: start;
}
結果
コンテンツをスクロールしてみてください。それぞれの新しい段の行がビューポートいっぱいに表示される様子や、スクロールするたびにコンテンツが新しい行の先頭にきれいに収まる様子に注目してください。
column-height と column-count の遊び場
この例は、前回の例を基に、段組みのレイアウトの列数と列の高さを調整することができる 2 つの範囲スライダーを記載したものです。
HTML および JavaScript
HTML は前の例と同じですが、JavaScript を介して column-count および column-height の値を更新する 2 つの <input="range"> 要素を含むフォームが追加されています。簡潔にするため、HTML と JavaScript のコードは省略しています。
CSS
column-rule と gap には、前回の例と同じ値を指定します。column-width は指定せず、代わりに column-count プロパティを使用して段組みレイアウトを生成し、JavaScript で段数と段の高さを動的に設定します。この例ではスクロールスナップは含まれていません。
body {
column-count: 3;
column-height: 20em;
column-rule: 2px solid red;
gap: 3em 2em;
padding: 0 2em;
}
結果
段数と段の高さを調整して、これらのプロパティがどのように効果があるのかを確認してください。
仕様書
| 仕様書 |
|---|
| CSS Multi-column Layout Module Level 2 # propdef-column-height |
ブラウザーの互換性
関連情報
column-countcolumn-widthcolumns一括指定column-wrap- CSS 段組みレイアウトモジュール