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

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

alignContentプロパティは、フレックスボックスやグリッドレイアウトにおいて、アイテムを整列するために使用されるプロパティです。特に、アイテムがコンテナ内の利用可能なスペースをすべて使っていない場合に、交差軸（垂直方向）に沿ってアイテムをどのように配置するかを指定できます。

構文

alignContentプロパティを設定するための構文は、以下の通りです。

【alignContentプロパティの設定】

object.style.alignContent = "stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit"

設定できる値

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

値説明
stretchデフォルト値です。アイテムを引き伸ばして、コンテナに収まるように配置します。
centerアイテムをコンテナの中央に配置します。
flex-startアイテムをコンテナの先頭側に配置します。
flex-endアイテムをコンテナの末尾側に配置します。
space-between行間に均等なスペースを空けてアイテムを配置します。
space-around行の前・間・後にスペースを空けてアイテムを配置します。
initialこのプロパティを初期値に設定します。
inherit親要素のプロパティ値を継承します。

サンプルコード

ここで、alignContentプロパティの実際の使用例を見てみましょう。ボタンをクリックすると、JavaScriptによってコンテナのalignContentプロパティが動的に変更される仕組みです。

<!DOCTYPE html>
<html>
<head>
<style>
   #container {
      width: 180px;
      height: 220px;
      padding: 10px;
      border: 1px solid #333;
      display: flex;
      flex-flow: row wrap;
      align-content: space-around;
   }
   .ele {
      width: 60px;
      height: 60px;
      background-color: skyblue;
   }
   .ele:nth-child(2n) {
      background-color: orange;
   }
</style>
<script>
   function changeAlign(){
      document.getElementById("container").style.alignContent="flex-start";
   }
</script>
</head>
<body>
<div id="container">
<div class="ele"></div>
<div class="ele"></div>
<div class="ele"></div>
<div class="ele"></div>
<div class="ele"></div>
<div class="ele"></div>
</div>
<p>下のボタンをクリックすると、上のdiv要素のalign-contentプロパティが変更されます</p>
<button onclick="changeAlign()">CHANGE</button>
</body>
</html>

実行結果

上記のコードを実行すると、次のように表示されます。

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

「CHANGE」ボタンをクリックすると、alignContentプロパティが「flex-start」に変更され、アイテムの配置が変化します。

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

このように、alignContentプロパティを使えば、JavaScriptから動的にアイテムの整列方法を制御することが可能です。フレックスボックスやグリッドレイアウトで余白のバランスを調整したい場合に、ぜひ活用してみてください。

  1. HTML DOM スタイルの transformOrigin プロパティとは？使い方を徹底解説

    HTML DOM のスタイルオブジェクトが持つ transformOrigin プロパティは、HTML ドキュメント内の要素に対して 2D または 3D 変換を行う際の「原点（基準点）」を取得・設定するためのプロパティです。要素を回転や拡大縮小させる transform プロパティと組み合わせて使うことで、変換の基準となる位置を自由にコントロールできます。構文（シンタックス）transformOrigin プロパティの基本的な構文は以下のとおりです。値の取得object.style.transformOrigin値の設定object.style.transformOrigin = 値指定できる

  2. HTML DOMのStyle alignItemsプロパティとは？構文・値・使い方を解説

    HTML DOMのStyle alignItemsプロパティは、フレックスコンテナ（flexible container）内に配置されたアイテムのデフォルトの整列方法（垂直方向の配置）を指定するために使用されるプロパティです。JavaScriptから動的にフレックスアイテムの配置を変更したい場合に、このプロパティを活用することで、コンテナ内のアイテムの位置を柔軟に制御できます。構文alignItemsプロパティを設定する場合の構文は以下のとおりです。object.style.alignItems = stretch|center|flex-start|flex-end|baseline|ini