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

column-rule-widthプロパティは、CSSの複数列レイアウト（マルチカラムレイアウト）において、各列の間に表示される境界線（ルール線）の幅を保持するプロパティです。このプロパティを使用することで、ウェブページ上でテキストやコンテンツが複数の列に分割されて表示される際に、それぞれの列を区切る線の太さを調整できます。

指定できる値には、具体的な長さを示す値（例えば、1px、0.5em、2ptなどの単位付きの数値）と、あらかじめ定義されたキーワードがあります。キーワードとしては、thin（細い線）、medium（標準的な太さの線）、thick（太い線）が利用可能です。これらのキーワードは、ブラウザによって適切なピクセル値に変換されます。このプロパティの初期値はmediumです。

column-rule-widthプロパティは、column-rule-style（線のスタイル）やcolumn-rule-color（線の色）プロパティと組み合わせて使用することで、列間の線の外観を完全に制御できます。また、これら3つのプロパティは、column-ruleという省略形プロパティを使用して、一度にまとめて設定することも可能です。このプロパティは継承されません。つまり、親要素に設定されたcolumn-rule-widthの値が子要素に自動的に適用されることはありません。ウェブコンテンツの可読性やデザインの質を高める上で重要な役割を果たすプロパティです。

Copy
1column-rule-width: 1px;

引数なし

引数はありません

戻り値なし

戻り値はありません