HTML DOMのcolumnRuleColorプロパティとは？段組み罫線の色を設定・変更する方法
columnRuleColorプロパティとは
HTML DOMのcolumnRuleColorプロパティは、段組み（マルチカラム）レイアウトにおいて、列と列の間に引かれる罫線（区切り線）の色を設定または取得するために使用されます。このプロパティを活用することで、JavaScriptから動的に罫線の色を変更できます。
構文
columnRuleColorプロパティを設定する際の構文は以下のとおりです。
object.style.columnRuleColor = "color|initial|inherit"
指定できる値
- color：罫線の色を指定します（例：blue、#ff0000 などの色名やカラーコード）。
- initial：プロパティの値をデフォルト値に戻します。
- inherit：親要素のプロパティ値を継承します。
使用例
次の例では、5段組みに設定されたdiv要素の罫線の色が、初期状態では「lightcoral」に設定されています。ボタンをクリックすると、JavaScriptによって罫線の色が「blue」に変更されます。
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1{
padding: 5px;
column-count: 5;
column-rule-width: 9px;
column-rule-style: solid;
column-rule-color: lightcoral;
}
</style>
<script>
function changeColumnRuleColor(){
document.getElementById("DIV1").style.columnRuleColor="blue";
document.getElementById("Sample").innerHTML="段組み罫線の色を変更しました";
}
</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>下のボタンをクリックすると、上のdivの段組み罫線の色が変わります</p>
<button onclick="changeColumnRuleColor()">罫線の色を変更</button>
<p id="Sample"></p>
</body>
</html>実行結果
ページを初期表示した状態では、各段の間にlightcoral色の罫線が表示されます。
続いて、「罫線の色を変更」ボタンをクリックします。
ボタンをクリックすると、段組みの罫線の色が青色に変わり、画面下部に変更完了のメッセージが表示されます。
まとめ
columnRuleColorプロパティを使えば、段組みレイアウトの罫線の色を簡単に操作できます。なお、罫線の太さはcolumnRuleWidthプロパティ、線種（実線・破線など）はcolumnRuleStyleプロパティでそれぞれ設定可能です。これらを組み合わせることで、可読性の高い美しい段組みデザインを実現できます。
-
HTML DOMのcolumnRuleWidthプロパティとは？段組み罫線の幅を設定する方法を解説
HTML DOMのcolumnRuleWidthプロパティは、段組み（マルチカラム）レイアウトにおいて、カラムとカラムの間に引かれる罫線（column rule）の幅を取得・設定するために使用されるプロパティです。 構文 columnRuleWidthプロパティを設定する際の構文は以下のとおりです。 object.style.columnRuleWidth = medium|thin|thick|length|initial|inherit プロパティ値の一覧 上記の構文で指定できる各プロパティ値の意味は次の表のとおりです。 値説明 thin細い罫線を指
-
HTML DOMのcolumnRuleStyleプロパティとは？カラム罫線のスタイル設定方法を解説
columnRuleStyleプロパティとはHTML DOMのcolumnRuleStyleプロパティは、段組み（マルチカラム）レイアウトにおいて、カラム間に引かれる罫線（カラムルール）のスタイルを定義または取得するために使用されます。JavaScriptからこのプロパティを操作することで、罫線の見た目を動的に変更することが可能です。なお、罫線を実際に表示するには、段数を指定するcolumn-count、罫線の幅を指定するcolumn-rule-width、罫線の色を指定するcolumn-rule-colorなどのプロパティと併せて設定するのが一般的です。構文columnRuleStyleプロ