HTML DOMのcolumnGapプロパティとは？使い方とサンプルコードをわかりやすく解説
HTML DOM のスタイルにおける columnGap プロパティは、マルチカラムレイアウトにおいて、要素内のカラム（段組み）同士の間隔を指定するために使用されます。CSS の column-gap を JavaScript から動的に操作したい場合に活用できます。
columnGap プロパティの基本構文
columnGap プロパティを JavaScript で設定する際の基本構文は以下のとおりです。
object.style.columnGap = "length|normal|initial|inherit";
指定できる値の一覧
columnGap プロパティには、次の4種類の値を設定できます。
| 値 | 説明 |
|---|---|
| length（長さ） | px や em などの単位を使って、カラム間のギャップ幅を具体的に指定します。 |
| normal | デフォルト値です。ブラウザ標準の間隔（約1em）がカラム間に適用されます。 |
| initial | このプロパティを初期値に戻します。 |
| inherit | 親要素の columnGap の値を継承します。 |
columnGap プロパティの使用例
それでは、実際のサンプルコードを見てみましょう。次の例では、4カラムの段組みレイアウトを持つ div 要素に対し、ボタンをクリックすると JavaScript によって columnGap の値が 50px から 10px へ変更される仕組みを実装しています。
<!DOCTYPE html>
<html>
<head>
<style>
div {
column-count: 4;
column-gap: 50px;
font-size: 1.2rem;
}
</style>
<script>
function changeColumnGap(){
document.getElementsByTagName("div")[0].style.columnGap="10px";
document.getElementById("Sample").innerHTML="The column gap is now decreased";
}
</script>
</head>
<body>
<div>
This is some sample text inside div. This is the second div line.This is the third div
line.This is the fourth div line. This is the fifth div line.This is the sixth div line.
This is the seventh div line. This is the eigtth div line.This is the ninth div line. This is
the tenth div line.This is the eleventh div line. This is the twelth div line.This is the thirteenth div
line.This is the fourteen line. This is the fifteen div line.This is the sixteen div line. This is the seventeen div line. This is the eighteen div line.
</div>
<p>Change the above div column gap by clicking the below button</p>
<button onclick="changeColumnGap()">Change Column Gap</button>
<p id="Sample"></p>
</body>
</html>
実行結果
ページを開いた直後は、CSS で指定したとおり各カラムの間に 50px の間隔が空いて表示されます。
続いて、「Change Column Gap」ボタンをクリックしてみましょう。
クリックすると changeColumnGap() 関数が実行され、div 要素の columnGap が 10px に変更されます。その結果、カラム間の余白が狭まり、テキストの表示密度が高くなっていることが確認できます。また、id が「Sample」の p 要素にメッセージが出力されます。
このように、HTML DOM の columnGap プロパティを使えば、ユーザーの操作に応じて段組みレイアウトのカラム間隔を動的に変更することが可能です。レスポンシブ対応やインタラクティブな UI を実装する際にぜひ活用してください。
-
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