【57-2】マルチカラムのカラム幅を決める column-widthプロパティ

最終更新日:2020年11月12日  (初回投稿日:2020年05月04日)

column-widthプロパティは、 マルチカラムでの各カラムの幅を指定します。

前回の column-countプロパティでは、このcolumn-widthプロパティは指定していなかったので値はデフォルトの column-width: auto になっていました。
autoだとブラウザが自動でカラム幅を決めてくれます。

column-widthプロパティでカラム幅を指定しても、カラム同士の間隔(column-gap)やコンテナ全体の幅によって、ブラウザは 柔軟にカラム幅を変えちゃいます。
なので、だいたいのカラム幅を指定して あとはブラウザにお任せって感じになります。

本日のINDEX
  1. column-widthプロパティの値
  2. column-widthプロパティを使ってみる
    1. column-width: 15em と指定したサンプル
    2. column-width: 300px と指定したサンプル
    3. column-width: 40vw と指定したサンプル

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

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

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

column-widthプロパティ
キーワード auto(デフォルト値)
<length> 正の数値に単位(px, em, vw, rem など)を付けて指定(マイナスの値不可)
グローバル値 column-width: inherit; 親の値を継承
column-width: initial; 継承した親の値を解消しデフォルト値に戻す
column-width: unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作
値の継承 しない 適用できる要素 ブロックレベルの要素
ただし table要素の中で使うブロック要素は除く

px, em, rem, vwなどの単位については、こちらをご覧ください。
【7-1】CSSのサイズの単位について(em, %, px, rem の使い分け)

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

column-widthプロパティでの指定してみよう。
いろいろ見てみたいので「em」「px」「vw」でサンプルを作ってみました。

column-width: 15em と指定したサンプル

「em」は フォントサイズの高さを1とする単位で、15emだと15文字分のカラム幅を指定したことになります。
が、 column-width の場合は キッチリ厳密にサイズ指定できるわけではありません。
指定したカラム幅が、使えるスペースに対してちょっと多かったり少なかったりしたら、ブラウザが親コンテナを満たすように伸縮させるので「だいたいそのへんのサイズ」になりますw

今回は、画面幅を変えて見比べるために、別ページでサンプルを作りました。

サンプルはこちら(クリックで別ウィンドウで開きます)

PCやタブレットなどの大きな画面では、ウィンドウ幅によって2カラム、3カラム...とカラム数が増えていきます。
スマホなど幅が狭い画面では1カラムに収まります。

ウィンドウ幅によって自動でカラム数を決めてくれるので めっちゃ便利ですよね。

サンプルファイルにも載せてありますが、サンプルのHTMLはこちらです。

<div class="sample1">
<p>column-widthを使って各カラムの幅を15emにしたサンプルです。<br>
PCサイトではウィンドウ幅を広げるとカラム数が増えていきます。横幅の狭いスマホで
見ているかたは 1カラムになっているはず。</p>
<p>カラム同士の間隔(column-gapプロパティ)は指定していないので値はデフォ
ルトの normal = 1em になります。</p>
</div>

CSSはこちら。

.sample1 {
	margin:2em 0;
	border:solid 1px #ccc;
	padding:1em;
    background:#ffc;
	-webkit-column-width:15em; /*古いブラウザ用*/
	column-width:15em}
.sample1 p {
	text-indent:1em;
	line-height:1.4em;
	margin:1.3em 0 0}
.sample1 p:first-child {margin:0}

column-width: 300px と指定したサンプル

今度は「px」でカラム幅を指定してみます。
ディスプレイのドット1個が 1px とされています。iPhoneの6,7,8の画面(5.5インチ)のCSSピクセルでの横幅は414pxですので、300pxあたりで1カラムになるだろうということでサンプルを作ってみました。

サンプルはこちら(クリックで別ウィンドウで開きます)

これも、PCやタブレットなどの大きな画面では、ウィンドウ幅によって2カラム、3カラム...とカラム数が増えます。
スマホなど幅が狭い画面では1カラムに収まります。

「em」でも「px」でも、ボックスサイズや margin などの指定と違って、キッチリ厳密にサイズ指定するんじゃなく、それに近いサイズになるということです。

サンプルのHTMLはこちらです。

<div class="sample2">
<p>column-widthを使って各カラムの幅を300pxにしたサンプルです。<br>
PCサイトではこちらもウィンドウ幅を広げるとカラム数が増えていきます。
横幅の狭いスマホで見ているかたは 1カラムになっているはず。</p>
<p>カラム同士の間隔(column-gapプロパティ)は指定していないので値はデフォ
ルトの normal = 1em になります。</p>
</div>

CSSはこちら

.sample2 { /*要点のみ。他の指定はsample1と同じです*/
	-webkit-column-width:300px; /*古いブラウザ用。無くてもいいです*/
	column-width:300px}

column-width: 40vw と指定したサンプル

最後にもう一つ「vw」でカラム幅を指定してみます。
「vw」は「viewport width」の略。1vw = ビューポートの幅の 1/100ですので、100vwでビューポートの横幅いっぱいということになります。

単位「vw」については、こちらをご覧ください。
【7-2】CSS3の新しい単位 vw, vh, vmin, vimax について

サンプルでは、column-width: 40vw にしてみました。
画面に対して相対的なので、大画面では2カラム、ほどほどの画面サイズなら1カラムにしてくれて便利です。

サンプルはこちら(クリックで別ウィンドウで開きます)

HTMLはこちら

<div class="sample3">
<p>column-widthを使って各カラムの幅を40vwにしたサンプルです。<br>
PCサイトではウィンドウ幅が広い場合は2カラム、狭い場合は1カラムになります。
横幅の狭いスマホで見ているかたは 1カラムになっているはず。</p>
<p>カラム同士の間隔(column-gapプロパティ)は指定していないので値はデフォ
ルトの normal = 1em になります。</p>
</div>

CSSはこちら

.sample3 { /*要点のみ。他の指定はsample1と同じです*/
	-webkit-column-width:40vw; /*古いブラウザ用。無くてもいいです*/
	column-width:40vw}

次回予告

前回の column-countプロパティは、何が何でも指定したとおりの「カラム数」に分けられるので、小さい画面のスマホでも2カラム、3カラムになってしまいます。メディアクエリなどを使ってスマホ用は1カラムにするなど、ひと手間増えますね。
今回の column-widthプロパティなら、ブラウザが画面サイズに合わせて勝手にカラム数を決めてくれるので、こっちのほうが便利ですね。

ところで、column-countcolumn-width の値を一括で指定できるショートハンドがあるんです。
次回はそのショートハンドプロパティ columnを使ってみよう。

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

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

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

「初心者ですがレンタルサーバーはどこがいい?」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーロリポップ!です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。

スポンサーリンク

コメントの投稿

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

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
02 | 2024/03 | 04
- - - - - 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
Profile

yuki★hata

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

メールフォームはこちら

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