概要

CSSのinset-block-endプロパティは、要素のブロック軸の終端からの距離を設定するためのプロパティです。このプロパティは、通常の横書きの文書では下側、縦書きの場合は右側など、ページの書字方向に応じて適用される位置が変わります。inset-block-endを使用することで、要素を上下左右のブロック軸に沿って柔軟に配置することができ、デザインの自由度が向上します。

inset-block-endの基本構文

selector {
  inset-block-end: value;
}
  • value
    距離を指定します。数値（px, emなど）、パーセンテージ（%）、またはautoを指定できます。

例

  • 0px
    ブロック軸の終端から0ピクセル。
  • 10%
    ブロック軸の終端から10%の位置。
  • auto
    ブラウザが自動的に配置。

使用例

基本的な使用例 - 要素のブロック軸の終端を設定する

以下の例では、inset-block-endを使って要素の配置を調整しています。文書が通常の横書きであるため、下端からの距離を指定します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>inset-block-endの使用例</title>
    <style>
      .container {
        position: relative;
        height: 200px;
        background-color: #f0f0f0;
      }
      .box {
        position: absolute;
        inset-block-end: 20px; /* ブロック軸の終端（下）から20pxの位置に配置 */
        inset-inline-start: 10px; /* インライン軸の始点（左）から10pxの位置に配置 */
        background-color: #4b0082;
        color: white;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box">
        このボックスは下端から20pxの位置に配置されています。
      </div>
    </div>
  </body>
</html>

解説

  • position: absolute;
    要素の位置をabsoluteに設定し、親要素である.containerを基準に配置しています。
  • inset-block-end: 20px;
    要素の下端（横書きの場合）から20pxの距離に要素を配置します。
  • inset-inline-start: 10px;
    左側（インライン軸の始点）から10pxの位置に配置しています。

応用例 - 縦書きの場合のinset-block-endの使用

縦書きの場合、inset-block-endの設定は横方向に影響します。以下の例では、縦書きの文書内でinset-block-endを使用しています。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>縦書きのinset-block-end使用例</title>
    <style>
      .container {
        position: relative;
        height: 300px;
        writing-mode: vertical-rl; /* 縦書きの設定 */
        background-color: #e0e0e0;
      }
      .box {
        position: absolute;
        inset-block-end: 30px; /* 縦書きの場合、右端から30pxの位置に配置 */
        inset-inline-start: 20px; /* 上端から20pxの位置に配置 */
        background-color: #ff6347;
        color: white;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box">縦書きモードでは右端から30pxの位置に配置されます。</div>
    </div>
  </body>
</html>

解説

  • writing-mode: vertical-rl;
    縦書きで右から左に文字を流す設定です。この設定により、ブロック軸の方向が変わります。
  • inset-block-end: 30px;
    縦書きでは右側がブロック軸の終端になるため、右端から30pxの位置に配置されます。

inset-block-endの注意点

  • 書字方向の影響
    inset-block-endは書字方向によって適用される方向が異なります。横書きの場合は通常下端、縦書きの場合は右端または左端になります。使用する際にはページの書字モードに注意が必要です。
  • 位置調整とレイアウトのバランス
    inset-block-endは要素の位置を固定的に指定するため、他の要素とのレイアウトバランスが崩れる可能性があります。特にレスポンシブデザインを考慮する場合、他のCSSプロパティとの併用が求められます。
  • ブラウザサポート
    inset-block-endは比較的新しいプロパティのため、古いブラウザではサポートされていない可能性があります。使用する前にターゲットとするブラウザの互換性を確認することが大切です。

まとめ

inset-block-endプロパティは、要素のブロック軸の終端からの距離を調整することで、柔軟なレイアウト調整が可能になります。ページの書字方向に応じて適用される位置が変わるため、縦書き・横書きの設定を意識しながら使用しましょう。デザインの自由度を高める一方で、他のスタイル設定とバランスを取りながら、最適なレイアウトを実現することが重要です。

参照:

`CSS` inset-block-end property - MDN Web Docs