【60】マルチカラム内で段抜きができる column-spanプロパティ

最終更新日:2020年10月20日  (初回投稿日:2020年09月23日)

マルチカラムに関するプロパティの続きです。
今回の column-spanプロパティは、マルチカラム内でだんを指定できます。

段抜きとは編集・印刷用語で、新聞や雑誌などの段組みレイアウトの中で、見出しや写真などを複数の段にまたがってレイアウトすること。

CSSの column-spanプロパティによる段抜き「全段抜き」のみ可(DTPのように2段抜き 3段抜きとかはできません)
でも、これができるとレイアウトがスッキリするのでとても便利なプロパティです。

span(スパン)は名詞は「範囲・期間」といった意味だけど、他動詞は「広がる・及ぶ・またがる」(it span a wide range. とか)の意味。この column-span という名前は「カラムにまたがる」的な意味だと思う。

本日のINDEX
  1. column-spanプロパティの値
  2. column-spanプロパティを使ってみる
    1. ヘディング要素に使ってみる
    2. div要素に使ってみる
    3. img要素に使ってみる(display: block にして)

マルチカラム関連のプロパティは、下記のように記事を分けます。

【57-1】マルチカラムのカラム数を決める column-countプロパティ
【57-2】マルチカラムのカラム幅を決める column-widthプロパティ
【57-3】カラム数と幅をまとめて指定する columnsショートハンド
【58】各カラムの間隔を指定する column-gapプロパティ
【59-1】カラム間の罫線のスタイルを指定する column-rule-style
【59-2】カラム間の罫線の幅を指定する column-rule-width
【59-3】カラム間の罫線の色を指定する column-rule-colorプロパティ
【59-4】カラム間の罫線をまとめて指定する column-rule
【60】マルチカラム内で段抜きができる column-spanプロパティ ←今日はココ
【61】各カラムの埋め方を決める column-fillプロパティ
(ちょっとメモ)ブラウザはどうやって カラムの幅を決めるか

参考:
CSS Multi-column Layout Module Level 1 | W3C Working Draft
CSS 段組みレイアウト | MDN

column-spanプロパティの値

column-spanプロパティの値は none(デフォルト値)と all だけ。
段抜きナシか、全段抜きの二択で簡単です。

column-spanプロパティ
キーワード none がデフォルト値。スパニングしない
all マルチカラム内のすべてのカラムにまたがって表示
グローバル値 inherit; 親の値を継承
initial; 継承した親の値を解消しデフォルト値に戻す
unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作
値の継承 しない 適用できる要素 マルチカラムのコンテナ内のブロックレベル要素で、
float や絶対配置(position: absolute)じゃないもの

マルチカラムを指定した要素の中の段抜きにしたい要素に指定します。

適用できる要素は「ブロックレベル要素」です。
インラインレベルの<img>要素なら「display: block」を指定すれば適用できます。

column-spanプロパティを使ってみる

いろいろな要素に使ってみます。

ヘディング要素に使ってみる

まずはスタンダードなところで、ヘディング要素に使ってみます。
段抜きにしたほうが、見出しが1行にまとまってレイアウトがスッキリします。

無指定(column-span: none)の<h4>要素

column-spanプロパティの値は「none」と「all」の2つだけ。noneはスパニングをせず、これがデフォルト値です。allはすべてのカラムにまたがって表示します。これはマルチカラム内のブロックレベル要素に指定できます。

column-span: all を指定した <h4>要素

column-spanプロパティの値は「none」と「all」の2つだけ。noneはスパニングをせず、これがデフォルト値です。allはすべてのカラムにまたがって表示します。これはマルチカラム内のブロックレベル要素に指定できます。

サンプルのHTMLはこちら。

<section class="sample">
  <h4>無指定(column-span: none)の&lt;h4&gt;要素</h4>
  <p>column-spanプロパティの値は「none」と「all」の2つだけ。noneはスパニングを
  せず、これがデフォルト値です。allはすべてのカラムにまたがって表示します。これは
  マルチカラム内のブロックレベル要素に指定できます。</p>
