HTML DOM スタイルの columnRule プロパティとは？構文と使い方を解説
HTML DOM の columnRule プロパティは、要素の段組（マルチカラムレイアウト）間に引かれる罫線を取得・設定するためのプロパティです。このプロパティは、罫線の幅を指定する columnRuleWidth、罫線のスタイルを指定する columnRuleStyle、罫線の色を指定する columnRuleColor という3つの個別プロパティを、まとめて操作できるショートハンド（一括指定）プロパティとして機能します。
columnRule プロパティの構文
columnRule プロパティを設定する場合の構文は以下のとおりです。
object.style.columnRule = "column-rule-width column-rule-style column-rule-color|initial|inherit"
指定できる値
構文で指定できる各値の意味は次の表のとおりです。
| 値 | 説明 |
|---|---|
| columnRuleWidth | カラム間の罫線の幅を設定します。デフォルト値は medium です。 |
| columnRuleStyle | カラム間の罫線のスタイルを設定します。デフォルト値は none です。 |
| columnRuleColor | カラム間の罫線の色を設定します。デフォルト値は要素の color プロパティの値です。 |
| initial | このプロパティを初期値に設定します。 |
| inherit | 親要素のプロパティ値を継承します。 |
それでは、columnRule プロパティの具体的な使用例を見ていきましょう。以下のサンプルでは、4段組に設定された div 要素の罫線を、ボタンのクリック操作で動的に変更しています。
サンプルコード
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1 {
column-count: 4;
column-rule: 4px dashed darkolivegreen;
}
</style>
<script>
function changeColumnRule(){
document.getElementById("DIV1").style.columnRule="10px solid red";
document.getElementById("Sample").innerHTML="The column rule properties are now modified";
}
</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">
</div>
<p>Change the above div column rule properties by clicking the below button</p>
<button onclick="changeColumnRule()">Change Column Rule</button>
<p id="Sample"></p>
</body>
</html>
実行結果
ページを表示すると、4段組の画像の間に「4px のダークオリーブグリーンの破線」が引かれた状態で表示されます。
「Change Column Rule」ボタンをクリックすると、JavaScript によって columnRule プロパティが「10px の赤い実線」に書き換えられ、罫線が以下のように変化します。
-
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