カラム数の区切り線のスタイルを設定

CSS - column-rule-style

概要

CSSプロパティ「column-rule-style」は、columns プロパティなどで指定された要素のカラム間の区切り線のスタイルを指定します。また、色は、column-rule-color、幅は、column-rule-width を使って指定し、それらをまとめて指定する場合は column-rule プロパティを使用します。

<p class="columns column-rule column-rule-style">明日の天気予報です。明日は全国的に晴れるでしょう。ですが、夕方以降急な雨に注意してください。次に海外の天気予報です。・・・・・・・・・・・・・・・</p>
<style>
p {
  font-size: 12px;
  border: 1px solid #000;
  background-color: #def;
}
.columns {
  column-width: 100px;
  column-count: 2;
  column-rule: 1px solid #000;
}
.column-rule {
  column-rule: 5px solid #000;
}
.column-rule-style {
 column-rule-style: dotted; 
}
</style>

値の指定方法

{column-rule-style: <スタイル>}

指定できるスタイルは以下の通りです。それぞれの表示は border-style で詳しく解説しています。

説明
noneボーダーは表示されません
solid一本線のボーダーが表示されます
dotted1列にならんだドット模様のボーダーが表示されます
dashed破線のボーダーが表示されます
double二本線のボーダーが表示されます
groove立体的で窪んだ線が表示されます
ridge 立体的で隆起した線が表示されます
insetgrooveと似てますが立体的で窪んだ線が表示されます
outsetridgeと似てますが、立体的で隆起した線が表示されます

いくつか異なる値を指定して、表示を確認してみます。

<p class="columns column-rule-style-solid">明日の天気予報です。明日は全国的に晴れるでしょう。ですが、夕方以降急な雨に注意してください。続いて、今月のイベント情報です。今月は東京の目黒川がライトアップされます。</p>
<p class="columns column-rule-style-dotted">明日の天気予報です。明日は全国的に晴れるでしょう。ですが、夕方以降急な雨に注意してください。続いて、今月のイベント情報です。今月は東京の目黒川がライトアップされます。</p>
<p class="columns column-rule-style-double">明日の天気予報です。明日は全国的に晴れるでしょう。ですが、夕方以降急な雨に注意してください。続いて、今月のイベント情報です。今月は東京の目黒川がライトアップされます。</p>
<style>
p {
  font-size: 12px;
  border: 1px solid #000;
  background-color: #def;
}
.columns {
  column-width: 100px;
  column-count: 2;
  column-rule: 5px solid #000;
}
.column-rule-style-solid {
  column-rule-style: solid;
}
.column-rule-style-dotted {
 column-rule-style: dotted;
}
.column-rule-style-double {
 column-rule-style: double;
}
</style>

プロパティの種類について

ショートハンドプロパティや、個別指定できるプロパティなど、columnプロパティをまとめた概要一覧です。詳細はそれぞれのページを参照してみてください。

プロパティ名説明
columns「column-count」と「column-width」を指定できるショートハンドプロパティ
column-countカラム数を指定する
column-widthカラムの幅と指定する
column-rule「column-rule-color」と「column-rule-style」と「column-rule-width」をまとめて指定するショートハンドプロパティ
column-rule-colorカラム間の区切り線の色を指定する
column-rule-styleカラム間の区切り線のスタイルを指定する
column-rule-widthカラム間の区切り線の幅を指定する
column-gapカラム同士の間隔を指定する
column-fillカラム同士の高さをそろえるかどうかを指定する
column-span複数のカラムにまたがる要素に指定する

使用例

このプロパティを使うことで、マルチカラムレイアウトを実装することができます。今までは、一つ一つ組み上げていたものが簡単にできるようになります。

<div class="header">ヘッダー</div>
<div class="multicolumnbox column-rule">
 <div>左カラムです。左カラムに入れたいテキストなどはこの要素内に入れていきます。</div>
 <div>真ん中のカラムです。真ん中カラムに入れたいテキストなどはこの要素内に入れていきます。</div>
 <div>右カラムです。右カラムに入れたいテキストなどはこの要素内に入れていきます。</div>
</div>
<div class="footer">フッター</div>
<style>
.header,
.footer {
  margin: 0px 10px;
  border: 1px solid #000;
}
.multicolumnbox div {
  border: 1px solid #000;
  background-color: #def;
}
.multicolumnbox {
  padding: 10px;
  columns: 3 100px;
  column-fill: auto;
}
.column-rule {
  column-rule-style: solid;
  column-rule-color: red;
  column-rule-width: 3px;
}
</style>

仕様書

関連CSSプロパティ