【CSS Modules】column-rule-styleプロパティの使い方

column-rule-styleプロパティは、CSSの複数列レイアウトにおいて、列（カラム）間の境界線（ルール）のスタイルを指定する値を保持するプロパティです。このプロパティを使用することで、ウェブページ上で記事やテキストコンテンツなどを複数の列に分割した際に、それぞれの列の間に表示される線の見た目を定義できます。

具体的には、境界線を完全に表示しないnoneやhidden、点線を表示するdotted、破線を表示するdashed、実線を表示するsolidといったキーワードでスタイルを設定できます。他にも、二重線を表すdouble、彫り込みのような立体的な線を表すgroove、浮き出しのような立体的な線を表すridge、要素の内側に食い込むような表現のinset、外側に飛び出すような表現のoutsetといった、様々なスタイルが利用可能です。

column-rule-styleプロパティは、単独で使うだけでなく、column-rule-widthプロパティで境界線の太さを、column-rule-colorプロパティで境界線の色を指定することで、列間の境界線をより詳細に制御できます。これら三つのプロパティは、column-ruleというショートハンドプロパティを使って一度に設定することも可能です。複数の情報を視覚的に整理し、読みやすいレイアウトを作成する上で、このプロパティは重要な役割を担います。

Copy
1selector {
2  column-rule-style: solid;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません