CSSを書いていると、ときどき見かける inset: 0;。
一見シンプルなのに、「何をしているのか分かりづらい…」という声がよくあります。
この記事では、inset の役割と、inset: 0; が実際にどんな効果を持つのかをわかりやすく解説します。
insetとは？
inset は、要素の位置を決めるための ショートハンドプロパティです。
本来なら
top
right
bottom
left
の4つをそれぞれ書く必要がありますが、inset を使うとそれらをまとめて指定できます。
inset: 0; が意味すること
inset: 0; と書かれている場合、これは
top: 0
right: 0
bottom: 0
left: 0
を まとめて指定しているのと完全に同じ意味になります。
つまり、要素を親要素の四隅にピッタリ貼り付ける配置です。
特に、position: absolute や position: fixed と組み合わせて使われることが多いです。
何が便利なの？
position: absolute; inset: 0; とすると、
要素が親の中でいっぱいに広がる
background用の疑似要素（::before / ::after）を全面に敷ける
モーダルのオーバーレイなどを一瞬で全画面化できる
といった便利な使い方ができます。
わざわざ
top: 0; right: 0; bottom: 0; left: 0;
と長く書く必要がありません。
よくある利用シーン
背景装飾用の ::before を全面に広げたいとき
モーダルの黒い半透明の背景を全画面にしたいとき
スライダーやカードの上に重ねるレイヤーを作るとき
メディア要素の上にグラデーションを敷きたいとき
「とにかく全体に広げたい」時の定番テクニックです。
まとめ
inset: 0; は
top、right、bottom、left をすべて 0 にするショートハンドです。
「絶対配置の要素を親いっぱいに広げる」
この役割だけ覚えておけば、実務でもかなり使いやすくなります。
