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にまとめました。ご利用ください)

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

【59-1】カラム間の罫線のスタイルを指定する column-rule-style

最終更新日:2020年07月04日  (初回投稿日:2020年07月03日)

マルチカラムの続きです。
column-rule-styleプロパティは、各カラムの間に罫線を入れることができます。

rule(ルール)」はもとは「定規じょうぎ(=ものさし)」のことで、そこから「規則」「ルール」という意味で使われますが、印刷用語では「罫線」を指します。

カラムの罫線のために4つのプロパティが用意されています。
column-rule-styleプロパティ(罫線の「スタイル」を指定)
column-rule-widthプロパティ(罫線の「幅」を指定)
column-rule-colorプロパティ(罫線の「色」を指定)
column-ruleショートハンドプロパティ(上記3つの値をまとめて指定)

マルチカラムの罫線を表示したければ、罫線の「スタイル」を指定する column-rule-styleプロパティの値を none と hidden 以外にすればOK。
というわけで今回はまず、column-rule-styleプロパティを使ってみよう。

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

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

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

column-rule-styleプロパティの値は全部キーワードです。
borderプロパティと同じキーワードなので覚えやすいですね。

column-rule-styleプロパティ
キーワード none がデフォルト値。罫線は非表示(幅(column-rule-width)が0なんだそうです)
hidden = 罫線は表示されず幅(column-rule-width)が0になる。none との違いは、テーブルセルなどの他の罫線が重なっている時、noneは他の罫線が優先されるが、hiddenはこっちの値が優先されるんだそうです。
solid = 実線
double = 二重線
dashed = 破線
dotted = 点線
groove = 立体的で凹んで見える線
ridge = 立体的で出っ張って見える線
inset = これで囲むことによってボックスが凹んで見える線
outset = これで囲むことによってボックスが出っ張って見える線
グローバル値 inherit; 親の値を継承
initial; 継承した親の値を解消しデフォルト値に戻す
unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作
値の継承 しない 適用できる要素 マルチカラムのコンテナ
(column-count, column-width, columns を指定した要素)

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

column-rule-styleプロパティデフォルト値は「none」です。
前回までのサンプルでは、このプロパティを指定していないので、デフォルトの column-rule-style: none になっていて、罫線は非表示でした。

というわけで、column-rule-styleプロパティの値を none と hidden 以外に指定してやれば罫線が表示されるのよね。

どんな罫線が表示されるのか、none と hidden 以外を全部使ってみます。

サンプルでは column-rule-styleプロパティのみ指定して、罫線のは指定していません。
罫線のは、指定しなければそれぞれデフォルト値になります。
色は「currentColor(文字色)」線幅は「ミディアム」がデフォルトです。
(罫線のの指定については、次回以降に書きます)

solid
マルチカラムの罫線(column-rule)は、column-rule-styleプロパティのデフォルト値が「none」なので、 column-rule-styleプロパティを none, hidden 以外に指定しなければ表示されません。値はすべてキーワード。実線なら solid、点線なら dotted などと、borderプロパティと同じキーワードで指定できます。

double
マルチカラムの罫線(column-rule)は、column-rule-styleプロパティのデフォルト値が「none」なので、 column-rule-styleプロパティを none, hidden 以外に指定しなければ表示されません。値はすべてキーワード。実線なら solid、点線なら dotted などと、borderプロパティと同じキーワードで指定できます。

dashed
マルチカラムの罫線(column-rule)は、column-rule-styleプロパティのデフォルト値が「none」なので、 column-rule-styleプロパティを none, hidden 以外に指定しなければ表示されません。値はすべてキーワード。実線なら solid、点線なら dotted などと、borderプロパティと同じキーワードで指定できます。

dotted
マルチカラムの罫線(column-rule)は、column-rule-styleプロパティのデフォルト値が「none」なので、 column-rule-styleプロパティを none, hidden 以外に指定しなければ表示されません。値はすべてキーワード。実線なら solid、点線なら dotted などと、borderプロパティと同じキーワードで指定できます。

