このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

column-span:段抜きCSS3で追加

記事Mar. 14th,2021
マルチカラムレイアウトで要素が複数の段にまたがるかどうかを指定するプロパティ
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

プロパティについて

概要

初期値 column-span: none;
適用対象 フロー内のブロックレベル要素
継承 しない
パーセント値 パーセント値は指定できません
計算値 指定されたキーワード
アニメーション 離散

column-span”プロパティはマルチカラムレイアウトで段組み内にある要素を複数の段にまたがらせるかどうかを指定するプロパティです。

複数の段にまたがる要素

要素が複数の段にまたがっている場合、その子要素が絶対位置で配置される(position:absolute;)時の配置位置の基準となります。また、スパニング要素とカラム・ボックスの間ではマージンの相殺が起こりません。

サンプルコード

div { column-span: all;}

説明
none 要素は複数の段にまたがりません
all 要素はフローから外されてマルチカラム・コンテナ内のすべての段にまたがります (要素の直前の通常フロー内のコンテンツは均等にすべての段に割り振られます。要素は新しいブロック整形コンテキストを生成します。)
共通キーワード

仕様書

Level 1
作業草稿(WD)
column-span
定義あり
Level 1
作業草稿(WD)
none
定義あり
all
定義あり

使用例

要素を複数の段にまたがらせる

.multi-column {
column-count: 3;
}

.headers {
background-color: rgb(240, 230, 140);
column-span: all;
}
<div class="multi-column">
<h1 class="headers">バナナの特徴</h1>
<p>
「バナナ」はバショウ科バショウ属の多年草及びその果実のことである。
</p>

<h2>バナナの特徴</h2>
<p>
バナナは「バナナの木」と呼ばれるように高さが数メートルまで成長するが草本に分類される。高く伸びる茎のような部分は葉鞘が幾重にも重なりあっているものであり、本当の茎は地中にある。
</p>

<h2>バナナの果実</h2>
<p>
バナナの果実は一般的には緑色、熟成したものは黄色であると思われがちだが、実は紫色や桃色のものなどいろいろなものがある。
</p>

<h1 class="headers">バナナの産地</h1>
<p>
バナナの生産量の世界一はインドで、中国、フィリピン、エクアドル、ブラジルが続く。日本は124位であり、沖縄や奄美大島、鹿児島などで栽培されています。
</p>

<h1 class="headers">バナナの保存方法</h1>
<p>
果肉の柔らかいバナナはテーブルなどに置いておくと接触した部分が黒ずみ、傷みやすくなるので房の根元を引っ掛けて吊るして、風通しの良い場所に常温で保存する。茶色い星が出た完熟バナナは冷やして保存する。
</p>

<h1 class="headers">バナナの栄養素</h1>
<p>
ビタミンB群や、ビタミンCなどのビタミン、カリウム、マグネシウム、カルシウムなどのミネラル、食物繊維などがバランスよく含まれる。また1本(約100g)約86kcalと、ごはんやパンと比べて低カロリーである。
</p>
</div>

バナナの特徴

「バナナ」はバショウ科バショウ属の多年草及びその果実のことである。

バナナの特徴

バナナは「バナナの木」と呼ばれるように高さが数メートルまで成長するが草本に分類される。高く伸びる茎のような部分は葉鞘が幾重にも重なりあっているものであり、本当の茎は地中にある。

バナナの果実

バナナの果実は一般的には緑色、熟成したものは黄色であると思われがちだが、実は紫色や桃色のものなどいろいろなものがある。

バナナの産地

バナナの生産量の世界一はインドで、中国、フィリピン、エクアドル、ブラジルが続く。日本は124位であり、沖縄や奄美大島、鹿児島などで栽培されています。

バナナの保存方法

果肉の柔らかいバナナはテーブルなどに置いておくと接触した部分が黒ずみ、傷みやすくなるので房の根元を引っ掛けて吊るして、風通しの良い場所に常温で保存する。茶色い星が出た完熟バナナは冷やして保存する。

バナナの栄養素

ビタミンB群や、ビタミンCなどのビタミン、カリウム、マグネシウム、カルシウムなどのミネラル、食物繊維などがバランスよく含まれる。また1本(約100g)約86kcalと、ごはんやパンと比べて低カロリーである。

要素を複数の段にまたがらせない

.multi-column {
column-count: 3;
}

.headers {
background-color: rgb(240, 230, 140);
column-span: none;
}
<div class="multi-column">
<h1 class="headers">バナナの特徴</h1>
<p>
「バナナ」はバショウ科バショウ属の多年草及びその果実のことである。
</p>

<h2>バナナの特徴</h2>
<p>
バナナは「バナナの木」と呼ばれるように高さが数メートルまで成長するが草本に分類される。高く伸びる茎のような部分は葉鞘が幾重にも重なりあっているものであり、本当の茎は地中にある。
</p>

<h2>バナナの果実</h2>
<p>
バナナの果実は一般的には緑色、熟成したものは黄色であると思われがちだが、実は紫色や桃色のものなどいろいろなものがある。
</p>

<h1 class="headers">バナナの産地</h1>
<p>
バナナの生産量の世界一はインドで、中国、フィリピン、エクアドル、ブラジルが続く。日本は124位であり、沖縄や奄美大島、鹿児島などで栽培されています。
</p>

<h1 class="headers">バナナの保存方法</h1>
<p>
果肉の柔らかいバナナはテーブルなどに置いておくと接触した部分が黒ずみ、傷みやすくなるので房の根元を引っ掛けて吊るして、風通しの良い場所に常温で保存する。茶色い星が出た完熟バナナは冷やして保存する。
</p>

<h1 class="headers">バナナの栄養素</h1>
<p>
ビタミンB群や、ビタミンCなどのビタミン、カリウム、マグネシウム、カルシウムなどのミネラル、食物繊維などがバランスよく含まれる。また1本(約100g)約86kcalと、ごはんやパンと比べて低カロリーである。
</p>
</div>

バナナの特徴

「バナナ」はバショウ科バショウ属の多年草及びその果実のことである。

バナナの特徴

バナナは「バナナの木」と呼ばれるように高さが数メートルまで成長するが草本に分類される。高く伸びる茎のような部分は葉鞘が幾重にも重なりあっているものであり、本当の茎は地中にある。

バナナの果実

バナナの果実は一般的には緑色、熟成したものは黄色であると思われがちだが、実は紫色や桃色のものなどいろいろなものがある。

バナナの産地

バナナの生産量の世界一はインドで、中国、フィリピン、エクアドル、ブラジルが続く。日本は124位であり、沖縄や奄美大島、鹿児島などで栽培されています。

バナナの保存方法

果肉の柔らかいバナナはテーブルなどに置いておくと接触した部分が黒ずみ、傷みやすくなるので房の根元を引っ掛けて吊るして、風通しの良い場所に常温で保存する。茶色い星が出た完熟バナナは冷やして保存する。

バナナの栄養素

ビタミンB群や、ビタミンCなどのビタミン、カリウム、マグネシウム、カルシウムなどのミネラル、食物繊維などがバランスよく含まれる。また1本(約100g)約86kcalと、ごはんやパンと比べて低カロリーである。

一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク