HTML DOMのcolumnRuleWidthプロパティとは？段組み罫線の幅を設定する方法を解説
HTML DOMのcolumnRuleWidthプロパティは、段組み（マルチカラム）レイアウトにおいて、カラムとカラムの間に引かれる罫線（column rule）の幅を取得・設定するために使用されるプロパティです。
構文
columnRuleWidthプロパティを設定する際の構文は以下のとおりです。
object.style.columnRuleWidth = "medium|thin|thick|length|initial|inherit"
プロパティ値の一覧
上記の構文で指定できる各プロパティ値の意味は次の表のとおりです。
| 値 | 説明 |
|---|---|
| thin | 細い罫線を指定します。 |
| medium | 中程度の太さの罫線を指定します。デフォルト値です。 |
| thick | 太い罫線を指定します。 |
| length | pxやemなどの長さの単位を使って、罫線の幅を数値で指定します。 |
| initial | このプロパティを初期値に戻します。 |
| inherit | 親要素のプロパティ値を継承します。 |
使用例
それでは、columnRuleWidthプロパティの具体的な使用例を見てみましょう。以下のサンプルコードでは、複数の画像を含むdiv要素に対して5段組みのレイアウトを適用し、水色（lightblue）の実線でカラムを区切っています。ボタンをクリックすると、JavaScriptによって罫線の幅が9pxから3pxへと変更されます。
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1{
padding: 5px;
column-count: 5;
column-rule-width: 9px;
column-rule-color: lightblue;
column-rule-style: solid;
}
</style>
<script>
function changeColumnRuleWidth(){
document.getElementById("DIV1").style.columnRuleWidth="3px";
document.getElementById("Sample").innerHTML="The column rule width is now reduced";
}
</script>
</head>
<body>
<div id="DIV1">
<img src="https://www.tutorialspoint.com/images/Swift.png"><br/>
<img src="https://www.tutorialspoint.com/images/xamarian.png"><br/>
<img src="https://www.tutorialspoint.com/images/pl-sql.png"><br/>
<img src="https://www.tutorialspoint.com/images/asp-net.png"><br/>
<img src="https://www.tutorialspoint.com/images/powerbi.png"><br/>
<img src="https://www.tutorialspoint.com/images/Tableau.png"><br/>
<img src="https://www.tutorialspoint.com/images/Big-Data-Analytics.png"><br/>
<img src="https://www.tutorialspoint.com/images/microsoftproject.png">
<img src="https://www.tutorialspoint.com/images/QlikView.png"><br/>
<img src="https://www.tutorialspoint.com/images/hadoop.png">
</div>
<p>Change the above div column rule width by clicking the below button</p>
<button onclick="changeColumnRuleWidth()">Change Column Rule Width</button>
<p id="Sample"></p>
</body>
</html>
出力結果
ページを表示すると、画像が5つのカラムに分割され、各カラムの間に水色の太い実線（9px）が引かれた状態で表示されます。
続いて、「Change Column Rule Width」ボタンをクリックすると、以下のように変化します。
ボタンクリック後は、JavaScriptのchangeColumnRuleWidth()関数が実行され、罫線の幅が3pxに縮小されます。同時に、画面下部には「The column rule width is now reduced（カラム罫線の幅が狭まりました）」というメッセージが表示されます。
まとめ
columnRuleWidthプロパティを使えば、段組みレイアウトの罫線の太さを動的に制御できます。なお、罫線の見た目を完全に定義するには、スタイルの種類を指定するcolumn-rule-styleプロパティ、色を指定するcolumn-rule-colorプロパティと組み合わせて使用するのが一般的です。これらをまとめて一括指定したい場合は、ショートハンドプロパティであるcolumn-ruleを利用すると便利です。
-
HTML DOMのcolumnRuleStyleプロパティとは？カラム罫線のスタイル設定方法を解説
columnRuleStyleプロパティとはHTML DOMのcolumnRuleStyleプロパティは、段組み（マルチカラム）レイアウトにおいて、カラム間に引かれる罫線（カラムルール）のスタイルを定義または取得するために使用されます。JavaScriptからこのプロパティを操作することで、罫線の見た目を動的に変更することが可能です。なお、罫線を実際に表示するには、段数を指定するcolumn-count、罫線の幅を指定するcolumn-rule-width、罫線の色を指定するcolumn-rule-colorなどのプロパティと併せて設定するのが一般的です。構文columnRuleStyleプロ
-
HTML DOMのcolumnRuleColorプロパティとは？段組み罫線の色を設定・変更する方法
columnRuleColorプロパティとはHTML DOMのcolumnRuleColorプロパティは、段組み（マルチカラム）レイアウトにおいて、列と列の間に引かれる罫線（区切り線）の色を設定または取得するために使用されます。このプロパティを活用することで、JavaScriptから動的に罫線の色を変更できます。構文columnRuleColorプロパティを設定する際の構文は以下のとおりです。object.style.columnRuleColor = "color|initial|inherit"指定できる値color：罫線の色を指定します（例：blue、#ff0000