CSSのinherit / initial / unset / revertとは？違いと使い分けを徹底解説

CSSを書いていると、inherit や initial、unset、revert といった値を見かけることがあります。
「結局どれを使えばいいの？」「似てて分からん…」となりがちですが、使いどころを理解するとスタイル調整が一気に楽になります。

この記事では、inherit / initial / unset / revert（＋revert-layer）の意味と使い分けを、実務目線で分かりやすくまとめます。

inherit：親の値を強制的に引き継ぐ

意味

inherit は親要素の計算後の値（computed value）をそのまま子要素へコピーします。

.child {
  color: inherit;
}

ポイント

• もともと継承されるプロパティでも「確実に親と同じ」にできます
• もともと継承されないプロパティでも、inherit と書けば継承できます

initial：プロパティの初期値に戻す

意味

initial はCSS仕様で定められた「初期値」に戻す値です。

.child {
  color: initial;
}

注意点（重要）

initial は「ブラウザ標準の見た目」に戻すとは限りません。
あくまでCSSの仕様上の初期値に戻すだけです。

例：display: initial は危険

display の初期値は inline なので、div がインラインになってレイアウトが崩れる可能性があります。

div {
  display: initial; /* divがinlineになり得る */
}

よく使う場面

• 一部のプロパティだけ「無に近い状態」に戻したいとき
• ただし display 系には注意

unset：継承ならinherit、非継承ならinitial

意味

unset の挙動はこうなります。

• 継承するプロパティ → inherit と同じ
• 継承しないプロパティ → initial と同じ

.child {
  color: unset;   /* 継承するのでinherit相当 */
  margin: unset;  /* 継承しないのでinitial相当 */
}

使いどころ

「余計なスタイルをとりあえず自然な状態に戻したい」そんなときは基本 unset が最も扱いやすいです。

all: unset もよく使う

コンポーネントのスタイルを一旦リセットしたいときに便利です。

.my-component {
  all: unset;
}

revert：作者CSSを取り消してブラウザ標準へ戻す

意味

revert は initial とは違い、作者のCSSを無かったことにして、ブラウザ標準（UA stylesheet）に戻す挙動です。

button {
  all: revert;
}

initialとの違い

initial：CSS仕様の初期値へ
revert：ブラウザが元々持っている標準スタイルへ

例：buttonのリセット

buttonを素のデフォルト見た目に戻したいなら revert の方が自然です。

button.reset {
  all: revert;
}

revert-layer：@layer使用時にだけ便利

CSS Cascade Layers（@layer）を使っている場合、そのレイヤーの変更だけを取り消すのが revert-layer です。

.my-component {
  color: revert-layer;
}

Bootstrapなどをレイヤー管理している場合に便利です。

早見表：結局どれを使えばいい？

まとめ

inherit / initial / unset / revert は似ていますが、目的が違います。

• 親に合わせる → inherit
• CSS仕様の初期値へ → initial
• 自然に戻す → unset
• ブラウザ標準へ戻す → revert

使い分けできるようになると「謎のCSS上書き」を最短で解決できるようになります。