【57-3】カラム数と幅をまとめて指定する columnsショートハンド

最終更新日:2020年08月09日  (初回投稿日:2020年05月21日)

columnsプロパティは、column-countプロパティcolumn-widthプロパティの値をひとまとめに指定できるショートハンドプロパティです。

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

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

【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

columnsプロパティの値

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

columnsプロパティ
キーワード auto がデフォルト値。auto auto と書いてもOK
構文 <'column-width'> || <'column-count'>
||(二重バー)はすべて省略可能で1つは必要、順不同という意味。
*構文についての詳細は CSSの値の定義構文 | MDN をご覧ください。
グローバル値 columns: inherit; 親の値を継承
columns: initial; 継承した親の値を解消しデフォルト値に戻す
columns: unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作
値の継承 しない 適用できる要素 ブロックレベルの要素
ただし table要素の中で使うブロック要素は除く

値の書き方は、column-width と column-count の両方書くなら半角スペース空きで並べます。順不同
単位付きの数値を書いたら column-width の値、単位無しの整数なら column-count の値です。

値は1つだけでもOK。
値を省略した場合、省略した値はデフォルト値になります。
というわけで、こんな感じの指定になります↓

columns: 18em;
columns: auto 18em;  /*上のcolumns: 18em; とまったく同じ指定です*/
columns: 2;
columns: 2 auto;  /*上のcolumns: 2; とまったく同じ指定です*/
columns: auto;
columns: auto auto;  /*上のcolumns: auto; とまったく同じ指定です*/

この columnsショートハンドプロパティの場合、どっちかを auto にしたほうがレイアウトが上手くいくので、どっちかの値だけ書く場合が多いのではないかと思います。

columns: 18em;
columns: 40vw;
columns: 2;

columnsプロパティを使ってみる

columns: 2 は、column-count: 2; column-width: auto と同じ指定になります。
サンプルはこちら。

columnsショートハンドプロパティを使ったサンプルです。columns: 2 と指定したので、カラムの数は2つ、カラム幅は auto になります。

カラム同士の間隔(column-gapプロパティ)は指定していませんので値はデフォルトのnormalになり、マルチカラムレイアウトでは auto=1em になります。

サンプルのHTMLはこちら。

<div class="sample1">
<p>columnsショートハンドプロパティを使ったサンプルです。columns: 2 と
指定したので、カラムの数は2つ、カラム幅は auto になります。</p>
<p>カラム同士の間隔(column-gapプロパティ)は指定していませんので値は
デフォルトのnormalになり、マルチカラムレイアウトでは normal=1em になります。</p>
</div>

サンプルのCSSはこちら。

.sample1 {
	margin:2em 0;
	border:solid 1px #ccc;
	padding:1em;
	-webkit-columns:2;
	columns:2}
.sample1 p {
	text-indent:1em;
	line-height:1.4em;
	margin:1.3em 0 0}
.sample1 p:first-child {margin:0}

ちなみに columns: auto と指定すると、複数カラムになりません(1カラムのまま)
これはすでに「columns: 2 」などとマルチカラムを指定していた要素に対して、メディアクエリなどで マルチカラムをやめたい時に使うと便利そうです。

次回予告

次回は、今までちょくちょく出てきた column-gapプロパティを使ってみます。
これは各カラム間の空きを指定するプロパティです。

column-gapプロパティは、マルチカラムだけでなく、フレックスボックスグリッドレイアウトでも使えます。
(ですのでW3Cで Box Alignment Module というマルチカラムとは別の仕様書に記載されています)

とはいえcolumn-gapプロパティを一番使うのはマルチカラムですので、マルチカラムでの使い方を 次回紹介します。

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

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

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

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

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

スポンサーリンク

コメントの投稿

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

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
07 | 2020/08 | 09
- - - - - - 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.