CSS辞典 column-ruleプロパティ、column-rule-widthプロパティ、column-rule-styleプロパティ、column-rule-colorプロパティの解説

段組みの罫線の幅とスタイルと色を一括で指定できる「column-rule」プロパティ、段組みの罫線の幅を指定する「column-rule-width」プロパティ、段組みの罫線のスタイルを指定する「column-rule-style」プロパティ、段組みの罫線の色を指定する「column-rule-color」プロパティの使用方法を記載

対応バージョン：CSS3／2.1

対応ブラウザ
column-ruleプロパティ
- 概要・使用方法
- 指定できる値
column-rule-widthプロパティ
- 概要・使用方法
- 指定できる値（列数）
column-rule-styleプロパティ
- 概要・使用方法
- 指定できる値（スタイル）
column-rule-colorプロパティ

対応ブラウザ

column-ruleプロパティ

初期値	-widthプロパティ、-styleプロパティ、-colorプロパティに従う
適用される要素	段組みされた要素
モジュール	CSS Multi-column Layout Module
継承	なし

概要・使用方法

{ column-rule: -width -style -color;}

column-ruleプロパティは、段組みの各段の間に表示する罫線のプロパティをまとめて指定できる。

指定できる値

指定できる値は各プロパティと同様です。半角スペースで区切って指定できます。順序は順不同です。

column-rule-widthプロパティ

初期値	medium
適用される要素	段組みされた要素
モジュール	CSS Multi-column Layout Module
継承	なし

概要・使用方法

{ column-rule-width: 幅;}

「column-rule-widthプロパティ」は、段組みの各段の間に表示する罫線の幅を指定します。

指定できる値（列数）

thin	細い罫線が表示されます。
medium	通常の罫線が表示されます。
thick	太い罫線が表示されます。
数値+単位	罫線の幅を単位付きの数値で指定します。

詳しい数値+単位付きについて以下を参照

CSS辞典単位付きの数字

column-rule-styleプロパティ

初期値	none
適用される要素	段組みされた要素
モジュール	CSS Multi-column Layout Module
継承	なし

概要・使用方法

{ column-rule-style: スタイル;}

「column-rule-styleプロパティ」は、段組みの各段の間に表示する罫線のスタイルを指定します。

指定できる値（スタイル）

none	ボーダーは表示されません。 ※他のボーダーと重なる場合は他の値が優先されます。
hidden	noneと同様に表示されません。 ※他のボーダーと重なる場合、hiddenが優先されます。
dotted	点線で表示されます。
dashed	破線で表示されます。
solid	1本の実線で表示されます。
double	２本の実線で表示されます。最低、ボーダーの幅が3px以上必要になります。
groove	立体的にくぼんだ線のような表示になります。
ridge	立体的に浮き出るような線の表示になります。
inset	四辺すべてに指定すると、ボーダーの内部が立体的にくぼんだような表示になります。
outset	四辺すべてに指定すると、ボーダーの内部が立体的に浮き出るような表示になります。

column-rule-colorプロパティ

初期値	colorプロパティ値
適用される要素	段組みされた要素
モジュール	CSS Multi-column Layout Module
継承	なし

概要・使用方法

{ column-rule-color: 色;}

「column-rule-colorプロパティ」は、段組みの各段の間に表示する罫線の色を指定します。

指定できる値（色）

色	罫線の色をキーワード、rgb()、rgba()によるRGBカラー、hsl()、hsla()によるHSLカラー、またはカラーコードで指定できます。

色の詳しい指定方法は以下を参照

CSS辞典色（カラー）の指定方法

サンプルコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>columns-ruleプロパティ CSSフォントサンプルページ</title>
    <meta charset="uft-8">
    <style>
    .sample-columns-rule {
       column-count: 2 ;
       column-rule:1em dotted red;
    }
    .sample-columns-type1 {
       column-count: 2 ;
       column-rule-width:thick;
       column-rule-style:dotted;
       column-rule-color:red;
    }
    .sample-columns-type2 {
       column-count: 2 ;
       column-rule-width:thick;
       column-rule-style:dashed;
       column-rule-color:red;
    }
    .sample-columns-type3 {
       column-count: 2 ;
       column-rule-width:thick;
       column-rule-style:solid;
       column-rule-color:red;
    }
    .sample-columns-type4 {
       column-count: 2 ;
       column-rule-width:thick;
       column-rule-style:double;
       column-rule-color:red;
    }
    .sample-columns-type5 {
       column-count: 2 ;
       column-rule-width:thick;
       column-rule-style:groove;
       column-rule-color:red;
    }
    .sample-columns-type6 {
       column-count: 2 ;
       column-rule-width:thick;
       column-rule-style:ridge;
       column-rule-color:red;
    }
     .sample-columns-type7 {
       column-count: 2 ;
       column-rule-width:thick;
       column-rule-style:inset;
       column-rule-color:red;
    }
    .sample-columns-type8 {
       column-count: 2 ;
       column-rule-width:thick;
       column-rule-style:outset;
       column-rule-color:red;
    }
    
    </style>
  </head>
  <body>
      <p>columns-rule</p>
      <p class="sample-columns-rule">レオナルドの伝記に記されている以外に知られていない。彼女はおそらく裕福なフィレンツェの承認、フランスチェスコ・デル・ジョコンドの妻、リサ・ゲラルディーニであった。それ故にラ・ジョコンダという別の作品タイトルとなっているのだろう。</p>
      <p>dotted</p>
      <p class="sample-columns-type1">レオナルドの伝記に記されている以外に知られていない。彼女はおそらく裕福なフィレンツェの承認、フランスチェスコ・デル・ジョコンドの妻、リサ・ゲラルディーニであった。それ故にラ・ジョコンダという別の作品タイトルとなっているのだろう。</p>
      <p>dashed</p>
      <p class="sample-columns-type2">「Monna」はミセスという意味である。この肖像画に書かれた頃にジョコンドは新しい屋敷を購入しており、また、1502年に夫婦の第三子が誕生している。どちらも肖像画を依頼する妥当な理由である。</p>
      <p>solid</p>
      <p class="sample-columns-type3">モナ・リザは腰かけた姿勢、そして半身像で描かれているが、このようなポーズはイタリアの肖像画では、ほんとんど前例がない。前例がないことがまた神秘的でもあり、前例がないことをした理由を考察したくなる。</p>
      <p>double</p>
      <p class="sample-columns-type4">レオナルドの伝記に記されている以外に知られていない。彼女はおそらく裕福なフィレンツェの承認、フランスチェスコ・デル・ジョコンドの妻、リサ・ゲラルディーニであった。それ故にラ・ジョコンダという別の作品タイトルとなっているのだろう。</p>
      <p>groove</p>
      <p class="sample-columns-type5">「Monna」はミセスという意味である。この肖像画に書かれた頃にジョコンドは新しい屋敷を購入しており、また、1502年に夫婦の第三子が誕生している。どちらも肖像画を依頼する妥当な理由である。</p>
      <p>ridge</p>
      <p class="sample-columns-type6">モナ・リザは腰かけた姿勢、そして半身像で描かれているが、このようなポーズはイタリアの肖像画では、ほんとんど前例がない。前例がないことがまた神秘的でもあり、前例がないことをした理由を考察したくなる。</p>
      <p>inset</p>
      <p class="sample-columns-type7">レオナルドの伝記に記されている以外に知られていない。彼女はおそらく裕福なフィレンツェの承認、フランスチェスコ・デル・ジョコンドの妻、リサ・ゲラルディーニであった。それ故にラ・ジョコンダという別の作品タイトルとなっているのだろう。</p>
      <p>outset</p>
      <p class="sample-columns-type8">「Monna」はミセスという意味である。この肖像画に書かれた頃にジョコンドは新しい屋敷を購入しており、また、1502年に夫婦の第三子が誕生している。どちらも肖像画を依頼する妥当な理由である。</p>
  </body>
</html>

columns-rule

レオナルドの伝記に記されている以外に知られていない。彼女はおそらく裕福なフィレンツェの承認、フランスチェスコ・デル・ジョコンドの妻、リサ・ゲラルディーニであった。それ故にラ・ジョコンダという別の作品タイトルとなっているのだろう。

dotted

dashed

「Monna」はミセスという意味である。この肖像画に書かれた頃にジョコンドは新しい屋敷を購入しており、また、1502年に夫婦の第三子が誕生している。どちらも肖像画を依頼する妥当な理由である。

solid

モナ・リザは腰かけた姿勢、そして半身像で描かれているが、このようなポーズはイタリアの肖像画では、ほんとんど前例がない。前例がないことがまた神秘的でもあり、前例がないことをした理由を考察したくなる。

double

groove

ridge

inset

outset