CSS プロパティ column-rule-style: 多段組みレイアウトの区切り線のスタイルをカスタマイズする
column-rule-style プロパティは、多段組みレイアウトでカラムとカラムの間に表示される区切り線のスタイル（線種、線の太さ、色など）を設定するために使用します。このプロパティでは、実線、破線、点線など、さまざまな線種を設定できます。また、 column-rule-width および column-rule-color プロパティと組み合わせて使用することで、区切り線を完全に制御できます。
目次
文法と値
column-rule-style プロパティの構文は以下のとおりです。
column-rule-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset;
各値の意味は以下のとおりです。
| 値 | 説明 |
|---|---|
none |
境界線なし（デフォルト値） |
hidden |
境界線を非表示にする |
dotted |
点線 |
dashed |
破線 |
solid |
実線 |
double |
二重線 |
groove |
溝（周囲が明るい色の凹んだ線） |
ridge |
隆起（周囲が暗い色の浮き出た線） |
inset |
埋め込み（周囲が暗い色の凹んだ線） |
outset |
浮き出し（周囲が明るい色の浮き出た線） |
他の column-rule プロパティとの関係
column-rule-style プロパティは、以下の column-rule 関連プロパティと組み合わせて使用できます。
column-rule-width: 区切り線の幅を設定します。column-rule-color: 区切り線のの色を設定します。column-rule: 上記3つのプロパティを同時に設定するための省略形です。
ブラウザの対応状況
| ブラウザ | バージョン | |---|---| | Chrome | 3以上 | | Firefox | 3.5以上 | | Safari | 3以上 | | Edge | 12以上 | | Internet Explorer | 10以上 |Internet Explorer 9 以前では、このプロパティはサポートされていません。
使用例
コード例 1: column-rule-style を使用して、破線の区切り線を持つ2段組みレイアウトを作成します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>column-rule-style の使用例</title>
<style>
.container {
column-count: 2;
column-rule-style: dashed;
column-rule-width: 2px;
column-rule-color: blue;
}
</style>
</head>
<body>
<div class="container">
<p>第1カラムの内容...</p>
<p>第1カラムの内容...</p>
<p>第2カラムの内容...</p>
<p>第2カラムの内容...</p>
</div>
</body>
</html>
コード例 2: 省略形の column-rule プロパティを使用して、赤い実線の区切り線を持つ3段組みレイアウトを作成します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>column-rule の使用例</title>
<style>
.container {
column-count: 3;
column-rule: 1px solid red;
}
</style>
</head>
<body>
<div class="container">
<p>第1カラムの内容...</p>
<p>第1カラムの内容...</p>
<p>第2カラムの内容...</p>
<p>第2カラムの内容...</p>
<p>第3カラムの内容...</p>
<p>第3カラムの内容...</p>
</div>
</body>
</html>
注意点
column-rule-styleプロパティは、多段組みレイアウトでのみ有効です。column-countまたはcolumn-widthプロパティと組み合わせて使用する必要があります。- 区切り線のの色とスタイルは、
colorプロパティの設定を継承します。
よくある質問
質問 1: column-rule-style プロパティを設定しても区切り線が表示されないのはなぜですか？
回答: 考えられる原因は以下のとおりです。
column-countまたはcolumn-widthプロパティが設定されていないため、多段組みレイアウトになっていない。column-rule-widthプロパティの値が0になっている。column-rule-colorプロパティの値が背景色と同じになっている。
質問 2: 区切り線のの色を要素のテキストの色とは異なる色に設定するにはどうすればよいですか？
回答: column-rule-color プロパティで区切り線の色を明示的に指定します。
質問 3: 区切り線のスタイルをカスタマイズするための参考資料はありますか？
回答: はい、以下のサイトが参考になります。