HTML DOM StyleのcolumnCountプロパティの使い方を解説
columnCountプロパティとは
HTML DOMのStyleオブジェクトが持つcolumnCountプロパティは、要素のコンテンツを何列に分割して表示するか（カラム数）を設定するために使用されます。マルチカラムレイアウトを動的に制御したい場合に便利なプロパティです。
構文
columnCountプロパティを設定するための構文は以下のとおりです。
object.style.columnCount = "number|auto|initial|inherit"
プロパティ値の一覧
指定できる値とそれぞれの意味は次の表のとおりです。
| 値 | 説明 |
|---|---|
| number | 要素のコンテンツを分割するカラム数を数値で指定します。 |
| auto | 「column-width」などの他のプロパティに基づいてカラム数が自動的に決定されます。これがデフォルト値です。 |
| initial | このプロパティを初期値に設定します。 |
| inherit | 親要素のプロパティ値を継承します。 |
使用例
それでは、columnCountプロパティを使った具体的な例を見てみましょう。以下のサンプルでは、ボタンをクリックするとdiv要素のカラム数が2から4に変更されます。
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 120px;
column-count: 2;
border: 2px solid black;
background-color: mediumvioletred;
}
div > div {
background-color: yellow;
}
</style>
<script>
function changeColumnCount(){
document.getElementsByTagName("div")[0].style.columnCount="4";
document.getElementById("Sample").innerHTML="The column count is now increased to 4";
}
</script>
</head>
<body>
<div id="DIV1">
<div></div>
</div>
<p>Change the above div column count property by clicking the below button</p>
<button onclick="changeColumnCount()">Change Column Count</button>
<p id="Sample"></p>
</body>
</html>
実行結果
ページを開いた直後は、CSSのcolumn-count: 2;が適用され、div要素のコンテンツが2列で表示されます。
続いて、「Change Column Count」ボタンをクリックするとどうなるか確認してみましょう。
ボタンをクリックすると、JavaScriptのchangeColumnCount()関数が実行され、最初のdiv要素に対してstyle.columnCount = "4"が設定されます。その結果、レイアウトが即座に4列に変化し、画面上のメッセージも更新されることがわかります。
このように、columnCountプロパティを使えば、ユーザーの操作に応じてマルチカラムレイアウトを動的に変更することができます。
-
HTML DOM スタイルのflexプロパティとは？使い方と設定例をわかりやすく解説
HTML DOM スタイルのflexプロパティとはHTML DOM の flex プロパティは、display プロパティが flex に設定されている要素に対して、柔軟な伸縮サイズを設定または取得するために使用されるプロパティです。このプロパティを利用することで、flexGrow（伸びる比率）、flexShrink（縮む比率）、flexBasis（基本サイズ）の3つのプロパティをまとめて操作できます。flexプロパティの構文flexプロパティを設定する場合の基本的な構文は以下の通りです。object.style.flex = flex-grow flex-shrink flex-basis|
-
HTML DOMのjustifyContentプロパティとは?使い方と設定値を徹底解説
HTML DOM justifyContentプロパティとは HTML DOM の justifyContent プロパティは、フレックスコンテナ内のフレックスアイテムが利用可能なスペースをすべて使い切っていない場合に、主軸(横方向)に沿ってアイテムをどのように配置するかを指定するために使用されるプロパティです。JavaScript を使えば、動的にこの配置方法を変更することもできます。 justifyContentプロパティの構文 justifyContent プロパティを設定する際の基本構文は以下の通りです。 object.style.justifyContent = flex-star