</section>
<section class="sample colSpan">
  <h4>column-span: all を指定した &lt;h4&gt;要素</h4>
  <p>(略。同じ文章です)</p>
</section>

サンプルのCSSはこちら。

.sample { /*sampleで共通の指定をしています*/
	column-count:2;
	column-gap:2em;
	column-rule:#89c4ff dotted;
    text-align:justify; /*罫線が入るとカラムの左右が揃ってないと変なので*/
	margin:1em 0;
	border:solid 1px #ccc;
	padding:1em}
.sample p {
	line-height:1.4em;
	margin:0}
.sample h4 {
	font-size:1.2rem;
	color:#33c;
	margin:0;
	padding:0;
	line-height:1.2em}
.colSpan h4 {    /*colSpanと名付けたsection内のh4のみへの指定*/
	column-span: all}

div要素に使ってみる

<div>要素に使ってみます。

無指定の<div>

column-spanプロパティの値は「none」と「all」の2つだけ。noneはスパニングをせず、これがデフォルト値です。allはすべてのカラムにまたがって表示します。これはマルチカラム内のブロックレベル要素に指定できます。

column-span: all の<div>

column-spanプロパティの値は「none」と「all」の2つだけ。noneはスパニングをせず、これがデフォルト値です。allはすべてのカラムにまたがって表示します。これはマルチカラム内のブロックレベル要素に指定できます。

サンプルのHTMLはこちら。

<section class="sample">
  <div>無指定の&lt;div&gt;</div>
  <p>(略。先程のサンプルと同じ文章です)</p>
</section>
<section class="sample colSpan">
  <div>column-span: all の&lt;div&gt;</div>
  <p>(略。同じ文章です)</p>
</section>

サンプルのCSSはこちら(要点のみ)

/*この他の指定は先程のサンプルと同じなので省略します*/
.sample div { /*div要素の共通の指定です*/
	font-size:1rem;
	margin:0 0 .5em 0;
	background:#ceff9e;
	padding:1em;
	line-height:1.2em}
.colSpan div {column-span: all} /*colSpanと名付けたsection内のdivのみへの指定*/

img要素に使ってみる(display: block にして)

<img>要素に使ってみます。
<img>要素はインラインレベルなので、display: block を指定してブロックレベルにします。そして、width: 100% を指定して表示領域いっぱいに幅(連動して高さも)が調整されるようにしました。

column-span: none
img要素は、ブロックレベルにして使えば、マルチカラムの中でオーバーフローせずに使えます。column-span: none で、width: 100% にしておけば、1つのカラム内にすっぽり収まる表示になります。

column-span: all
img要素は、ブロックレベルにして使えば、マルチカラムの中でオーバーフローせずに使えます。column-span: all で、width: 100% にしておけば、全カラムをスパニングして収まる表示になります。

サンプルのHTMLはこちら。

<section class="sample">
  <img src="image.jpg">
  <p><b>column-span: none</b><br>
  img要素は、ブロックレベルにして使えば、マルチカラムの中でオーバーフロー
  せずに使えます。column-span: none で、width: 100% にしておけば、1つの
  カラム内にすっぽり収まる表示になります。</p>
</section>
<section class="sample colSpan">
  <img src="image.jpg">
  <p><b>column-span: all</b><br>
  (略)</p>
</section>

サンプルのCSSはこちら(要点のみ)

/*この他の指定は先程のサンプルと同じなので省略します*/
.sample img { /*img要素の共通の指定です*/
	display:block;
	width: 100%;
	margin:0 0 .5em 0;}
.colSpan img {column-span: all} /*colSpanと名付けたsection内のimgのみへの指定*/

次回予告

次回は column-fillプロパティを使ってみます。
これは、マルチカラムで各カラムの内容の埋め方(カラム内の行数)をどうするか決めるプロパティです。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

「レンタルサーバーはどこがいい?」とご質問をよくいただきますが、自分でも使っていてオススメなのは スターサーバー (ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ!もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。

ちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、エックスサーバー 。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
09 | 2020/10 | 11
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.