概要

inset-inline-endは、CSSの論理プロパティの一つで、要素をインライン軸の終端から指定した距離に配置するためのプロパティです。従来のrightプロパティとは異なり、書字方向（左から右・右から左）に応じて自動的に適用される軸が変わるため、国際化対応や多言語サイトの構築に非常に有効です。

inset-inline-endが必要な理由

Webサイトを多言語対応する際、英語や日本語は左から右（LTR）、アラビア語やヘブライ語は右から左（RTL）の書字方向を使用します。従来のleft、rightを使用すると、書字方向ごとに異なるCSSを記述する必要がありました。inset-inline-endを使用することで、一つのスタイル定義で両方の書字方向に対応できます。

rightプロパティとの違い

従来の物理プロパティ（right）

.box {
    position: absolute;
    right: 20px;  /* 常に右端からの距離 */
    top: 10px;    /* 常に上端からの距離 */
}

• right: 常に右端からの距離を指定
• left: 常に左端からの距離を指定
• 書字方向が変わっても適用される方向は変わらない

論理プロパティ（inset-inline-end）

.box {
    position: absolute;
    inset-inline-end: 20px;    /* インライン軸の終端からの距離 */
    inset-block-start: 10px;   /* ブロック軸の始点からの距離 */
}

• inset-inline-end: 書字方向に応じて、LTRでは右、RTLでは左になる
• inset-block-start: 書字方向に関わらずブロック軸の始点（通常は上）
• 書字方向の変更に自動対応

構文と基本的な使い方

inset-inline-end: auto | <length> | <percentage>;

前提条件

inset-inline-endが機能するには、要素にpositionプロパティが必要です：

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

主な値の詳細

auto（デフォルト）

ブラウザが自動的に位置を決定します。

.element {
    position: absolute;
    inset-inline-end: auto;
}

具体的な長さ指定

px、em、remなどの単位で距離を指定します。

.box {
    position: absolute;
    inset-inline-end: 20px;  /* 固定距離 */
    inset-inline-end: 2rem;  /* フォントサイズの2倍 */
}

パーセンテージ

親要素のインラインサイズに対する割合で指定します。

.element {
    position: absolute;
    inset-inline-end: 10%;  /* 親要素の10%の位置 */
}

実践的な使用例

1. 閉じるボタンの配置（LTR対応）

<div class="modal">
    <button class="close-button">×</button>
    <div class="modal-content">コンテンツ</div>
</div>

.modal {
    position: relative;
    inline-size: 500px;
    block-size: 300px;
    background-color: white;
    border-radius: 8px;
    padding: 20px;
}

.close-button {
    position: absolute;
    inset-inline-end: 10px;  /* インライン軸の終端から10px */
    inset-block-start: 10px;  /* ブロック軸の始点から10px */
    inline-size: 30px;
    block-size: 30px;
    background-color: #f44336;
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
}

LTRでは右上、RTLでは左上に自動配置されます。

2. 通知バッジの配置

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

