HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOMのcolumnsプロパティとは？使い方と設定値をわかりやすく解説

HTML DOMのcolumnsプロパティは、CSSのcolumn-width（カラム幅）とcolumn-count（カラム数）をまとめて操作するために使用されます。JavaScriptから要素の段組みレイアウトを動的に変更したい場合に便利なプロパティです。

columnsプロパティの構文

columnsプロパティを設定する際の基本的な構文は以下の通りです。

object.style.columns = "auto | column-width column-count | initial | inherit"

設定できる値の一覧

columnsプロパティには、以下のような値を指定できます。

値説明
autocolumn-widthとcolumn-countを自動設定します。これがデフォルト値です。
column-width各カラム（段組み）の幅を指定します。
column-countカラム（段組み）の数を指定します。
initialこのプロパティを初期値に戻します。
inherit親要素のプロパティ値を継承します。

columnsプロパティの実装例

それでは、実際にcolumnsプロパティを使ったサンプルコードを見てみましょう。以下の例では、ボタンをクリックするとdiv要素の段組み設定が変化する仕組みになっています。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<style>
    #DIV1{
        columns: 5rem auto;
    }
    img {
        border: 1px solid brown;
    }
</style>
<script>
    function changeColumns(){
        document.getElementById("DIV1").style.columns="10px 3";
        document.getElementById("Sample").innerHTML="カラム設定が変更されました";
    }
</script>
</head>
<body>
    <div id="DIV1">
        <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/home_time_series.png"><br/>
        <img src="https://www.tutorialspoint.com/images/microsoftproject.png"><br/>
    </div>
    <p>下のボタンをクリックすると、上のdiv要素のcolumnsプロパティが変更されます</p>
    <button onclick="changeColumns()">Change Columns</button>
    <p id="Sample"></p>
</body>
</html>

実行結果

このコードを実行すると、画像が複数のカラムに分かれて表示されます。

「Change Columns」ボタンをクリックすると、次のように表示が変化します。

クリック前は「columns: 5rem auto」が適用され、幅5remを基準に自動的に段組みされています。一方、ボタンをクリックするとJavaScriptによって「10px 3」（幅10px・カラム数3）に変更され、段組みのレイアウトが動的に切り替わります。

まとめ

HTML DOMのcolumnsプロパティを使えば、column-widthとcolumn-countを一度に制御でき、ユーザーの操作に応じて段組みレイアウトを柔軟に変更できます。レスポンシブデザインや動的なコンテンツ表示において、ぜひ活用してみてください。

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

    columnRuleStyleプロパティとはHTML DOMのcolumnRuleStyleプロパティは、段組み（マルチカラム）レイアウトにおいて、カラム間に引かれる罫線（カラムルール）のスタイルを定義または取得するために使用されます。JavaScriptからこのプロパティを操作することで、罫線の見た目を動的に変更することが可能です。なお、罫線を実際に表示するには、段数を指定するcolumn-count、罫線の幅を指定するcolumn-rule-width、罫線の色を指定するcolumn-rule-colorなどのプロパティと併せて設定するのが一般的です。構文columnRuleStyleプロ

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

    columnRuleColorプロパティとはHTML DOMのcolumnRuleColorプロパティは、段組み（マルチカラム）レイアウトにおいて、列と列の間に引かれる罫線（区切り線）の色を設定または取得するために使用されます。このプロパティを活用することで、JavaScriptから動的に罫線の色を変更できます。構文columnRuleColorプロパティを設定する際の構文は以下のとおりです。object.style.columnRuleColor = "color|initial|inherit"指定できる値color：罫線の色を指定します（例：blue、#ff0000