CSSで要素を上下方向に柔軟に配置！ inset-block-endの使い方を徹底解説

言い換えると、要素を親要素内における上下方向の位置を、論理的な書字方向に基づいて柔軟に調整できる機能です。従来の top や bottom プロパティとは異なり、inset-block-end は以下の点が特徴です。

レスポンシブデザインに最適: さまざまな画面サイズやレイアウトに対応して、要素の位置を動的に調整できます。
柔軟な配置: 単位をpx 、% 、rem などで指定でき、親要素の比率を用いた相対的な配置も可能です。
書字方向に依存する: 左から右に記述する言語（LTR）の場合は bottom と同じ挙動をし、右から左に記述する言語（RTL）の場合は top と同じ挙動になります。

inset-block-end プロパティの構文は以下の通りです。

inset-block-end: <値>;

値には、長さ、百分率、キーワードなどを指定できます。

例

.element {
  inset-block-end: 20px; /* 親要素下部から20ピクセル離れた位置に配置 */
}

.rtl-element {
  inset-block-end: 10%; /* 親要素高の10%下に配置 */
}

inset-block-end プロパティは、以下のプロパティと併用して使用できます。

例 1: 要素を親要素下部から 20ピクセル離して配置

.element {
  inset-block-end: 20px;
}

このコードは、.element クラスを持つ要素を、親要素下部から 20ピクセル離れた位置に配置します。

例 2: 要素を親要素高の 80% 上に配置

.element {
  inset-block-end: 80%;
}

このコードは、.element クラスを持つ要素を、親要素高の 80% 上の位置に配置します。要素の高さが親要素の高さに依存するため、レスポンシブなレイアウトに適しています。

例 3: 要素をグリッドレイアウト内の特定の行に配置

.element {
  grid-row-end: 3;
  inset-block-end: 10%;
}

このコードは、.element クラスを持つ要素を、グリッドレイアウトの 3 番目の行に配置し、かつその行下部から 10% 離れた位置に配置します。

例 4: 要素を方向に応じて柔軟に配置

.rtl .element {
  inset-block-end: 20px; /* 右から左に記述する言語の場合 */
}

.ltr .element {
  inset-block-end: bottom; /* 左から右に記述する言語の場合 */
}

このコードは、.element クラスを持つ要素を、ページの方向に応じて柔軟に配置します。.rtl クラスが設定された要素は、親要素下部から 20ピクセル離れた位置に配置され、.ltr クラスが設定された要素は、従来の bottom プロパティと同じ動作になります。

代替方法 としては、以下のプロパティが考えられます。

Flexbox または Grid レイアウト: 要素を容器内に配置し、align-items または justify-content プロパティを使用して論理的な位置を調整できます。
calc() 関数: 数式を使用して論理的な位置を計算できます。
position および offset プロパティ: 要素を絶対配置し、オフセットを使用して論理的な位置を調整できます。
top および bottom プロパティ: 従来の方法ですが、inset-block-end ほど柔軟ではありません。

具体的な代替方法 は、使用するケースによって異なります。以下に、いくつかの例を紹介します。

例 1: 要素を親要素下部から 20ピクセル離して配置

代替方法 1

.element {
  bottom: 20px;
}

代替方法 2

.element {
  position: absolute;
  bottom: 20px;
}

例 2: 要素を親要素高の 80% 上に配置

代替方法 1

.element {
  top: 20%;
}

代替方法 2

.element {
  position: absolute;
  top: calc(80% - 100%); /* 要素の高さを考慮 */
}

例 3: 要素をグリッドレイアウト内の特定の行に配置

代替方法

.element {
  grid-row: 3;
}

例 4: 要素を方向に応じて柔軟に配置

代替方法 1

.rtl .element {
  bottom: 20px;
}

.ltr .element {
  top: bottom; /* bottomプロパティの値をコピー */
}

代替方法 2

.rtl .element {
  position: absolute;
  bottom: 20px;
}

.ltr .element {
  position: absolute;
  top: calc(100% - 100%); /* 要素の高さを考慮 */
}

上記以外にも、様々な代替方法 が考えられます。最適な方法は、使用するケースや要件によって異なります。