.badge {
    position: absolute;
    inset-inline-end: -8px;  /* 右端から少し右 */
    inset-block-start: -8px;  /* 上端から少し上 */
    inline-size: 20px;
    block-size: 20px;
    background-color: #ff4444;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

3. サイドパネル

.side-panel {
    position: fixed;
    inset-block: 0;           /* 上下いっぱいに */
    inset-inline-end: 0;      /* インライン軸の終端に配置 */
    inline-size: 300px;
    background-color: white;
    box-shadow: -2px 0 8px rgba(0,0,0,0.1);
    transform: translateX(100%);
    transition: transform 0.3s ease;
}

.side-panel.open {
    transform: translateX(0);
}

/* RTLの場合は自動的に左側から出現 */
[dir="rtl"] .side-panel {
    box-shadow: 2px 0 8px rgba(0,0,0,0.1);
    transform: translateX(-100%);
}

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

4. フローティングアクションボタン

.fab {
    position: fixed;
    inset-inline-end: 20px;  /* インライン軸の終端から20px */
    inset-block-end: 20px;   /* ブロック軸の終端から20px */
    inline-size: 56px;
    block-size: 56px;
    background-color: #2196f3;
    color: white;
    border-radius: 50%;
    border: none;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    cursor: pointer;
    z-index: 1000;
}

Before/After比較

Before: 物理プロパティを使用

/* LTR用のスタイル */
.action-button-ltr {
    position: fixed;
    right: 20px;
    bottom: 20px;
}

/* RTL用に別途スタイルが必要 */
.action-button-rtl {
    position: fixed;
    left: 20px;   /* rightの代わり */
    bottom: 20px;
}

After: 論理プロパティを使用

/* LTRでもRTLでも同じスタイルで対応 */
.action-button {
    position: fixed;
    inset-inline-end: 20px;   /* インライン軸の終端から20px */
    inset-block-end: 20px;    /* ブロック軸の終端から20px */
}

/* 書字方向の指定だけで切り替え可能 */
[dir="ltr"] .action-button {
    /* 右下に配置される */
}

[dir="rtl"] .action-button {
    /* 左下に配置される */
}

書字方向に依存しない一つのスタイル定義で、両方のレイアウトに対応できます。

書字方向との関係

左から右（LTR: horizontal-tb, direction: ltr）

.ltr {
    direction: ltr;
    position: relative;
}

.ltr .positioned {
    position: absolute;
    inset-inline-end: 20px;    /* = right: 20px */
    inset-block-start: 10px;   /* = top: 10px */
}

• インライン軸: 左→右
• ブロック軸: 上→下
• inset-inline-endは右端からの距離になる

右から左（RTL: horizontal-tb, direction: rtl）

.rtl {
    direction: rtl;
    position: relative;
}

.rtl .positioned {
    position: absolute;
    inset-inline-end: 20px;    /* = left: 20px */
    inset-block-start: 10px;   /* = top: 10px */
}

• インライン軸: 右→左
• ブロック軸: 上→下
• inset-inline-endは左端からの距離になる

縦書き（vertical-rl）

.vertical {
    writing-mode: vertical-rl;
    position: relative;
}

.vertical .positioned {
    position: absolute;
    inset-inline-end: 20px;    /* = bottom: 20px */
    inset-block-start: 10px;   /* = right: 10px */
}

• インライン軸: 上→下
• ブロック軸: 右→左
• inset-inline-endは下端からの距離になる

関連する論理プロパティ

配置プロパティの対応表

| 論理プロパティ | 物理プロパティ（LTR時） | 説明 | |---|---|---| | inset-inline-start | left | インライン軸の始点からの距離 | | inset-inline-end | right | インライン軸の終端からの距離 | | inset-block-start | top | ブロック軸の始点からの距離 | | inset-block-end | bottom | ブロック軸の終端からの距離 |

一括指定プロパティ

/* insetショートハンド */
.element {
    position: absolute;

    /* 4つの値を個別に指定 */
    inset-block-start: 10px;
    inset-inline-end: 20px;
    inset-block-end: 30px;
    inset-inline-start: 40px;

    /* insetで一括指定 */
    inset: 10px 20px 30px 40px;
}

/* インライン方向のみ一括指定 */
.element {
    inset-inline: 40px 20px;  /* start end */
}

ブラウザサポート状況

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

ブラウザ	サポート開始バージョン
Chrome	87+
Firefox	63+
Safari	14.1+
Edge	87+
Opera	73+

フォールバック対応

古いブラウザをサポートする必要がある場合：

.positioned {
    position: absolute;

    /* フォールバック: 物理プロパティを先に記述 */
    right: 20px;
    top: 10px;

    /* モダンブラウザ: 論理プロパティで上書き */
    inset-inline-end: 20px;
    inset-block-start: 10px;
}

よくあるユースケース

1. ツールチップの矢印

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

.tooltip-arrow {
    position: absolute;
    inset-inline-end: -8px;  /* ツールチップの外側 */
    inset-block-start: 50%;
    transform: translateY(-50%);
    inline-size: 0;
    block-size: 0;
    border: 8px solid transparent;
    border-inline-start-color: #333;
}

2. ドロップダウンメニュー

.dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-end: 0;  /* 右揃え（LTR）、左揃え（RTL） */
    margin-block-start: 4px;
    inline-size: 200px;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

3. ステータスインジケーター

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

.status-indicator {
    position: absolute;
    inset-inline-end: 0;
    inset-block-end: 0;
    inline-size: 12px;
    block-size: 12px;
    background-color: #4caf50;
    border: 2px solid white;
    border-radius: 50%;
}

4. スクロールトップボタン

.scroll-top {
    position: fixed;
    inset-inline-end: 30px;
    inset-block-end: 30px;
    inline-size: 50px;
    block-size: 50px;
    background-color: #333;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s;
}

.scroll-top.visible {
    opacity: 1;
}

注意点と制限事項

1. position指定が必須

inset-inline-endは配置プロパティなので、positionがstatic以外である必要があります：

/* 動作しない例 */
.element {
    /* position指定なし（デフォルトはstatic） */
    inset-inline-end: 20px;  /* 効果なし */
}

/* 正しい例 */
.element {
    position: relative;  /* または absolute, fixed, sticky */
    inset-inline-end: 20px;  /* 効果あり */
}

2. パーセンテージの基準

パーセンテージは親要素の対応する軸のサイズを基準にします：

.parent {
    position: relative;
    inline-size: 600px;
}

.child {
    position: absolute;
    inset-inline-end: 10%;  /* 親のinline-size（600px）の10% = 60px */
}

3. 書字方向の明示的な指定

書字方向が明確でない場合は、HTML要素で明示的に指定します：

<!-- LTR -->
<div dir="ltr">
    <button class="close-button">×</button>
</div>

<!-- RTL -->
<div dir="rtl">
    <button class="close-button">×</button>
</div>

4. transformとの組み合わせ

inset-inline-endとtransformを組み合わせる場合：

.slide-in {
    position: fixed;
    inset-inline-end: 0;
    inset-block: 0;
    inline-size: 300px;
    /* スライドアウト時 */
    transform: translateX(100%);
    transition: transform 0.3s ease;
}

/* RTLでは方向を反転 */
[dir="rtl"] .slide-in {
    transform: translateX(-100%);
}

.slide-in.open {
    transform: translateX(0);
}

デバッグとトラブルシューティング

開発者ツールでの確認

ブラウザの開発者ツールを使用すると、inset-inline-endの計算値を確認できます：

1. 要素を右クリック→「検証」
2. Computedタブで計算済みの値を確認
3. 書字方向に応じて物理プロパティに変換された値が表示される

よくある問題

問題: inset-inline-endを設定したが効果がない

解決策:

• positionプロパティが設定されているか確認
• 親要素にposition: relativeが設定されているか確認（absolute配置の場合）
• 書字方向が意図通りか確認

問題: RTLで意図した位置に配置されない

解決策:

• dir属性が正しく設定されているか確認
• CSS の direction プロパティが設定されているか確認
• ブラウザの開発者ツールで計算済みスタイルを確認

まとめ

inset-inline-endプロパティは、書字方向に依存しない柔軟な配置を実現するための重要なツールです。

使用時のポイント

• 多言語対応: 一つのスタイル定義でLTR・RTLの両方に対応
• 保守性の向上: 書字方向の変更に強いコードが書ける
• モダンなアプローチ: CSS論理プロパティの標準的な使用方法
• 段階的な移行: 既存のrightから徐々に移行可能

推奨される使用場面

• 多言語サイトの構築（特にアラビア語、ヘブライ語などのRTL言語対応）
• 書字方向が変わる可能性のあるアプリケーション
• 新規プロジェクトでのモダンなCSS実装
• 国際化を考慮したUIコンポーネント

今後のWeb開発では、論理プロパティの使用が標準になっていくと考えられます。inset-inline-endを含む論理プロパティを積極的に活用することで、より柔軟で保守性の高いスタイルシートを作成できます。

参考文献

• inset-inline-end - CSS: Cascading Style Sheets | MDN
• CSS Logical Properties and Values - W3C
• CSS Positioned Layout Module - W3C
• Understanding Logical Properties And Values - Smashing Magazine