groove
マルチカラムの罫線(column-rule)は、column-rule-styleプロパティのデフォルト値が「none」なので、 column-rule-styleプロパティを none, hidden 以外に指定しなければ表示されません。値はすべてキーワード。実線なら solid、点線なら dotted などと、borderプロパティと同じキーワードで指定できます。

ridge
マルチカラムの罫線(column-rule)は、column-rule-styleプロパティのデフォルト値が「none」なので、 column-rule-styleプロパティを none, hidden 以外に指定しなければ表示されません。値はすべてキーワード。実線なら solid、点線なら dotted などと、borderプロパティと同じキーワードで指定できます。

inset
マルチカラムの罫線(column-rule)は、column-rule-styleプロパティのデフォルト値が「none」なので、 column-rule-styleプロパティを none, hidden 以外に指定しなければ表示されません。値はすべてキーワード。実線なら solid、点線なら dotted などと、borderプロパティと同じキーワードで指定できます。

outset
マルチカラムの罫線(column-rule)は、column-rule-styleプロパティのデフォルト値が「none」なので、 column-rule-styleプロパティを none, hidden 以外に指定しなければ表示されません。値はすべてキーワード。実線なら solid、点線なら dotted などと、borderプロパティと同じキーワードで指定できます。

groove, ridge, inset, outset は、単なる実線に見えます。この4つは、線の色が濃すぎたり幅が狭いと立体的に見えないんです。
色や幅を変えるとこんな感じ(<div>要素にborderプロパティで指定)

groove
ridge
inset
outset

ということで、罫線の色を column-rule-colorプロパティで変えて、幅も column-rule-widthプロパティで太くしてみました。
(ま、1本線なので あんまりパッとしませんけどねw)

groove
マルチカラムの罫線(column-rule)は、column-rule-styleプロパティのデフォルト値が「none」なので、 column-rule-styleプロパティを none, hidden 以外に指定しなければ表示されません。値はすべてキーワード。実線なら solid、点線なら dotted などと、borderプロパティと同じキーワードで指定できます。

ridge
マルチカラムの罫線(column-rule)は、column-rule-styleプロパティのデフォルト値が「none」なので、 column-rule-styleプロパティを none, hidden 以外に指定しなければ表示されません。値はすべてキーワード。実線なら solid、点線なら dotted などと、borderプロパティと同じキーワードで指定できます。

inset
マルチカラムの罫線(column-rule)は、column-rule-styleプロパティのデフォルト値が「none」なので、 column-rule-styleプロパティを none, hidden 以外に指定しなければ表示されません。値はすべてキーワード。実線なら solid、点線なら dotted などと、borderプロパティと同じキーワードで指定できます。

outset
マルチカラムの罫線(column-rule)は、column-rule-styleプロパティのデフォルト値が「none」なので、 column-rule-styleプロパティを none, hidden 以外に指定しなければ表示されません。値はすべてキーワード。実線なら solid、点線なら dotted などと、borderプロパティと同じキーワードで指定できます。

サンプルのHTMLはこちら。(冒頭の8個並んだやつ)

<div class="sample sample1">
<p><b>solid</b><br>
マルチカラムの罫線(column-rule)は、column-rule-styleプロパティのデフォルト値
が「none」なので、column-rule-styleプロパティを none, hidden 以外に指定しなけ
れば表示されません。値はすべてキーワード。実線なら solid、点線なら dotted など
と、borderプロパティと同じキーワードで指定できます。</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>
<div class="sample sample6">
<!--略-->
<div>
<div class="sample sample7">
<!--略-->
<div>
<div class="sample sample8">
<!--略-->
<div>

サンプルのCSSはこちら。(冒頭の8個並んだやつ)

.sample { /*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-style:solid}
.sample2 {column-rule-style:double}
.sample3 {column-rule-style:dashed}
.sample4 {column-rule-style:dotted}
.sample5 {column-rule-style:groove}
.sample6 {column-rule-style:ridge}
.sample7 {column-rule-style:inset}
.sample8 {column-rule-style:outset}

次回予告

それじゃあ次回は、カラムの罫線の「幅」を指定する column-rule-widthプロパティを使ってみましょう。
(その次の回は「色」を指定する column-rule-colorプロパティです)

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

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

関連記事

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

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

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

スポンサーリンク

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