HTML DOM スタイルの alignSelf プロパティとは？使い方と設定値を解説
HTML DOM の alignSelf プロパティは、フレックスコンテナ内にある特定のアイテムの配置（アラインメント）を指定するために使用されるプロパティです。このプロパティを利用することで、要素のグリッドレイアウトやフレックスボックスレイアウトにおいて、親コンテナに指定された align-items の値を、個々のアイテム単位で上書きすることができます。
構文
alignSelf プロパティを設定する場合の構文は以下のとおりです。
object.style.alignSelf = "auto|stretch|center|flex-start|flex-end|baseline|initial|inherit"
設定できる値
alignSelf プロパティには、以下の値を指定できます。
| 値 | 説明 |
|---|---|
| stretch | デフォルト値。アイテムをコンテナのサイズに合わせて引き伸ばします。 |
| center | アイテムをコンテナの中央に配置します。 |
| flex-start | アイテムをコンテナの先頭側に配置します。 |
| flex-end | アイテムをコンテナの末尾側に配置します。 |
| baseline | アイテムをコンテナのベースラインに沿って配置します。 |
| initial | このプロパティを初期値に設定します。 |
| inherit | 親要素のプロパティ値を継承します。 |
サンプルコード
ここでは、Style オブジェクトの alignSelf プロパティを使用した具体的な例を見てみましょう。以下のサンプルでは、フレックスコンテナ内の2番目の div 要素に対して、ボタンをクリックすると flex-end を適用し、配置が変化します。
<!DOCTYPE html>
<html>
<head>
<style>
#container {
width: 180px;
height: 220px;
padding: 10px;
border: 1px solid #333;
display: flex;
align-items: baseline;
flex-flow: row wrap;
}
.ele {
width: 60px;
height: 60px;
background-color: skyblue;
}
.ele:nth-child(2n) {
background-color: orange;
}
</style>
<script>
function changeAlign(){
document.getElementsByClassName("ele")[1].style.alignSelf = "flex-end";
}
</script>
</head>
<body>
<h2>デモ見出し</h2>
<div id="container">
<div class="ele"></div>
<div class="ele"></div>
<div class="ele"></div>
</div>
<p>下のボタンをクリックすると、上の div 要素の alignSelf プロパティが変更されます</p>
<button onclick="changeAlign()">CHANGE</button>
</body>
</html>実行結果
このコードを実行すると、以下のような表示になります。
「CHANGE」ボタンをクリックすると、2番目のオレンジ色のブロックがコンテナの末尾側（下端）に移動し、以下のように表示されます。
-
HTML DOM スタイルの alignSelf プロパティとは？使い方と設定値を解説
HTML DOM の alignSelf プロパティは、フレックスコンテナ内にある特定のアイテムの配置（アラインメント）を指定するために使用されるプロパティです。このプロパティを利用することで、要素のグリッドレイアウトやフレックスボックスレイアウトにおいて、親コンテナに指定された align-items の値を、個々のアイテム単位で上書きすることができます。構文alignSelf プロパティを設定する場合の構文は以下のとおりです。object.style.alignSelf = auto|stretch|center|flex-start|flex-end|baseline|initial|i
-
HTML DOMのStyle alignItemsプロパティとは？構文・値・使い方を解説
HTML DOMのStyle alignItemsプロパティは、フレックスコンテナ（flexible container）内に配置されたアイテムのデフォルトの整列方法（垂直方向の配置）を指定するために使用されるプロパティです。JavaScriptから動的にフレックスアイテムの配置を変更したい場合に、このプロパティを活用することで、コンテナ内のアイテムの位置を柔軟に制御できます。構文alignItemsプロパティを設定する場合の構文は以下のとおりです。object.style.alignItems = stretch|center|flex-start|flex-end|baseline|ini