概要

CSSのinset-block-startプロパティは、要素のブロック軸の始点からの距離を指定するためのプロパティです。このプロパティは、文書の書字方向に応じて適用される位置が変わり、通常の横書きの文書では上端、縦書きの場合は左端からの距離を指定します。inset-block-startを使用することで、要素の位置を柔軟に調整でき、デザインのレイアウトをより細かく制御することが可能です。

inset-block-startの基本構文

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

例

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

使用例

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

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

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

解説

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

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

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

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

解説

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

inset-block-startの注意点

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

まとめ

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

参照:

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