このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
column-span CSS property
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2020年7月以降、すべてのブラウザーで利用可能です。
column-span は CSS のプロパティで、値に all を設定した場合、段組みレイアウトで要素をすべての段にまたがらせることができます。
複数の段にまたがる要素は段抜き要素 (spanning element) と呼びます。
試してみましょう
column-span: none;
column-span: all;
<section id="default-example">
<div class="multicol-element">
<p>
ロンドン。ミカエルマス学期が終わり、リンカーンズ・イン・ホールで大法官が座っています。
</p>
<div id="example-element">段抜き?</div>
<p>
容赦のない 11 月の天候。街はまるで地球の表面から水が引き始めたばかりのように泥だらけで、ホルボーン・ヒルを象のようなトカゲのようによちよちと歩く、体長 12 メートルほどのメガロサウルスに出会っても不思議ではないでしょう。
</p>
</div>
</section>
.multicol-element {
width: 100%;
text-align: left;
column-count: 3;
}
.multicol-element p {
margin: 0;
}
#example-element {
background-color: rebeccapurple;
padding: 10px;
color: white;
}
構文
css
/* キーワード値 */
column-span: none;
column-span: all;
/* グローバル値 */
column-span: inherit;
column-span: initial;
column-span: revert;
column-span: revert-layer;
column-span: unset;
column-span プロパティは以下に挙げたキーワード値のうちの一つで指定します。
値
公式定義
| 初期値 | none |
|---|---|
| 適用対象 | フロー内のブロックレベル要素 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |
形式文法
column-span =
none |
<integer [1,∞]> |
all |
auto
<integer> =
<number-token>
例
段抜きの見出しの設定
この例では、見出しが記事のすべての段にまたがって作成されます。
HTML
html
<article>
<h2>すべての段にまたがる見出し</h2>
<p>
h2 はすべての段にまたがるようにします。残りのテキストはそれぞれの段に分散させます。
</p>
<p>
これは、 CSS の `columns` プロパティを使用して 3 つの段に分割されたテキストの束です。テキストはそれぞれの段に均等に配置されています。
</p>
<p>
これは、 CSS の `columns` プロパティを使用して 3 つの段に分割されたテキストの束です。テキストはそれぞれの段に均等に配置されています。
</p>
<p>
これは、 CSS の `columns` プロパティを使用して 3 つの段に分割されたテキストの束です。テキストはそれぞれの段に均等に配置されています。
</p>
<p>
これは、 CSS の `columns` プロパティを使用して 3 つの段に分割されたテキストの束です。テキストはそれぞれの段に均等に配置されています。
</p>
</article>
CSS
css
article {
columns: 3;
}
h2 {
column-span: all;
}
結果
[フレーム]
仕様書
| 仕様書 |
|---|
| CSS Multi-column Layout Module Level 1 # column-span |
ブラウザーの互換性
ブラウザー互換性一覧表を表示するには、JavaScript を有効にしてください。