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

2024-05-25

CSSにおける「inset-block-end」プロパティの解説

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

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

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

inset-block-end: <値>;

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

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

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

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

  • inset-block-start: 要素の先頭からの論理的なオフセットを設定します。
  • inset-inline-start: 要素の左端からの論理的なオフセットを設定します。
  • inset-inline-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 プロパティと同じ動作になります。

  • フローティング要素を親要素内の一番下に配置
  • フローティング要素を特定の見出しの下に配置
  • 複数の要素を垂直方向に等間隔に配置
  • 要素をウィンドウ下部に固定


    CSSにおける「inset-block-end」の代替方法

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

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

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

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

    代替方法 1:

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

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

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

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

    .element {
      grid-row: 3;
    }
    

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

    .rtl .element {
      bottom: 20px;
    }
    
    .ltr .element {
      top: bottom; /* bottomプロパティの値をコピー */
    }
    
    .rtl .element {
      position: absolute;
      bottom: 20px;
    }
    
    .ltr .element {
      position: absolute;
      top: calc(100% - 100%); /* 要素の高さを考慮 */
    }
    

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

    注意点

    • 代替方法によっては、inset-block-end と微妙な違いが生じる場合があります。
    • 古いブラウザでは、代替方法が完全にサポートされない場合があります。