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

insetは、inset-block-start、inset-inline-end、inset-block-end、inset-inline-startの4つの論理プロパティを一括で設定するショートハンドプロパティです。

insetで1〜4つの値を指定した場合の動作は？

1つの値は全方向、2つは上下/左右、3つは上/左右/下、4つは上/右/下/左の順で適用されます（論理プロパティとして解釈されます）。

insetとtop/right/bottom/leftの違いは？

insetは論理プロパティで書字方向に対応しますが、top/right/bottom/leftは物理プロパティで常に同じ方向を指します。

【CSS】insetプロパティの使い方 - すべての方向の配置を一括指定する

概要

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

insetが必要な理由

4つのプロパティを個別に設定する代わりに、全方向の配置を一度に指定できるため、コードがより簡潔になり、保守性が向上します。特に、要素を画面いっぱいに広げたり、中央配置したりする場合に非常に便利です。

top/right/bottom/leftとの違い

従来の物理プロパティ

.box {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

4つのプロパティを個別に記述: 冗長になりがち
物理方向固定: 常に上下左右の絶対的な方向
書字方向非対応: 縦書きなどで別途設定が必要

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

.box {
    position: absolute;
    inset: 0;  /* 4方向すべてを0に */
}

1つのプロパティで記述: コードが簡潔
論理方向対応: 書字方向に応じて自動調整
柔軟な値指定: 1〜4つの値で様々なパターンに対応

構文と基本的な使い方

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

前提条件

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

.element {
    position: absolute; /* または relative, fixed, sticky */
    inset: 0;
}

値の指定パターン

1つの値を指定

全方向（4つすべて）に同じ値が適用されます。

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

2つの値を指定

1つ目の値がブロック軸（上下）、2つ目の値がインライン軸（左右）に適用されます。

.element {
    position: absolute;
    inset: 10px 20px;
    /* 以下と同じ */
    /* inset-block: 10px; */ /* 上下 */
    /* inset-inline: 20px; */ /* 左右 */
}

3つの値を指定

1つ目がブロック軸の始点、2つ目がインライン軸、3つ目がブロック軸の終端に適用されます。

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

4つの値を指定

順番は「ブロック始点インライン終端ブロック終端インライン始点」です。

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

実践的な使用例

1. 画面全体を覆うオーバーレイ

.modal-overlay {
    position: fixed;
    inset: 0;  /* すべての方向を0に */
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1000;
}

これは最も一般的な使用例で、従来のtop: 0; right: 0; bottom: 0; left: 0;と同じ効果を1行で実現します。

2. 余白を持つ全画面コンテンツ

.fullscreen-content {
    position: fixed;
    inset: 20px;  /* すべての方向から20px */
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    overflow: auto;
}

3. 中央配置パターン

.centered-box {
    position: absolute;
    inset: 0;  /* すべての方向を0に */
    margin: auto;  /* marginのautoで中央配置 */
    inline-size: 400px;
    block-size: 300px;
}

4. ヘッダーとフッターを除いたコンテンツ領域

.app-content {
    position: absolute;
    inset: 60px 0 80px 0;  /* 上60px、右0、下80px、左0 */
    overflow-y: auto;
    padding: 20px;
}

/* または */
.app-content-logical {
    position: absolute;
    inset-block: 60px 80px;  /* 上60px、下80px */
    inset-inline: 0;         /* 左右0 */
    overflow-y: auto;
    padding: 20px;
}

5. サイドパネル

.side-panel {
    position: fixed;
    inset-block: 0;          /* 上下いっぱいに */
    inset-inline-end: 0;     /* 右端に配置 */
    inline-size: 300px;
    background-color: #f5f5f5;
    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);  /* スライドイン */
}

Before/After比較

Before: 個別プロパティを使用

/* 横書き用のオーバーレイ */
.overlay-horizontal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

/* 縦書き用に別途スタイルが必要 */
.overlay-vertical {
    position: fixed;
    /* 縦書きでは方向が変わるため、異なる指定が必要 */
    writing-mode: vertical-rl;
}

