JavaScriptで列間の罫線の幅を設定する方法
列間の罫線（ルール）の幅を設定するには、columnRuleWidth プロパティを使用します。このプロパティを使うことで、マルチカラムレイアウトにおける列と列の間に引かれる区切り線の太さを、JavaScriptから動的に変更できます。
以下のコードを実行して、JavaScriptで列間の罫線の幅を設定する方法を確認してみましょう。ボタンをクリックすると、罫線の幅が変更されます。
サンプルコード
<!DOCTYPE html>
<html>
<head>
<style>
#myID {
column-count: 4;
column-rule: 4px solid yellow;
}
</style>
</head>
<body>
<p>下のボタンをクリックして幅を変更してください</p>
<button onclick="display()">列間の幅を変更する</button>
<div id="myID">
これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。
これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。
これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。
これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。
これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。
これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。
これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。
</div>
<script>
function display() {
document.getElementById("myID").style.columnRuleWidth = "8px";
}
</script>
</body>
</html>コードの解説
このサンプルでは、まずCSSの column-count プロパティでテキストを4列に分割し、column-rule プロパティで幅4pxの黄色い実線を列間に引いています。
ボタンがクリックされると、display() 関数が呼び出され、style.columnRuleWidth に「8px」を設定することで、罫線の幅が4pxから8pxへと動的に変更されます。
なお、columnRuleWidth プロパティは幅のみを制御します。罫線のスタイル（実線・点線など）や色を変更したい場合は、それぞれ columnRuleStyle や columnRuleColor プロパティを使用してください。
-
CSSのcolumn-rule-widthプロパティで段組みの罫線の太さを設定する方法
CSSで段組み（マルチカラム）レイアウトを作成する際、各カラム（列）の間に表示される罫線（ルールライン）の太さを指定できるのが column-rule-width プロパティです。column-rule-widthプロパティとはcolumn-rule-width プロパティは、カラム間の罫線の幅を設定します。このプロパティを有効に機能させるには、column-rule-style プロパティで罫線のスタイル（実線、破線など）をあらかじめ指定しておく必要があります。スタイルが指定されていない場合や none の場合は、罫線の幅に関わらず罫線は表示されません。指定できる主な値は以下のとおりです。t
-
CSSのcolumn-rule-styleプロパティで列間の罫線スタイルを設定する方法
マルチカラムレイアウトにおいて、列と列の間に表示される罫線（ルール）のスタイルを設定するには、CSSの column-rule-style プロパティを使用します。このプロパティを使うことで、破線や点線、実線など、さまざまなデザインの区切り線を簡単に実装できます。column-rule-styleで指定できる主な値none … 罫線を表示しない（初期値）hidden … 罫線を非表示にするdotted … 点線で表示するdashed … 破線で表示するsolid … 実線で表示するdouble … 二重線で表示するgroove / ridge / inset / outset … 立体的な装飾