ywork2020.com

Title

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

目次 (INDEX)

column-rule-widthとは

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

目次に戻る

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

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

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

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

目次に戻る

構文

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

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

目次に戻る

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

ここからは実際の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>

目次に戻る

初期値: medium;

初期値のmediumキーワードは、いわゆる中くらいの幅の境界線を表示します。幅の寸法はブラウザに依存します。

詳しい線の太さについては border-width (ボーダーウィズ) を参照してください。

テキスト

テキスト

テキスト

テキスト

テキスト

テキスト

div{column-rule-width: medium;}

目次に戻る

キワード値: thin

thinキーワードは、細い幅の境界線を表示します。幅の寸法はブラウザに依存します。

テキスト

テキスト

テキスト

テキスト

テキスト

テキスト

div{column-rule-width: thin;}

目次に戻る

キワード値: thick

thickキーワードは、太い幅の境界線を表示します。幅の寸法はブラウザに依存します。

テキスト

テキスト

テキスト

テキスト

テキスト

テキスト

div{column-rule-width: thick;}

目次に戻る

数値: 単位付き数値での幅の指定

境界線の幅は単位付きの数値で指定することができます。

単位付きの数値に関しては、 CSSの単位について のページを参照してください。なお、このプロパティにはパーセンテージ値は使用できません。

テキスト

テキスト

テキスト

テキスト

テキスト

テキスト

div{column-rule-width: 1em;}

目次に戻る

グローバル値

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

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

目次に戻る

補足説明

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

目次に戻る

まとめ

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

column-rule-width: none;

column-rule-width: hidden;

column-rule-width: dotted;

column-rule-width: dashed;

column-rule-width: solid;

column-rule-width: double;

column-rule-width: groove;

column-rule-width: ridge;

column-rule-width: inset;

column-rule-width: outset;

テキスト

テキスト

テキスト

テキスト

テキスト

テキスト

目次に戻る