ywork2020.com

Title

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

目次 (INDEX)

column-ruleとは

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

目次に戻る

column-ruleプロパティの概要

このプロパティは、段組みの列の間の線の太さ、色、スタイルを設定することができます。

段組みとは段落を2列以上に分けて文字や図などを配列することをいいます。

これは、以下の個別プロパティを一括で設定することができます。

目次に戻る

構文

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

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

目次に戻る

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

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

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

サンプルコード: CSS
<style>
	div{
		background-color: ##khaki;
		border: thin solid ##darkgray;
		padding: 10px;
		width: 95%;
		height: 100px;
		column-count: 6;
	}
	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>

目次に戻る

初期値: medium none currentColor;

段組みの列の間の線のスタイル、太さ、色の各初期値はmedium none currentColorです。

  • 線の太さ: mediumは中くらいの線の太さです。
  • 線のスタイル: noneは「無い」という意味で線は表示されません。
  • 線の色: currentColorはブラウザの既定値です。

詳しい線のスタイル、色、太さは次を参照してください。

テキスト

テキスト

テキスト

テキスト

テキスト

テキスト

div{column-rule: medium none currentColor;}

目次に戻る

列の間の線の太さ: column-rule-width

widthは、線の太さのことです。 このプロパティに対して有効な値は thin, medium, thickのキーワード値か単位付きの数値です。

このサンプルでは線の太さはmediumで中くらいの太さで表示されます。線の種類はsolid、色はdarkslategreyに設定しています。

詳しい線の太さについてはborder-widthを参照してください。

テキスト

テキスト

テキスト

テキスト

テキスト

テキスト

div{column-rule: medium solid ##darkslategrey;}

目次に戻る

列の間の線の種類: column-rule-style

styleは線の種類のことです。 このサンプルではdottedにしています。 見えやすいように太い線を設定しています。

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

テキスト

テキスト

テキスト

テキスト

テキスト

テキスト

div{column-rule: thick dotted ##darkslategrey;}

目次に戻る

列の間の線の色: column-rule-color

colorは線の色のことです。 このサンプルではredにしています。 見えやすいように太い線で設定しています。

詳しい色については色見本を参考にしてください。

テキスト

テキスト

テキスト

テキスト

テキスト

テキスト

div{column-rule: thick double ##red;}

目次に戻る

グローバル値

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

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

目次に戻る

補足説明

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

目次に戻る

まとめ

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

column-rule: medium none currentColor;

column-rule: thin solid darkslategrey;

column-rule: 8px dotted darkslategrey;

column-rule: 1em double red;

テキスト

テキスト

テキスト

テキスト

テキスト

テキスト

テキスト

テキスト

テキスト

テキスト

目次に戻る