Welcome to ほんっとに! INDEX をご利用ください

はじめての人にもわかりやすくHTMLの組み方を書いています。CSSも基本からやってみましょう。
サイトの編集ができるようになる手助けになれば…と思っています。HTML5+CSS3ベースです。

はじめてのHTML INDEX
HTMLについて [1]から順に読みたい、特定の記事を読みたいってときは、このINDEXからGO!
CSS3レイアウトも時々登場します。
HTML要素 索引
HTML要素のアルファベット別INDEXです。
特定のHTML要素について調べたいときには、わりと便利です。
はじめてのCSS INDEX
CSSについて【1】から読みたい、CSSの特定の記事を読みたいときは、こちらからGO!
(はじめてのHTML での CSSの使用例も、ここでINDEXにまとめました。ご利用ください)

サイト内検索はこちらからどうぞ

【61】各カラムの埋め方を決める column-fillプロパティ

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

マルチカラムに関するプロパティの続きです。
column-fillプロパティは、マルチカラムで各カラムの内容の埋め方(カラム内の行数)をどうするか決めます。

本日のINDEX
  1. column-fillプロパティの値
  2. column-fillプロパティを使ってみる

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

【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-fillプロパティの値

column-fillプロパティの値は以下のものがあります。

column-fillプロパティ
キーワード balance がデフォルト値。
balance-all、auto
グローバル値 inherit; 親のcolumnsの値を継承
initial; 継承した親の columnsの値を解消しデフォルト値に戻す
unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作
値の継承 しない 適用できる要素 マルチカラムのコンテナ
(column-count, column-width, columns を指定した要素)

column-fillプロパティそのものは、主要ブラウザ(IE11も)で実装しています。
ただし、値の balance-all だけは、どのブラウザも未実装です。(参考:Can I Use 2020年10月時点)

それぞれのは、以下の意味があります。

auto
先頭のカラムから順番にコンテンツを埋めていきます。
balance
これがデフォルト。
コンテンツを各カラムにできるだけ均等に(同じ行数になるように)分割します。
balance-all
この値は今のところ全ブラウザ未実装(参考:Can I Use 2020年10月時点)なので、どんな具合になるのか私はいまのところ実感できていません。
W3C仕様書では「コンテンツは各カラムにできるだけ均等に分割され、断片化コンテキストではすべての断片を平準化する」とあります。(balanceだと最後の断片のみ平準化するそうです)
MDNの解説では「ページメディアでは全ページが均等に分割される」とあります。

CSSの断片化(Fragmentation)とは、コンテンツがページ、領域、段などをまたがって分割された(断片化した)状態のこと。
段落(<p>要素とか)などが、マルチカラムで複数のカラムに分割されたり、印刷時に複数のページに分割されたりする場合を言うそうです。
この状況での表示の制御は、Fragmentation Module で定義されています。

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

全部の値を使って違いを確認してみます。
(ただし balance-allは全ブラウザ未実装です(2020年10月時点)

無指定(column-fill: balance)

column-fillプロパティのデフォルト値の balance は均等に各カラムに内容を流し込みます。auto は先頭のカラムから順に流し込むので、マルチカラムコンテナの高さを決めていないと最初のカラムに流し込み続けます。

column-fill: balance-all

column-fillプロパティのデフォルト値の balance は均等に各カラムに内容を流し込みます。auto は先頭のカラムから順に流し込むので、マルチカラムコンテナの高さを決めていないと最初のカラムに流し込み続けます。

column-fill: auto

column-fillプロパティのデフォルト値の balance は均等に各カラムに内容を流し込みます。auto は先頭のカラムから順に流し込むので、マルチカラムコンテナの高さを決めていないと最初のカラムに流し込み続けます。

column-fill: auto は 先頭から順にコンテンツを埋めるので、マルチカラムの指定をした要素に「高さ」指定がなければ最初のカラムに延々とコンテンツを流し込みます。
「高さ」を指定すれば、最初のカラムがいっぱいになれば次のカラムに流し込みます。

column-fill: auto で高さを12em にしたもの

column-fillプロパティのデフォルト値の balance は均等に各カラムに内容を流し込みます。auto は先頭のカラムから順に流し込むので、マルチカラムコンテナの高さを決めていないと最初のカラムに流し込み続けます。

HTMLはこちらです。
column-fillプロパティは <div>要素に直接インラインで指定しています。
4番目の<div>要素の高さ指定(height:12em)もインラインでの指定です。

<div class="sample">
  <h4>無指定(column-fill: balance)</h4>
  <p>column-fillプロパティのデフォルト値の balance は均等に各カラムに内容を流し込みます。
auto は先頭のカラムから順に流し込むので、マルチカラムコンテナの高さを決めていないと最初のカラムに流し込み続けます。</p>
</div>
<div class="sample" style="column-fill:balance-all">
  <h4>column-fill: balance-all</h4>
  <p>(略)</p>
</div>
<div class="sample" style="column-fill:auto">
  <h4>column-fill: auto</h4>
  <p>(略)</p>
</div>
<div class="sample" style="column-fill:auto; height:12em">
  <h4>column-fill: auto で高さを12em にしたもの</h4>
  <p>(略)</p>
</div>

CSSはこちら。(マルチカラム関連の指定はハイライトしています)

.sample {
	column-count:3;
	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:1rem;
	margin:0 0 .5em 0;
	background:#c5c56a;
	padding:.5em .8em .4em;
	line-height:1.2em;
	border-radius:1.2em;
	column-span: all}

次回予告

次回はちょっとメモで、マルチカラムの「カラム幅」や「カラム数」を決める計算式を紹介します。これは別に知らなくてもいいことなのでメモと言うより余談ですw

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

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

関連記事

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

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

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

スポンサーリンク

スポンサーリンク
最新記事
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.