概要

CSSのinset-inline-startプロパティは、要素のインライン軸の始点からの距離を指定するためのプロパティです。このプロパティは、文書の書字方向（LTR: 左から右、RTL: 右から左）に応じて適用される位置が変わり、通常の左から右の文書では左端、右から左の場合は右端からの距離を設定します。inset-inline-startを使用することで、要素の配置を細かく調整でき、デザインの自由度を高めることが可能です。

inset-inline-startの基本構文

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

例

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

使用例

基本的な使用例 - 要素のインライン軸の始点を設定する

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

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

解説

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

応用例 - 右から左の書字方向（RTL）の場合のinset-inline-startの使用

右から左の書字方向（RTL）では、inset-inline-startの設定は右端に影響します。以下の例では、右から左の文書内でinset-inline-startを使用しています。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>RTL文書のinset-inline-start使用例</title>
    <style>
      .container {
        position: relative;
        height: 200px;
        direction: rtl; /* 右から左の書字方向を設定 */
        background-color: #e0e0e0;
      }
      .box {
        position: absolute;
        inset-inline-start: 20px; /* RTL設定で右端から20pxの位置に配置 */
        inset-block-start: 15px; /* 上端から15pxの位置に配置 */
        background-color: #ff4500;
        color: white;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box">
        右から左の書字方向では右端から20pxの位置に配置されます。
      </div>
    </div>
  </body>
</html>

解説

  • direction: rtl;
    右から左の書字方向を設定することで、インライン軸の始点が右側になります。
  • inset-inline-start: 20px;
    書字方向に応じて、右端から20pxの距離に要素を配置します。

inset-inline-startの注意点

  • 書字方向の影響
    inset-inline-startは書字方向によって適用される方向が異なります。左から右（LTR）の文書では通常左端、右から左（RTL）の文書では右端に影響するため、使用する際にはページの書字モードを考慮する必要があります。
  • 位置調整とレスポンシブデザイン
    固定的な位置指定は、レスポンシブデザインにおいて予期せぬ結果を引き起こす可能性があります。inset-inline-startを使用する際は、他のCSSプロパティと併用し、画面サイズに応じた適切な配置を心がけましょう。
  • ブラウザサポート
    inset-inline-startは比較的新しいプロパティであり、すべてのブラウザで完全にサポートされているわけではありません。ターゲットブラウザの互換性を確認してから使用することが重要です。

まとめ

inset-inline-startプロパティは、要素のインライン軸の始点からの距離を調整することで、柔軟なレイアウト調整が可能になります。書字方向に応じて適用される位置が変わるため、横書き・縦書き、左から右・右から左の設定を意識しながら使用しましょう。デザインの自由度を高めつつ、他のスタイル設定と調和させながら、最適なレイアウトを構築してください。

参照:

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