ywork2020.com

Title

段組みレイアウトのセパレーターの種類を設定する

目次 (INDEX)

column-rule-styleとは

ここで説明するcolumn-rule-styleとは次の語句からなるCSSのプロパティです。
column
読み: カラム
意味: 列
rule
読み: ルール
意味: 規則、規定
style
読み: スタイル
意味: 様式、スタイル

目次に戻る

column-rule-styleプロパティの概要

このプロパティは、段組みの列の間の線の種類を設定することができます。

段組みとは段落を2列以上に分けて文字や図などを配列することをいいます。 その段組みの列と列の間の線の種類「スタイル」を指定するための個別プロパティです。

線の種類と線の色と線の太さの一括指定プロパティは column-rule (カラムルール) のページを参照してください。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。このプロパティの記述は以下のような書き方になります。

セレクター{column-rule-style: 値;}

目次に戻る

実機サンプルとサンプルコード

ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。

サンプルは親要素にdiv要素を、子要素にはp要素を使用しています。 要素が分かりやすいように境界線と背景色には予め以下の設定をしてコード内に記載しています。

サンプルコード: CSS
<style>
	div{
		background-color: ##khaki;
		border: thin solid ##darkgray;
		padding: 10px;
		width: 95%;
		column-count: 6;
		column-rule: 10px solid ##gray;
	}
	p{
		border: thin solid currentColor;
		background-color: ##lightgreen;
		padding: 3px;
	}
</style>
サンプルコード: HTML
<body>
	<div>
		<p>テキスト</p>
		<p>テキスト</p>
		<p>テキスト</p>
		<p>テキスト</p>
		<p>テキスト</p>
		<p>テキスト</p>
	</div>
</body>

目次に戻る

初期値: none;

初期値はnoneです。

noneは無いという意味で列の間の線は表示されません。

詳しい線の種類についてはborder-styleを参照してください。

テキスト

テキスト

テキスト

テキスト

テキスト

テキスト

div{column-rule-style: none;}

目次に戻る

キワード値: hidden

hidden値は、「隠された」という意味で境界線は表示されません。

テキスト

テキスト

テキスト

テキスト

テキスト

テキスト

div{column-rule-style: hidden;}

目次に戻る

キワード値: dotted

dotted値は、「点付き、点線入り」という意味で丸い点線で表示されます。

テキスト

テキスト

テキスト

テキスト

テキスト

テキスト

div{column-rule-style: dotted;}

目次に戻る

キワード値: dashed

dashed値は「破線」という意味で、連続した四角い線で表示されます。

テキスト

テキスト

テキスト

テキスト

テキスト

テキスト

div{column-rule-style: dashed;}

目次に戻る

キワード値: solid

solid値は、「個体」という意味で1本線で表示されます。

テキスト

テキスト

テキスト

テキスト

テキスト

テキスト

div{column-rule-style: solid;}

目次に戻る

キワード値: double

double値は、「二重、二層」という意味で2本線で表示されます。

テキスト

テキスト

テキスト

テキスト

テキスト

テキスト

div{column-rule-style: double;}

目次に戻る

キワード値: groove

groove値は、「溝、くぼみ」という意味で立体的に窪んだ線で表示されます。

テキスト

テキスト

テキスト

テキスト

テキスト

テキスト

div{column-rule-style: groove;}

目次に戻る

キワード値: ridge

ridge値は、「隆起、尾根」などの意味で立体的に隆起した線で表示されます。

テキスト

テキスト

テキスト

テキスト

テキスト

テキスト

div{column-rule-style: ridge;}

目次に戻る

キワード値: inset

inset値は、「挿入、はめ込み」などの意味ではめ込まれているように表示されます。

この場合段組みの列の間の線のみであり、横の線がないので窪んで見える部分だけの表示となります。

テキスト

テキスト

テキスト

テキスト

テキスト

テキスト

div{column-rule-style:  inset;}

目次に戻る

キワード値: outset

outset値は、「初め、発端」などの意味で出っ張ったように表示されます。

この場合段組みの列の間の線のみであり、横の線がないので出っ張って見える明るい部分だけの表示となります。

テキスト

テキスト

テキスト

テキスト

テキスト

テキスト

div{column-rule-style: outset;}

目次に戻る

グローバル値

column-rule-styleプロパティに対してのグローバルキーワードは以下の3つです。 ただし、このキーワードはブラウザによっては、完全に機能するかは分かりません。

  • inheritは親要素の値の継承を促します。
  • initialは値を初期値の none に戻します。
  • unsetは継承の初期値に戻します。
    ※このプロパティは親要素の値を継承しないのが基本なので、initialと同じ働きをします。
セレクター{column-rule-style: グローバル値;}

目次に戻る

補足説明

  • 段組み要素に適用可能
  • 親要素の値を継承しない

目次に戻る

まとめ

コードの部分をクリックすると、サンプルにCSSが反映されます。

column-rule-style: none;

column-rule-style: hidden;

column-rule-style: dotted;

column-rule-style: dashed;

column-rule-style: solid;

column-rule-style: double;

column-rule-style: groove;

column-rule-style: ridge;

column-rule-style: inset;

column-rule-style: outset;

テキスト

テキスト

テキスト

テキスト

テキスト

テキスト

目次に戻る