column-rule プロパティ

最終更新：2026-09-13

column-rule column-rule プロパティ

column-rule プロパティは column-rule-width、column-rule-style、column-rule-color の略記であり、複数列レイアウトの列と列の間に区切り線を描画します。border と同様に、列間隔の内部にのみ描画され、複数列テキストの視覚的な区切りを強調します。

カテゴリ
初期値	medium none currentcolor
継承	いいえ
適用対象
アニメーションタイプ
CSS バージョン	CSS3
状態	標準

📝 構文

column-rule: <column-rule-width> || <column-rule-style> || <column-rule-color>;

⚙️ 値

値	タイプ	説明
`<column-rule-width> \|\| <column-rule-style> \|\| <column-rule-color>`	値	列の区切り線の略記。

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
column-rule	✓ v57	✓ v12	✓ v52	✓ v10.1	✓ v44
すべての主要ブラウザーでサポート

ヒント： column-rule の構文は border を反映しています。3 つの値は任意の順序で指定できますが、線を描画するには style を指定する必要があります。

注意： column-rule は複数列レイアウトでのみ表示されます。1 列の場合は線は表示されません。線の幅は列幅を消費しません。列間隔の中央に描画されます。

❓ よくある質問

Qcolumn-rule と border の違いは何ですか？

Aborder は要素の 4 辺の周りに描画され、ボックス全体を囲みます。column-rule は隣接する列を区切るために列間隔にのみ描画され、最も外側の端には決して表示されません。また、column-rule は間隔領域の内部に描画されるため余分なスペースを取らず、その幅が列を圧縮することはありません。構文は border と同様で、width、style、color があります。

Q区切り線を破線にするにはどうすればよいですか？

Acolumn-rule-style を dashed または dotted に設定します（例：column-rule: 2px dashed #999）。style は border がサポートするすべての線型（solid、dashed、dotted、double など）を受け付けます。style を指定する必要がある点に注意してください。デフォルトは none で、指定しない限り幅や色をどう設定しても線は描画されません。控えめな見た目には、薄い灰色の 1px 実線で十分なことが多いです。

Qcolumn-rule の 3 つのサブプロパティはどう機能しますか？

Acolumn-rule の略記は 3 つのサブプロパティをカバーします。width（例：1px）、線を描画するために必要な style（例：solid や dashed）、そしてデフォルトが currentcolor の color です。3 つの値は任意の順序で記述できるため、column-rule: #ccc 1px solid も同様に有効です。border と同様に、未設定のサブプロパティは初期値に戻るため、不完全な宣言でも使用可能な線が描画されます。

Qcolumn-rule が表示されないのはなぜですか？

A一般的な理由：1つ目は column-rule-style が設定されておらず、デフォルトの none では線が描画されないことです。2つ目は、コンテナが実際に複数列になっていないことです（1 列では描画する間隔がないため）。コンテンツが十分に長く、column-count または column-width が効いていることを確認してください。3つ目は、線が間隔内に位置するため、column-gap:0 では見えなくなることです。この 3 点を順に確認してください。