inset プロパティ
最終更新：2026-09-13
inset inset プロパティ
inset プロパティは、top、right、bottom、left の 4 つのオフセットプロパティのショートハンドで、配置された要素のすべての辺のオフセットを一度に設定します。デフォルト値の auto はオフセットなしを意味します。position が static 以外の要素にのみ適用され、構文は margin と同様に 1〜4 個の値をサポートします。
| カテゴリ | |
|---|---|
| 初期値 | auto |
| 継承 | いいえ |
| 適用対象 | |
| アニメーションタイプ | |
| CSS バージョン | CSS3 |
| 状態 | 標準 |
📝 構文
inset: auto | <length> | <percentage>;⚙️ 値
| 値 | タイプ | 説明 |
|---|---|---|
auto | キーワード | オフセットなし。 |
<length> | <percentage> | タイプ | 4 辺すべてのオフセットのショートハンド。 |
▶ 例
以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：
🌐 ブラウザーサポート
| ブラウザー |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| inset | ✓ v79 | ✓ v12 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| すべての主要ブラウザーでサポート | |||||
ヒント： inset:0 は、絶対配置された要素を親要素全体で覆うようにし、オーバーレイや全画面カバー層によく使用されます。
❓ よくある質問
Qinset と top/right/bottom/left の違いは何ですか？
Ainset は top、right、bottom、left のショートハンドで、1 つの宣言ですべての方向を設定し、コードをすっきりさせます。4 つの個別のプロパティは、方向ごとに正確に制御でき、inset と混在させることもでき、個別の値が優先されます。どちらも最終的には、配置された要素に対して同じ値型で同じオフセットを設定するため、相互に置き換え可能です。
Qinset はいくつの値を受け入れますか？
A1〜4 個で、margin と同じ規則に従います。1 つの値は 4 辺すべてを設定します（例：inset:10px;）。2 つは上下と左右を設定します（例：inset:10px 20px;）。3 つは上、左右、下を設定します。4 つは上、右、下、左を時計回りに設定します。値は auto、長さ、パーセンテージを自由に混在できます。したがって、inset:0 10px 20px 30px は 1 つの宣言で各辺を個別に設定します。
Qinset:0 は何をするのですか？
Ainset:0 は、top、right、bottom、left をすべて 0 に設定します。relative な親の中にある absolute 要素の場合、親を完全に埋めるように引き伸ばされ、通常はオーバーレイ層、全画面カバー、半透明の背景を持つローディングマスクに使用されます。width と height も設定されている場合は、要素を親の左上隅に配置するのと同等になります。
Qinset のブラウザ対応状況はどうなっていますか？
Ainset はモダンな論理プロパティで、Chrome 87+、Edge 87+、Firefox 66+、Safari 14.1+ でサポートされており、すべての主要ブラウザで使用できます。非常に古いブラウザの場合は、top、right、bottom、left の 4 つの個別プロパティにフォールバックしてください。論理バリアントの inset-block と inset-inline はやや遅れて登場したため、使用する際はその違いを覚えておき、対象ブラウザで物理的と論理的な動作を常にテストしてください。
🏷️ 関連プロパティ
💡 関連事例
📚 関連チュートリアル
