【59-2】カラム間の罫線の幅を指定する column-rule-width

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

マルチカラムの各カラム間の罫線に関するプロパティの続きです。
今回は column-rule-widthプロパティを使ってみよう。

前回の column-rule-styleプロパティは、各カラムの間の罫線の「スタイル」を決めるんでしたね。
これはデフォルト値が「none」や、罫線非表示の「hidden」以外の値を指定すれば罫線が表示されるんでした。

そのときの罫線の「幅」は「medium(中くらいの太さ。3px)」になっています。
「medium」が column-rule-widthプロパティのデフォルト値だから。
罫線の「幅」を変えたいなら column-rule-widthプロパティで「medium」以外の値を指定します。

本日のINDEX
  1. column-rule-widthプロパティの値
  2. column-rule-widthプロパティを使ってみる
  3. 罫線は column-gap とレイヤーっぽく重なっている

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

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

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

column-rule-widthプロパティ
キーワード medium(ミディアム、中くらいの線。3px)がデフォルト値。
thin(細い線。1px)、
thick(太い線。5px)
<length> 正の数値に単位(px, em, rem など)を付けて指定(マイナスの値不可)
グローバル値 inherit; 親の値を継承
initial; 継承した親の値を解消しデフォルト値に戻す
unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作
値の継承 しない 適用できる要素 マルチカラムのコンテナ
(column-count, column-width, columns を指定した要素)

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

値の thin、medium、thick のキーワードと、px や em の単位を付けた数値で指定してみます。
線のスタイル(column-rule-style)はすべて solid(実線)にしています。

thin
マルチカラムの罫線が、column-rule-styleプロパティで表示されたら、column-rule-widthプロパティでその太さを指定することができます。値はデフォルトがmedium。その他thin、thickのキーワードか、単位付きの数値で線幅を指定できます。

medium(デフォルト値)
マルチカラムの罫線が、column-rule-styleプロパティで表示されたら、column-rule-widthプロパティでその太さを指定することができます。値はデフォルトがmedium。その他thin、thickのキーワードか、単位付きの数値で線幅を指定できます。

thick
マルチカラムの罫線が、column-rule-styleプロパティで表示されたら、column-rule-widthプロパティでその太さを指定することができます。値はデフォルトがmedium。その他thin、thickのキーワードか、単位付きの数値で線幅を指定できます。

7px
マルチカラムの罫線が、column-rule-styleプロパティで表示されたら、column-rule-widthプロパティでその太さを指定することができます。値はデフォルトがmedium。その他thin、thickのキーワードか、単位付きの数値で線幅を指定できます。

0.5em
マルチカラムの罫線が、column-rule-styleプロパティで表示されたら、column-rule-widthプロパティでその太さを指定することができます。値はデフォルトがmedium。その他thin、thickのキーワードか、単位付きの数値で線幅を指定できます。

サンプルのHTMLはこちら。

<div class="sample sample1">
<p>
<b>thin</b><br>
マルチカラムの罫線が、column-rule-styleプロパティで表示されたら、column-rule-width
プロパティでその太さを指定することができます。値はデフォルトがmedium。その他thin、
thickのキーワードか、単位付きの数値で線幅を指定できます。</p>
</div>
<div class="sample sample2"> <!--クラス名を sample2.3.4..と変えていってます-->
<!--略-->
<div>
<div class="sample sample3">
<!--略-->
<div>
<div class="sample sample4">
<!--略-->
<div>
<div class="sample sample5">
<!--略-->
<div>

サンプルのCSSはこちら。

.sample {
	column-count:2;
	column-gap:2em;
	column-rule-style:solid;
    text-align:justify; /*罫線が入るとカラムの左右が揃ってないと変なので*/
	margin:1em 0;
	border:solid 1px #ccc;
	padding:1em}
.sample p {
	line-height:1.4em;
    margin:0}
.sample1 {column-rule-width:thin}
.sample2 {column-rule-width:medium}
.sample3 {column-rule-width:thick}
.sample4 {column-rule-width:7px}
.sample5 {column-rule-width:.5em}

罫線は column-gap とレイヤーっぽく重なっている

ここまでのサンプルを見て気がついたかもしれませんが、カラム間に罫線を入れても、罫線を太くしても、カラム同士の空き(column-gap)が広がったりしませんね。

column-rule と column-gap との関係は、「border」と「margin や padding」との関係と違って、レイヤーっぽく重なっているので罫線が太くなっても空きが広がったりしません。

サンプルで試してみます。
column-gapの領域がわかりやすいように <p>要素に背景色をつけています。
(background:#rgba(255,204,204,.5) と指定。ピンクの半透明です)
まだ column-rule-width を指定していないので、幅は「meium」。
column-gap は「2em」にしています。

無指定(meium)
マルチカラムの罫線は、column-gapとレイヤー状に重なっています。そのため罫線を太くしてもカラム間の空きが広がったりすることはありません。

下のサンプルでは、column-gap: 2em; column-rule-width: 2em; と指定。
カラム間の空きと罫線を同じ幅にしました。
column-gapは広がっていませんね。ギャップのスペースに罫線が収まっています。

2em
マルチカラムの罫線は、column-gapとレイヤー状に重なっています。そのため罫線を太くしてもカラム間の空きが広がったりすることはありません。

column-gapよりも罫線の幅を太くしたらどうなるでしょう?
下のサンプルでは、column-gap:2em; column-rule-width:5em; と指定。

5em
マルチカラムの罫線は、column-gapとレイヤー状に重なっています。そのため罫線を太くしてもカラム間の空きが広がったりすることはありません。

罫線が column-gapより太いと、当然はみ出します。

構造的には下図のように、罫線より上に カラム指定をした要素が乗っかっています。
カラム間の空き(column-gap)は当然、罫線の上になります。
こんな構造なので、罫線の有無や罫線の太さによって column-gap が影響を受けることがないんですね。

上のサンプルは <p>要素に背景色をつけているので文字が読めますが、
背景色がなければ、下のサンプルように文字が読めなくなる場合があるので注意が必要。
(罫線の色はデフォルトで文字色なので)

5em
マルチカラムの罫線は、column-gapとレイヤー状に重なっています。そのため罫線を太くしてもカラム間の空きが広がったりすることはありません。

罫線の色を薄くすれば読めます。
(まあ gapより罫線を太くすることは、めったに無いだろうけどw)

5em
マルチカラムの罫線は、column-gapとレイヤー状に重なっています。そのため罫線を太くしてもカラム間の空きが広がったりすることはありません。

マルチカラムの罫線の「色」を変えるには column-rule-colorプロパティを使います。

次回予告

というわけで次回は、column-rule-colorプロパティを使ってカラムの罫線の「色」を変えてみよう。

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

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

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

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

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

スポンサーリンク

コメントの投稿

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

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

yuki★hata

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

メールフォームはこちら

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