【59-4】カラム間の罫線をまとめて指定する column-rule

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

マルチカラムの各カラム間の罫線に関するプロパティの続きです。
今回は、罫線関連を一括指定する column-ruleショートハンドプロパティを使おう。
罫線の「スタイル・幅・色」をこのプロパティでまとめて指定できます。

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

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

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

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

column-ruleプロパティ
キーワード スタイル・幅・色それぞれのデフォルト値がデフォルト値。
column-rule-style: none
column-rule-width: medium
column-rule-color: currentcolor
構文 <'column-rule-style'> || <'column-rule-width'> || <'column-rule-color'>
||(二重バー)はすべて省略可能で1つは必要、順不同という意味。
*構文についての詳細は CSSの値の定義構文 | MDN をご覧ください。
グローバル値 inherit; 親のcolumnsの値を継承
initial; 継承した親の columnsの値を解消しデフォルト値に戻す
unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作
値の継承 しない 適用できる要素 マルチカラムのコンテナ
(column-count, column-width, columns を指定した要素)

指定の仕方は、borderプロパティと同じで、「スタイル」「幅」「色」を順不同で「半角スペース」で区切って並べるだけ。
値は3つとも書いても、2個でも、1個でもOK。
borderプロパティはこちら→【13-1】borderと borderのショートハンド

値を 2個か 1個にした場合、省略した値はデフォルト値になります。
(これ↑は全ショートハンドで同じルールです)

ですので少なくとも「スタイル」だけは書いておかないと、column-rule-style のデフォは「none」なので、罫線が表示されないよ。

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

では、column-ruleプロパティを使っていろいろ指定してみます。
スタイル・幅・色の3つの指定が1行で済むのでとってもラク。
borderプロパティと同じように、もうこのプロパティしか使わなそう。

column-rule: double pink
マルチカラムの罫線は、スタイル・幅・色を全部まとめて、ショートハンドプロパティの column-rule で指定できます。 値は最低1個でもOK。省略された値はそれぞれのデフォルト値になります。スタイルのデフォはnoneなので、スタイルを指定しないと表示されません。

column-rule: beige 0.7em dotted
マルチカラムの罫線は、スタイル・幅・色を全部まとめて、ショートハンドプロパティの column-rule で指定できます。 値は最低1個でもOK。省略された値はそれぞれのデフォルト値になります。スタイルのデフォはnoneなので、スタイルを指定しないと表示されません。

column-rule: #aacf53 solid thick
マルチカラムの罫線は、スタイル・幅・色を全部まとめて、ショートハンドプロパティの column-rule で指定できます。 値は最低1個でもOK。省略された値はそれぞれのデフォルト値になります。スタイルのデフォはnoneなので、スタイルを指定しないと表示されません。

column-rule: dashed
マルチカラムの罫線は、スタイル・幅・色を全部まとめて、ショートハンドプロパティの column-rule で指定できます。 値は最低1個でもOK。省略された値はそれぞれのデフォルト値になります。スタイルのデフォはnoneなので、スタイルを指定しないと表示されません。

column-rule: solid hsla(210,80%,80%)
マルチカラムの罫線は、スタイル・幅・色を全部まとめて、ショートハンドプロパティの column-rule で指定できます。 値は最低1個でもOK。省略された値はそれぞれのデフォルト値になります。スタイルのデフォはnoneなので、スタイルを指定しないと表示されません。

サンプルのHTMLはこちら。

<div class="sample sample1">
<p>
<b>column-rule:double pink</b><br>
マルチカラムの罫線は、スタイル・幅・色を全部まとめて、ショートハンドプロパティの 
column-rule で指定できます。値は最低1個でもOK。省略された値はそれぞれのデフォルト
値になります。スタイルのデフォはnoneなので、スタイルを指定しないと表示されません。</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;
    text-align:justify; /*罫線が入るとカラムの左右が揃ってないと変なので*/
	margin:1em 0;
	border:solid 1px #ccc;
	padding:1em}
.sample p {
	line-height:1.4em;
	margin:0}
.sample1 {column-rule:double pink}
.sample2 {column-rule:beige 0.7em dotted}
.sample3 {column-rule:#aacf53 solid thick}
.sample4 {column-rule:dashed}
.sample5 {column-rule:solid hsla(210,80%,80%)}

次回予告

マルチカラムの各カラム間の「罫線」に関するプロパティはこれで終わりです。

次回は、マルチカラム内で段抜きができる column-spanプロパティを使ってみよう。

段抜きとは、段組みレイアウトの中で、タイトル文字などを複数の段にまたがらせるヤツです。

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

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

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

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

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

スポンサーリンク

コメントの投稿

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

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

yuki★hata

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

メールフォームはこちら

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