1. ウェブ
  2. CSS
  3. リファレンス
  4. プロパティ
  5. column-wrap

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

CSS column-wrap プロパティ

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

column-wrap は CSS のプロパティで、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
この構文は CSS Multi-column Layout Module Level 2 による最新の標準を反映しています。すべてのブラウザーがすべての部分を実装しているわけではありません。サポート情報についてはブラウザーの互換性を参照してください。

例

基本的な使い方

この例では、column-wrap プロパティの基本的な使い方を示しており、column-height プロパティを設定することで、折り返される段組みレイアウトを作成しています。

HTML

ドクター・スースの詩を、28 個の <li> が含まれている <ol> で表示し、その後に <p> で作成者の名前を記載します。

html
<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 として解決され、段の行が折り返されるようになります。

css
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 の値により、それぞれの段の行がビューポートいっぱいに表示されます。

css
body {
  column-count: 3;
  gap: 3em 2em;
  padding: 0 2em;
  column-height: 90vh;
  column-wrap: nowrap;
}

次に、<h1> 要素の column-span プロパティを all に設定し、見出しがすべての段にまたがるようにします。また、最初の <p> の margin-top プロパティを 0 に設定し、段の上端と揃うようにします。

css
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

ブラウザーの互換性

関連情報

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告