CSS辞書

inset

レイアウト・配置

top、right、bottom、leftを一括で指定できる短縮プロパティです。position: absoluteやfixedと組み合わせて使用します。

構文

Syntax
inset: <top> <right> <bottom> <left>

Tailwindでは

inset-0inset: 0
inset-x-0inset-inline: 0
top-0top: 0
-top-4top: -16px

一般形: inset-{n} / top-{n} / bottom-{n}(n×4px)

任意値: inset-[10%]

コード例

1

inset: 20px;
実行結果
inset: 20px
全方向から20pxの位置

全方向から20px

2

inset: 10px 30px;
実行結果
inset: 10px 30px
上下10px、左右30px

上下10px、左右30px

3

inset: auto 10px 10px auto;
実行結果
右下固定
inset: auto 10px 10px auto(右下)

右10px、下10px(左上は自動)

💡 TIPS

モーダルやオーバーレイを親要素いっぱいに広げたい時、inset: 0;が便利。コードが短くなり読みやすい。

⚠️ よくある間違い

position: static(デフォルト)では効果がない。position: absolute、fixed、relative、stickyと組み合わせて使う。

🤖 AIがよく間違えるポイント

insetはtop/right/bottom/leftの一括指定で、値の順序もmarginと同じ時計回りです。inset: 0による全面配置(オーバーレイの定番)が最頻出ですが、position指定がないと何も起きない点はtop等と同じです。書字方向対応が必要ならinset-inline/inset-blockという論理版があります。

💬 AIへの頼み方

モーダルの背景オーバーレイをposition: fixed + inset: 0の定番パターンで実装して

そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。

関連プロパティ

このプロパティを使ったUIレシピ

ブラウザサポート

Baseline 広く利用可能
Chrome
87+
Firefox
66+
Safari
14.1+
Edge
87+