概要

inset-inlineは、CSSの論理プロパティの一つで、inset-inline-startとinset-inline-endを一括で設定するショートハンドプロパティです。従来のleftとrightを組み合わせたような動作をしますが、書字方向（左から右・右から左・縦書き）に応じて自動的に適用される軸が変わるため、国際化対応や多言語サイトの構築に非常に有効です。

inset-inlineが必要な理由

複数のプロパティを個別に設定する代わりに、インライン軸の両端からの距離を一度に指定できるため、コードがより簡潔になり、保守性が向上します。特に、書字方向が変わる可能性のあるレイアウトでは、一つのスタイル定義で対応できるメリットがあります。

left/rightとの違い

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

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

• left: 常に左端からの距離を指定
• right: 常に右端からの距離を指定
• 書字方向が変わっても適用される方向は変わらない
• 2つのプロパティを別々に記述する必要がある

論理ショートハンドプロパティ（inset-inline）

.box {
    position: absolute;
    inset-inline: 20px;  /* インライン軸の両端から20px */
}

/* または個別に指定 */
.box {
    position: absolute;
    inset-inline: 10px 30px;  /* 始点から10px、終端から30px */
}

• inset-inline: 書字方向に応じて、横書きでは左右、縦書きでは上下になる
• 一つのプロパティで両端の距離を指定可能
• 書字方向の変更に自動対応

構文と基本的な使い方

inset-inline: <'inset-inline-start'> <'inset-inline-end'>?;

前提条件

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

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

値の指定パターン

1つの値を指定

両端（始点と終端）に同じ値が適用されます。

.element {
    position: absolute;
    inset-inline: 20px;
    /* 以下と同じ */
    /* inset-inline-start: 20px; */
    /* inset-inline-end: 20px; */
}

2つの値を指定

最初の値が始点、2番目の値が終端に適用されます。

.element {
    position: absolute;
    inset-inline: 10px 30px;
    /* 以下と同じ */
    /* inset-inline-start: 10px; */
    /* inset-inline-end: 30px; */
}

autoの使用

.element {
    position: absolute;
    inset-inline: auto 20px;  /* 始点は自動、終端は20px */
}

実践的な使用例

1. 水平方向に中央配置

<div class="container">
    <div class="centered-box">中央配置</div>
</div>

.container {
    position: relative;
    inline-size: 800px;
    block-size: 400px;
    background-color: #f0f0f0;
    border: 2px solid #ddd;
}

