inset-inline-startプロパティとは何ですか？

inset-inline-startプロパティは、CSSで要素のインライン軸の始点（左側または右側）からの距離を設定するためのプロパティです。ページの書字方向に応じて適用される位置が変わります。

inset-inline-startの基本的な使い方を教えてください。

inset-inline-startは、インライン軸の始点からの距離を指定して、要素の配置を調整します。値には長さ、パーセンテージ、またはautoが指定できます。

inset-inline-startを使用する際の注意点は何ですか？

inset-inline-startは、書字方向（左から右、右から左）によって影響する方向が変わるため、使用する際にはレイアウトや書字モードを考慮する必要があります。

【CSS】inset-inline-startプロパティの使い方 - インライン軸の始点からの距離を設定する方法

概要

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

leftプロパティとの違い

従来のleftプロパティは物理的な方向（常に左）を指定しますが、inset-inline-startは論理的な方向（インライン軸の始点）を指定します。

従来の方法（leftプロパティ）

.box {
  position: absolute;
  left: 20px; /* 常に左から20px */
}

論理プロパティを使用した方法

.box {
  position: absolute;
  inset-inline-start: 20px; /* 書字方向に応じて適用 */
}

比較表

プロパティ	方向性	LTR環境	RTL環境	縦書き環境
`left`	物理的	左から	左から	左から
`inset-inline-start`	論理的	左から	右から	上から

inset-inline-startの基本構文

selector {
  inset-inline-start: value;
}

値の種類

長さ（<length>） px、em、rem、vhなどの単位で距離を指定します。
```
inset-inline-start: 20px;
inset-inline-start: 2rem;
```
パーセンテージ（<percentage>） 包含ブロックのインラインサイズに対する割合で指定します。
```
inset-inline-start: 10%;
inset-inline-start: 50%;
```
auto（初期値）ブラウザが自動的に配置を決定します。
```
inset-inline-start: auto;
```

グローバル値

inset-inline-start: inherit;   /* 親要素の値を継承 */
inset-inline-start: initial;   /* 初期値（auto）に設定 */
inset-inline-start: revert;    /* ブラウザのデフォルトに戻す */
inset-inline-start: unset;     /* 継承値または初期値に設定 */

適用条件

inset-inline-startを有効にするには、要素のpositionプロパティを以下のいずれかに設定する必要があります。

relative：通常位置からの相対配置
absolute：包含ブロックからの絶対配置
fixed：ビューポートからの固定配置
sticky：スクロール位置に応じた配置

書字モードごとの動作

横書き（LTR）環境での動作

日本語や英語などの左から右へ読む言語では、インライン軸の始点は左側になります。

/* 横書き（LTR）の場合 */
.box {
  writing-mode: horizontal-tb;
  direction: ltr;
  position: absolute;
  inset-inline-start: 20px; /* 左から20px */
}

/* 上記は以下と同じ動作 */
.box-physical {
  position: absolute;
  left: 20px;
}

横書き（RTL）環境での動作

アラビア語やヘブライ語などの右から左へ読む言語では、インライン軸の始点は右側になります。

/* 横書き（RTL）の場合 */
.box {
  writing-mode: horizontal-tb;
  direction: rtl;
  position: absolute;
  inset-inline-start: 20px; /* 右から20px */
}

/* 上記は以下と同じ動作 */
.box-physical {
  position: absolute;
  right: 20px;
}

縦書き環境での動作

日本語の縦書きレイアウトでは、インライン軸の始点は上側になります。

/* 縦書き（右から左）の場合 */
.box {
  writing-mode: vertical-rl;
  position: absolute;
  inset-inline-start: 20px; /* 上から20px */
}

/* 上記は以下と同じ動作 */
.box-physical {
  position: absolute;
  top: 20px;
}

使用例

例1：LTR環境での基本的な配置

横書き（LTR）環境で要素を左側に配置する例です。

従来の方法

.container {
  position: relative;
  height: 200px;
  background-color: #f0f0f0;
}

.box {
  position: absolute;
  left: 20px; /* 物理的な左 */
  top: 20px;
  background-color: #6a5acd;
  color: white;
  padding: 15px;
}

論理プロパティを使用した方法

.container {
  position: relative;
  height: 200px;
  background-color: #f0f0f0;
}

.box {
  position: absolute;
  inset-inline-start: 20px; /* 論理的な始点 */
  inset-block-start: 20px;
  background-color: #6a5acd;
  color: white;
  padding: 15px;
}

メリット：書字方向が変わっても適切に配置されます。

例2：RTL環境への対応