/* 余白付きコンテンツ */
.content-with-margin {
    position: fixed;
    top: 20px;
    right: 20px;
    bottom: 20px;
    left: 20px;
}

After: insetを使用

/* 横書きでも縦書きでも同じスタイルで対応 */
.overlay {
    position: fixed;
    inset: 0;
}

/* 書字方向の指定だけで切り替え可能 */
.overlay.vertical {
    writing-mode: vertical-rl;
}

/* 余白付きコンテンツ */
.content-with-margin {
    position: fixed;
    inset: 20px;
}

コードが簡潔になり、書字方向への対応も自動化されます。

書字方向との関係

横書き（horizontal-tb）

.horizontal {
    writing-mode: horizontal-tb;
    position: relative;
}

.horizontal .positioned {
    position: absolute;
    inset: 10px 20px 30px 40px;
    /* 以下と同じ */
    /* top: 10px; */
    /* right: 20px; */
    /* bottom: 30px; */
    /* left: 40px; */
}

縦書き（vertical-rl）

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

.vertical-rl .positioned {
    position: absolute;
    inset: 10px 20px 30px 40px;
    /* 以下と同じ（論理プロパティとして解釈） */
    /* right: 10px;  */ /* block-start */
    /* top: 20px;    */ /* inline-end */
    /* left: 30px;   */ /* block-end */
    /* bottom: 40px; */ /* inline-start */
}

論理プロパティ	物理プロパティ（横書き時）
`inset`	`top` + `right` + `bottom` + `left`
`inset-block`	`top` + `bottom`
`inset-inline`	`left` + `right`
`inset-block-start`	`top`
`inset-block-end`	`bottom`
`inset-inline-start`	`left`
`inset-inline-end`	`right`

ブラウザサポート状況

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

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

フォールバック対応

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

.positioned {
    position: absolute;

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

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

よくあるユースケース

1. モーダルダイアログ

.modal-backdrop {
    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 {
    inline-size: 90%;
    max-inline-size: 600px;
    block-size: auto;
    max-block-size: 90vh;
    background-color: white;
    border-radius: 8px;
    padding: 20px;
}

2. 画像オーバーレイ

.image-container {
    position: relative;
    inline-size: 100%;
    aspect-ratio: 16 / 9;
}

.image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.8),
        transparent
    );
}

.image-caption {
    position: absolute;
    inset-block-end: 20px;
    inset-inline: 20px;
    color: white;
}

3. ローディングスピナー

.loading-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.spinner {
    inline-size: 50px;
    block-size: 50px;
    border: 4px solid #f3f3f3;
    border-block-start: 4px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

4. スライドパネル

.slide-panel {
    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;
}

.slide-panel.open {
    inset-inline-start: 0;
}

5. 全画面ビデオプレーヤー

.video-player.fullscreen {
    position: fixed;
    inset: 0;
    background-color: black;
    z-index: 10000;
}

.video-player.fullscreen video {
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
}

注意点と制限事項

1. position指定が必須

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

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

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

2. 値の順序

4つの値を指定する場合、順序は「block-start inline-end block-end inline-start」です：

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

これは従来のtop right bottom leftとは異なる順序なので注意が必要です。

3. サイズの自動決定

insetですべての方向を指定すると、要素のサイズが自動的に決まります：

.parent {
    position: relative;
    inline-size: 500px;
    block-size: 400px;
}

.child {
    position: absolute;
    inset: 20px;
    /* 結果: */
    /* inline-size: 460px (500 - 20 - 20) */
    /* block-size: 360px (400 - 20 - 20) */
}

4. 個別プロパティとの併用

insetと個別プロパティを併用する場合、後から記述したものが優先されます：

.element {
    inset: 0;
    inset-block-start: 20px;  /* 上だけ20pxに上書き */
}

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

開発者ツールでの確認

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

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

よくある問題

問題: inset: 0を設定したが要素が見えない

解決策:

positionプロパティが設定されているか確認
z-indexが他の要素より低くないか確認
親要素のサイズがあるか確認

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