このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
column-rule-width
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2017年3月.
column-rule-width は CSS のプロパティで、段組みレイアウトで段間に引かれる線(段間罫)の太さを設定します。
試してみましょう
column-rule-width: thin;
column-rule-width: medium;
column-rule-width: thick;
column-rule-width: 12px;
<section id="default-example">
<p id="example-element">
ロンドン。ミカエル学期の終わり、リンカーンズ・イン・ホールに大法官が座っています。容赦のない 11 月の天候。街は、まるで地球から水が引き始めたばかりのように泥だらけで、ホルボーン・ヒルを象のようなトカゲのようによちよち歩く、体長 12 メートルほどのメガロサウルスに出会っても不思議ではないでしょう。
</p>
</section>
#example-element {
columns: 3;
column-rule: solid;
text-align: left;
}
構文
css
/* キーワード値 */
column-rule-width: thin;
column-rule-width: medium;
column-rule-width: thick;
/* <length> 値 */
column-rule-width: 1px;
column-rule-width: 2.5em;
/* グローバル値 */
column-rule-width: inherit;
column-rule-width: initial;
column-rule-width: revert;
column-rule-width: revert-layer;
column-rule-width: unset;
column-rule-width プロパティは単一の <'border-width'> の値で指定します。
値
<'border-width'>-
border-widthで定められたキーワードで段間罫の太さを指定します。<length>またはthin、medium、thickのキーワードのいずれかです。
公式定義
| 初期値 | medium |
|---|---|
| 適用対象 | 段組み要素 |
| 継承 | なし |
| 計算値 | 絶対的な長さ、列の罫線のスタイルが none か hidden なら 0 |
| アニメーションの種類 | length |
形式文法
column-rule-width =
<line-width-list> |
<auto-line-width-list>
<line-width-list> =
[ <line-width-or-repeat> ] +
<auto-line-width-list> =
[ <line-width-or-repeat> ] * <auto-repeat-line-width> [ <line-width-or-repeat> ] *
<line-width-or-repeat> =
<line-width> |
<repeat-line-width>
<auto-repeat-line-width> =
repeat( auto , [ <line-width> ] + )
<line-width> =
<length [0,∞]> |
thin |
medium |
thick
<repeat-line-width> =
repeat( [ <integer [1,∞]> ] , [ <line-width> ] + )
例
太い段間罫を設定
HTML
html
<p>
これは 3 段に分割されたテキストの束です。 `column-rule-width`プロパティは、段と段の間に引かれる線の太さを変更するために使用されます。すばらしいと思いませんか?
</p>
CSS
css
p {
column-count: 3;
column-rule-style: solid;
column-rule-width: thick;
}
結果
[フレーム]
仕様書
| Specification |
|---|
| CSS Multi-column Layout Module Level 1 # crw |
ブラウザーの互換性
Enable JavaScript to view this browser compatibility table.