同じCSSコードで、書字方向が変わっても適切に配置される例です。

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="UTF-8">
  <title>RTL対応の配置</title>
  <style>
    .container {
      position: relative;
      height: 200px;
      background-color: #e0e0e0;
      border: 2px solid #999;
    }

    .notification {
      position: absolute;
      inset-inline-start: 20px; /* RTL環境では右から20px */
      inset-block-start: 20px;
      background-color: #ff6347;
      color: white;
      padding: 15px;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="notification">
      إشعار جديد (新しい通知)
    </div>
  </div>
</body>
</html>

ポイント：direction: rtlが設定されているため、inset-inline-start: 20pxは右から20pxの位置を意味します。

例3：相対配置での使用

position: relativeと組み合わせて、要素を通常位置からずらす例です。

.text-highlight {
  position: relative;
  inset-inline-start: 10px; /* 通常位置から右に10px移動（LTR） */
  background-color: #ffff00;
  padding: 2px 5px;
}

<p>
  この文章には<span class="text-highlight">強調された部分</span>があります。
</p>

例4：固定配置での使用

画面に固定されたサイドメニューの配置例です。

.side-menu {
  position: fixed;
  inset-inline-start: 0; /* 画面のインライン軸始点に配置 */
  inset-block-start: 0;
  inset-block-end: 0;
  inline-size: 250px;
  background-color: #2c3e50;
  color: white;
  padding: 20px;
  overflow-y: auto;
  box-shadow: 2px 0 10px rgba(0,0,0,0.3);
}

メリット：RTL環境では自動的にメニューが右側に表示されます。

例5：スティッキー配置での使用

スクロール時に要素を固定する例です。

.sticky-button {
  position: sticky;
  inset-inline-start: 20px; /* スクロール時にインライン軸の始点から20pxに固定 */
  inset-block-start: 100px;
  background-color: #3498db;
  color: white;
  padding: 12px 24px;
  border-radius: 25px;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

<div class="content">
  <button class="sticky-button">お問い合わせ</button>
  <p>長いコンテンツ...</p>
</div>

実用的なユースケース

ケース1：多言語対応のナビゲーションバー

LTRとRTLの両方の言語に対応したナビゲーションメニューです。

.nav-container {
  position: relative;
}

.nav-menu {
  position: absolute;
  inset-inline-start: 0; /* LTRでは左、RTLでは右に配置 */
  inset-block-start: 60px;
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  min-inline-size: 200px;
}

.nav-item {
  padding: 12px 20px;
  border-block-end: 1px solid #eee;
}

.nav-item:hover {
  background-color: #f5f5f5;
}

ケース2：ツールチップの配置

要素の始点側に表示されるツールチップです。

.tooltip-container {
  position: relative;
  display: inline-block;
}

.tooltip {
  position: absolute;
  inset-inline-start: 0; /* 親要素の始点に合わせる */
  inset-block-end: calc(100% + 10px); /* 親要素の上に配置 */
  background-color: #333;
  color: white;
  padding: 8px 12px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.tooltip-container:hover .tooltip {
  opacity: 1;
  visibility: visible;
}

/* 矢印 */
.tooltip::after {
  content: '';
  position: absolute;
  inset-inline-start: 20px;
  inset-block-start: 100%;
  border: 6px solid transparent;
  border-block-start-color: #333;
}

ケース3：ドロワーメニュー

画面端から出現するドロワーメニューです。

.drawer {
  position: fixed;
  inset-inline-start: 0; /* LTRでは左、RTLでは右から出現 */
  inset-block-start: 0;
  inset-block-end: 0;
  inline-size: 280px;
  background-color: #fff;
  box-shadow: 2px 0 10px rgba(0,0,0,0.2);
  transform: translateX(-100%); /* LTR環境での初期位置 */
  transition: transform 0.3s ease;
  z-index: 1000;
}

.drawer.open {
  transform: translateX(0);
}

/* RTL環境では反転方向の変換が必要 */
[dir="rtl"] .drawer {
  transform: translateX(100%);
}

[dir="rtl"] .drawer.open {
  transform: translateX(0);
}

ケース4：バッジの配置

通知バッジをアイコンの始点側に配置する例です。

.icon-container {
  position: relative;
  display: inline-block;
}

.notification-badge {
  position: absolute;
  inset-inline-start: -8px; /* アイコンの始点側に少しはみ出す */
  inset-block-start: -8px;
  background-color: #e74c3c;
  color: white;
  font-size: 12px;
  font-weight: bold;
  border-radius: 50%;
  inline-size: 20px;
  block-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid white;
}

<div class="icon-container">
  <svg width="32" height="32"><!-- アイコン --></svg>
  <span class="notification-badge">5</span>
</div>

他の論理プロパティとの組み合わせ

inset-inline-startは、他の論理プロパティと組み合わせることで、完全に書字方向に適応したレイアウトを構築できます。

推奨される組み合わせ

.positioned-box {
  position: absolute;

  /* インライン軸の配置 */
  inset-inline-start: 20px;
  inset-inline-end: 20px;

  /* ブロック軸の配置 */
  inset-block-start: 20px;
  inset-block-end: 20px;

  /* サイズ指定 */
  inline-size: 300px;
  block-size: 200px;

  /* 余白 */
  padding-inline-start: 15px;
  padding-inline-end: 15px;
  padding-block-start: 10px;
  padding-block-end: 10px;

  /* ボーダー */
  border-inline-start: 3px solid #3498db;
}

短縮プロパティとの併用

.box {
  position: absolute;

  /* insetショートハンドとの併用 */
  inset: 20px; /* すべての方向から20px */

  /* 個別に上書き */
  inset-inline-start: 40px; /* 始点のみ40pxに変更 */
}

ブラウザサポート

inset-inline-startプロパティは、モダンブラウザで広くサポートされています。

ブラウザ	バージョン
Chrome	87+
Firefox	63+
Safari	14.1+
Edge	87+
Opera	73+

フォールバックの実装

古いブラウザをサポートする必要がある場合は、物理プロパティをフォールバックとして使用します。

.box {
  position: absolute;

  /* フォールバック（古いブラウザ用） */
  left: 20px;

  /* モダンブラウザ用 */
  inset-inline-start: 20px;
}

/* RTL環境への対応（フォールバック） */
[dir="rtl"] .box {
  left: auto;
  right: 20px;
}

パフォーマンスとベストプラクティス

1. positionプロパティの設定を忘れない

/* ❌ 効果がない */
.box {
  inset-inline-start: 20px;
}

/* ✅ 正しい */
.box {
  position: relative; /* または absolute, fixed, sticky */
  inset-inline-start: 20px;
}

2. 適切な単位の選択

/* レスポンシブデザインに適した単位 */
.flexible-box {
  position: absolute;
  inset-inline-start: 5%; /* パーセンテージ */
  inset-inline-start: 2rem; /* remユニット */
  inset-inline-start: 10vw; /* ビューポート幅 */
}

3. 論理プロパティの一貫した使用

/* ❌ 物理と論理が混在 */
.mixed {
  position: absolute;
  left: 20px; /* 物理プロパティ */
  inset-block-start: 20px; /* 論理プロパティ */
}

/* ✅ 論理プロパティに統一 */
.logical {
  position: absolute;
  inset-inline-start: 20px;
  inset-block-start: 20px;
}

4. calc()との組み合わせ

.centered-offset {
  position: absolute;
  inset-inline-start: calc(50% - 150px); /* 中央から左に150px */
  inset-block-start: 50%;
  transform: translateY(-50%);
}

トラブルシューティング

問題1：プロパティが効かない

原因：positionが設定されていない、またはstaticになっている

解決策：

.element {
  position: relative; /* または absolute, fixed, sticky */
  inset-inline-start: 20px;
}

問題2：RTL環境で位置が逆にならない

原因：directionプロパティが正しく設定されていない

解決策：

<html dir="rtl">
  <!-- または -->
  <div dir="rtl">
    <div class="element">コンテンツ</div>
  </div>
</html>

.rtl-container {
  direction: rtl;
}

問題3：縦書きで期待した位置にならない

原因：writing-modeの理解不足

解決策：

/* 縦書き環境では、inset-inline-startは上からの距離になる */
.vertical-text {
  writing-mode: vertical-rl;
  position: relative;
}

.vertical-box {
  position: absolute;
  inset-inline-start: 20px; /* 上から20px */
}

inset-inline-startの注意点

1. 書字方向の影響

inset-inline-startは書字方向によって適用される方向が異なります。

LTR環境：左からの距離
RTL環境：右からの距離
縦書き環境：上からの距離

使用する際にはページの書字モードを考慮する必要があります。

2. レスポンシブデザインへの配慮

固定的な位置指定は、レスポンシブデザインにおいて予期せぬ結果を引き起こす可能性があります。

/* モバイルファースト */
.responsive-box {
  position: absolute;
  inset-inline-start: 10px;
}

/* タブレット以上 */
@media (min-width: 768px) {
  .responsive-box {
    inset-inline-start: 40px;
  }
}

/* デスクトップ */
@media (min-width: 1024px) {
  .responsive-box {
    inset-inline-start: 80px;
  }
}

3. z-indexとの関係

inset-inline-startを使用する際は、重なり順にも注意が必要です。

.overlay {
  position: fixed;
  inset-inline-start: 0;
  inset-block-start: 0;
  inline-size: 100%;
  block-size: 100%;
  z-index: 1000; /* 重なり順を明示的に指定 */
}

4. アニメーションでの使用

.slide-in {
  position: fixed;
  inset-inline-start: -300px;
  transition: inset-inline-start 0.3s ease;
}

.slide-in.active {
  inset-inline-start: 0;
}

コードサンプル：実践的な実装

多言語対応のモーダルダイアログ

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>多言語対応モーダル</title>
  <style>
    .modal-overlay {
      position: fixed;
      inset: 0; /* 全画面に配置 */
      background-color: rgba(0, 0, 0, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1000;
    }

    .modal-content {
      position: relative;
      inline-size: 90%;
      max-inline-size: 500px;
      background-color: white;
      border-radius: 8px;
      padding: 30px;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    }

    .modal-close {
      position: absolute;
      inset-inline-end: 15px; /* 終点側に配置 */
      inset-block-start: 15px;
      background: none;
      border: none;
      font-size: 24px;
      cursor: pointer;
      color: #999;
      transition: color 0.2s;
    }

    .modal-close:hover {
      color: #333;
    }

    .modal-actions {
      display: flex;
      gap: 10px;
      margin-block-start: 20px;
    }

    .btn {
      padding: 10px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      transition: background-color 0.2s;
    }

    .btn-primary {
      background-color: #3498db;
      color: white;
    }

    .btn-primary:hover {
      background-color: #2980b9;
    }

    .btn-secondary {
      background-color: #ecf0f1;
      color: #333;
    }

    .btn-secondary:hover {
      background-color: #bdc3c7;
    }
  </style>
</head>
<body>
  <div class="modal-overlay">
    <div class="modal-content">
      <button class="modal-close">&times;</button>
      <h2>確認</h2>
      <p>この操作を実行してもよろしいですか？</p>
      <div class="modal-actions">
        <button class="btn btn-primary">実行</button>
        <button class="btn btn-secondary">キャンセル</button>
      </div>
    </div>
  </div>
</body>
</html>

まとめ

inset-inline-startプロパティは、要素のインライン軸の始点からの距離を設定する論理プロパティです。

主な特徴

書字方向に適応：LTR、RTL、縦書きなど、書字方向に応じて自動的に適切な位置を決定
多言語対応：物理プロパティ（left）の代わりに使用することで、言語切り替え時の調整が不要
モダンな設計：CSS Logical Properties仕様に基づく、将来性のある実装方法

使用する場面

多言語サイトの構築
RTL言語（アラビア語、ヘブライ語など）のサポート
縦書きレイアウトの実装
保守性の高いCSSコードの作成

覚えておくべきポイント

positionプロパティがstatic以外である必要がある
LTR環境ではleft、RTL環境ではright、縦書きではtopに相当
他の論理プロパティと組み合わせることで、完全に方向性に適応したレイアウトを構築可能

inset-inline-startを活用することで、書字方向を意識した柔軟で保守性の高いレイアウトを実現できます。

参考リンク

参照:

inset-inline-start - CSS: カスケーディングスタイルシート | MDN

参照:

inset-inline-start - CSS: Cascading Style Sheets | MDN

参照:

CSS Logical Properties and Values Level 1 - W3C

参照:

CSS Box Model Module Level 4 - W3C

参照:

CSS Position Layout Module Level 3 - W3C

概要

leftプロパティとの違い

従来の方法（leftプロパティ）

論理プロパティを使用した方法

比較表

inset-inline-startの基本構文

値の種類

適用条件

書字モードごとの動作

横書き（LTR）環境での動作

横書き（RTL）環境での動作

縦書き環境での動作

使用例

例1：LTR環境での基本的な配置

従来の方法

論理プロパティを使用した方法

例2：RTL環境への対応

例3：相対配置での使用

例4：固定配置での使用

例5：スティッキー配置での使用

実用的なユースケース

ケース1：多言語対応のナビゲーションバー

ケース2：ツールチップの配置

ケース3：ドロワーメニュー

ケース4：バッジの配置

他の論理プロパティとの組み合わせ

推奨される組み合わせ

短縮プロパティとの併用

ブラウザサポート

フォールバックの実装

パフォーマンスとベストプラクティス

1. positionプロパティの設定を忘れない

2. 適切な単位の選択

3. 論理プロパティの一貫した使用

4. calc()との組み合わせ

トラブルシューティング

問題1：プロパティが効かない

問題2：RTL環境で位置が逆にならない

問題3：縦書きで期待した位置にならない

inset-inline-startの注意点

1. 書字方向の影響

2. レスポンシブデザインへの配慮

3. z-indexとの関係

4. アニメーションでの使用

関連プロパティ

インライン軸の配置

ブロック軸の配置

すべての方向のショートハンド

コードサンプル：実践的な実装

多言語対応のモーダルダイアログ

まとめ

主な特徴

使用する場面

覚えておくべきポイント

参考リンク