HTML DOMのcolumnRuleStyleプロパティとは？カラム罫線のスタイル設定方法を解説

columnRuleStyleプロパティとは

HTML DOMのcolumnRuleStyleプロパティは、段組み（マルチカラム）レイアウトにおいて、カラム間に引かれる罫線（カラムルール）のスタイルを定義または取得するために使用されます。JavaScriptからこのプロパティを操作することで、罫線の見た目を動的に変更することが可能です。

なお、罫線を実際に表示するには、段数を指定するcolumn-count、罫線の幅を指定するcolumn-rule-width、罫線の色を指定するcolumn-rule-colorなどのプロパティと併せて設定するのが一般的です。

構文

columnRuleStyleプロパティを設定する場合の構文は以下のとおりです。

object.style.columnRuleStyle = "none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit"

プロパティ値の一覧

指定できる主な値とその説明は次の表のとおりです。

値	説明
none	デフォルト値。罫線を表示しません。
hidden	「none」と同じく罫線を非表示にしますが、罫線の領域自体は確保されます。透明でありながら存在し続ける状態です。
dotted	点線の罫線を表示します。
dashed	破線の罫線を表示します。
solid	実線の罫線を表示します。
double	二重線の罫線を表示します。
groove	立体的な溝（くぼみ）状の罫線を表示します。「ridge」の逆の効果になります。
ridge	立体的な隆起状の罫線を表示します。「groove」の逆の効果になります。
inset	要素が埋め込まれたように見える立体罫線を表示します。「outset」の逆の効果になります。
outset	要素が浮き出たように見える立体罫線を表示します。「inset」の逆の効果になります。
initial	このプロパティをデフォルト値（none）に戻します。
inherit	親要素のプロパティ値を継承します。

サンプルコード

以下は、columnRuleStyleプロパティを使ってカラム罫線のスタイルを変更する例です。ページを読み込むと画像が5段組みで表示され、カラム間に水色の実線（solid）の罫線が引かれます。「Change Column Rule Style」ボタンをクリックすると、罫線が破線（dashed）に切り替わります。

<!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 changeColumnRuleStyle(){
        document.getElementById("DIV1").style.columnRuleStyle="dashed";
        document.getElementById("Sample").innerHTML="The column rule style is now changed.";
    }
</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 style by clicking the below button</p>
    <button onclick="changeColumnRuleStyle()">Change Column Rule Style</button>
    <p id="Sample"></p>
</body>
</html>

実行結果

初期状態では、画像が5つのカラムに分かれて表示され、カラム間に9ピクセル幅の水色（lightblue）の実線が描画されます。

HTML DOMのcolumnRuleStyleプロパティとは？カラム罫線のスタイル設定方法を解説

続いて、「Change Column Rule Style」ボタンをクリックすると、罫線が破線（dashed）へと変化し、画面下部にメッセージが表示されます。

HTML DOMのcolumnRuleStyleプロパティとは？カラム罫線のスタイル設定方法を解説

まとめ

columnRuleStyleプロパティを使えば、段組みレイアウトの罫線スタイルを簡単に制御できます。実務では、スタイル・幅・色をまとめて指定できるcolumn-ruleショートハンドプロパティを活用すると、コードをより簡潔に記述できるのでおすすめです。

HTML DOMのcolumnRuleWidthプロパティとは？段組み罫線の幅を設定する方法を解説

HTML DOMのcolumnRuleColorプロパティとは？段組み罫線の色を設定・変更する方法

HTML DOMのcolumnRuleWidthプロパティとは？段組み罫線の幅を設定する方法を解説
HTML DOMのcolumnRuleWidthプロパティは、段組み（マルチカラム）レイアウトにおいて、カラムとカラムの間に引かれる罫線（column rule）の幅を取得・設定するために使用されるプロパティです。構文 columnRuleWidthプロパティを設定する際の構文は以下のとおりです。 object.style.columnRuleWidth = medium|thin|thick|length|initial|inherit プロパティ値の一覧上記の構文で指定できる各プロパティ値の意味は次の表のとおりです。値説明 thin細い罫線を指
HTML DOMのcolumnRuleColorプロパティとは？段組み罫線の色を設定・変更する方法
columnRuleColorプロパティとはHTML DOMのcolumnRuleColorプロパティは、段組み（マルチカラム）レイアウトにおいて、列と列の間に引かれる罫線（区切り線）の色を設定または取得するために使用されます。このプロパティを活用することで、JavaScriptから動的に罫線の色を変更できます。構文columnRuleColorプロパティを設定する際の構文は以下のとおりです。object.style.columnRuleColor = "color|initial|inherit"指定できる値color：罫線の色を指定します（例：blue、#ff0000