.centered-box {
    position: absolute;
    inset-inline: 0;  /* 左右を0にして幅いっぱいに */
    margin-inline: auto;  /* 水平方向の中央配置 */
    inline-size: 300px;
    block-size: 100px;
    background-color: #007bff;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

2. サイドバー付きレイアウト

.page-container {
    position: relative;
    min-block-size: 100vh;
}

.sidebar {
    position: fixed;
    inset-inline-start: 0;
    inset-block: 0;
    inline-size: 250px;
    background-color: #f5f5f5;
    border-inline-end: 1px solid #ddd;
}

.main-content {
    position: absolute;
    inset-inline: 250px 0;  /* 左250px（サイドバー）、右0 */
    inset-block: 0;
    overflow-y: auto;
    padding: 20px;
}

3. 余白を持つコンテンツ

.content-area {
    position: absolute;
    inset-inline: 20px;  /* 左右に20pxの余白 */
    inset-block: 60px 80px;  /* 上60px、下80px */
    background-color: white;
    border-radius: 8px;
    padding: 20px;
    overflow-y: auto;
}

4. ドロワーメニュー

.drawer {
    position: fixed;
    inset-block: 0;
    inset-inline-start: -300px;  /* 初期状態は画面外 */
    inline-size: 300px;
    background-color: white;
    box-shadow: 2px 0 8px rgba(0,0,0,0.1);
    transition: inset-inline-start 0.3s ease;
    z-index: 100;
}

.drawer.open {
    inset-inline-start: 0;
}

Before/After比較

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

/* LTR用のスタイル */
.content-ltr {
    position: absolute;
    left: 20px;
    right: 20px;
    top: 60px;
    bottom: 80px;
}

/* RTL用に別途スタイルが必要 */
.content-rtl {
    position: absolute;
    right: 20px;  /* leftの代わり */
    left: 20px;   /* rightの代わり */
    top: 60px;
    bottom: 80px;
}

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

/* LTRでもRTLでも同じスタイルで対応 */
.content {
    position: absolute;
    inset-inline: 20px;     /* インライン軸の両端から20px */
    inset-block: 60px 80px;  /* ブロック軸: 上60px、下80px */
}

/* 書字方向の指定だけで切り替え可能 */
[dir="ltr"] .content {
    /* 左右に余白 */
}

[dir="rtl"] .content {
    /* 左右に余白（自動対応） */
}

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

書字方向との関係

横書き（horizontal-tb, LTR）

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

.horizontal-ltr .positioned {
    position: absolute;
    inset-inline: 20px 40px;
    /* 以下と同じ */
    /* left: 20px; */
    /* right: 40px; */
}

• インライン軸: 左→右
• inset-inline-start: 左端からの距離
• inset-inline-end: 右端からの距離

横書き（horizontal-tb, RTL）

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

.horizontal-rtl .positioned {
    position: absolute;
    inset-inline: 20px 40px;
    /* 以下と同じ */
    /* right: 20px; */
    /* left: 40px; */
}

• インライン軸: 右→左
• inset-inline-start: 右端からの距離
• inset-inline-end: 左端からの距離

縦書き（vertical-rl）

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

.vertical-rl .positioned {
    position: absolute;
    inset-inline: 20px 40px;
    /* 以下と同じ */
    /* top: 20px; */
    /* bottom: 40px; */
}

• インライン軸: 上→下
• inset-inline-start: 上端からの距離
• inset-inline-end: 下端からの距離

関連する論理プロパティ

配置プロパティの対応表

論理プロパティ	物理プロパティ（横書きLTR時）	説明
inset-inline	left + right	インライン軸の両端からの距離
inset-block	top + bottom	ブロック軸の両端からの距離
inset	top + right + bottom + left	すべての方向の距離

insetファミリーの関係

/* 個別プロパティ */
.element {
    inset-inline-start: 10px;
    inset-inline-end: 20px;
}

/* ショートハンド（軸ごと） */
.element {
    inset-inline: 10px 20px;  /* start end */
}

/* 完全なショートハンド */
.element {
    position: absolute;
    inset-block: 30px 40px;
    inset-inline: 10px 20px;

    /* または */
    inset: 30px 20px 40px 10px;  /* block-start inline-end block-end inline-start */
}

実践的な組み合わせ

/* 全方向に余白を持つコンテンツ */
.constrained {
    position: absolute;
    inset-inline: 20px;  /* 左右20px */
    inset-block: 60px;   /* 上下60px */
}

/* インライン方向のみ制約 */
.inline-constrained {
    position: absolute;
    inset-inline: 5%;     /* 左右5% */
    inset-block-start: 0;  /* 上端に */
}

/* 中央配置パターン */
.centered {
    position: absolute;
    inset-inline: 0;
    margin-inline: auto;
    inline-size: 600px;
}

ブラウザサポート状況

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

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

フォールバック対応

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

.positioned {
    position: absolute;

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

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

よくあるユースケース

1. レスポンシブコンテナ

.container {
    position: relative;
    min-block-size: 100vh;
}

.content {
    position: absolute;
    inset-inline: 20px;
    max-inline-size: 1200px;
    margin-inline: auto;
    padding: 20px;
}

@media (min-width: 768px) {
    .content {
        inset-inline: 10%;
    }
}

2. モーダルダイアログ

.modal-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content {
    position: relative;
    inset-inline: 20px;  /* 左右に20pxの余白を確保 */
    max-inline-size: 600px;
    background-color: white;
    border-radius: 8px;
    padding: 20px;
}

3. スティッキーヘッダー

.sticky-header {
    position: sticky;
    inset-block-start: 0;
    inset-inline: 0;
    background-color: white;
    border-block-end: 1px solid #e0e0e0;
    padding: 16px;
    z-index: 100;
}

.sticky-header-content {
    max-inline-size: 1400px;
    margin-inline: auto;
    padding-inline: 20px;
}

4. カードグリッド

.card-grid {
    position: relative;
    padding-inline: 20px;
}

.card {
    position: relative;
    inline-size: 100%;
    padding: 16px;
    border: 1px solid #ddd;
    border-radius: 8px;
}

@media (min-width: 768px) {
    .card {
        inline-size: calc(50% - 10px);
    }
}

注意点と制限事項

1. position指定が必須

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

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

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

2. 値の順序

2つの値を指定する場合、順序はstart endです：

.element {
    inset-inline: 10px 30px;
    /* inset-inline-start: 10px; */
    /* inset-inline-end: 30px; */
}

3. サイズとの関係

inset-inlineで両端を指定すると、要素のインラインサイズが決まります：

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

.child {
    position: absolute;
    inset-inline: 50px;  /* 左右から50pxずつ */
    /* 結果: inline-size: 700px (800 - 50 - 50) */
}

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

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

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

.child {
    position: absolute;
    inset-inline: 10% 20%;
    /* inset-inline-start: 100px (10% of 1000px) */
    /* inset-inline-end: 200px (20% of 1000px) */
}

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

開発者ツールでの確認

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

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

よくある問題

問題: inset-inlineを設定したが要素が意図した位置にない

解決策:

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

問題: 要素のサイズが意図と異なる

解決策:

• inset-inlineで両端を指定すると、要素のインラインサイズが自動的に決まることを理解する
• 明示的にinline-sizeを指定する場合は、inset-inlineの一方をautoにする

まとめ

inset-inlineプロパティは、インライン軸方向の配置を簡潔に記述できる強力なショートハンドプロパティです。

使用時のポイント

• コードの簡潔化: 2つのプロパティを1つにまとめられる
• 多言語対応: 一つのスタイル定義でLTR・RTL・縦書きの全てに対応
• 保守性の向上: 書字方向の変更に強いコードが書ける
• 柔軟な配置: 中央配置や両端からの余白を簡単に実現

推奨される使用場面

• 要素をインライン軸方向に中央配置したい場合
• サイドバーを除いたコンテンツ領域を定義する場合
• 書字方向が変わる可能性のあるレイアウト
• 新規プロジェクトでのモダンなCSS実装

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

参考文献

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