CSSのinheritとは｜継承一覧と5つの値の違いを実測で比較

CSS では、ある要素のプロパティに何も指定されていないとき、そのプロパティが「継承プロパティ」なら親の値を受け取り、「非継承プロパティ」なら初期値になります。inherit は、この仕組みを指定で上書きして「親の値を受け取る」側に倒すキーワードです。

flowchart TD
    A{宣言がある?} -->|ある| B[その値を使う<br>inherit は親の値]
    A -->|ない| C{継承される?}
    C -->|はい| D[親の計算値<br>color・font]
    C -->|いいえ| E[初期値<br>margin・border]

よく調べられることの答えを先にまとめます。

確認環境：Ubuntu 24.04.5 LTS の上で、Python 3.13.18 の http.server を 127.0.0.1 のポートに起動して自作のテスト用ページを置き、Chromium 153.0.8010.12（Chrome for Testing・ヘッドレス）を playwright-core 1.63.0（Node.js 22.23.4）から操作しました。値はすべて getComputedStyle() で読み、ブラウザが既定で当てているスタイルは Chrome DevTools Protocol の CSS.getMatchedStylesForNode で取り出しました。キーワードの定義は MDN と W3C の CSS Cascading and Inheritance、フォーム部品の扱いは MDN の「Styling web forms」、ブラウザの既定のスタイルは Chromium のソースコード（html.css）で確かめています。Firefox・Safari は手元で動かしておらず、ここに書いた計算値は Chromium で確かめたものです。図は mermaid で描画を確かめています（確認日 2026年10月29日）。

CSSの継承とは（inheritの意味）

この節では、CSS の「継承」の意味と、inherit がその中で何をするのかが分かります。

継承（inheritance）は、ある要素のプロパティに値が指定されなかったときに、親要素から値を受け取る仕組みです。 MDN は、CSS のプロパティを次の2種類に分けて説明しています。

• 継承プロパティ：値が指定されないと、親要素の計算値になる（文書のいちばん外側の html 要素だけは初期値）。
• 非継承プロパティ：値が指定されないと、そのプロパティの初期値になる。

たとえば body に color: red を書くと、中の p や span の文字も赤になります。color が継承プロパティだからです。一方、body に border: 1px solid を書いても、中の p に枠線は付きません。border は非継承プロパティで、border-style の初期値が none だからです。

inherit は、この既定の動きに関係なく「親の値を使う」と指定するキーワードです。 MDN の定義は次のとおりです。

inherit は CSS のキーワードで、要素のプロパティの計算値を親要素から取得するよう指定します。 CSS の一括指定 all を含め、すべての CSS プロパティに適用することができます。

なぜ全部のプロパティが継承されないのか

もし border や margin まで継承されると、外側の箱に付けた枠線が、中の段落・リンク・強調のすべてに付いてしまいます。文字の見た目（色・書体・行の高さ）は文書全体でそろえたいことが多く、箱の形（余白・枠・大きさ）は要素ごとに決めたいことが多い、という考え方で、プロパティごとに継承するかどうかが決まっています。各プロパティが継承されるかどうかは、仕様と MDN の各ページの「継承」の欄に書かれています。

inherit が受け取るのは「計算値」

inherit が受け取るのは、親に書かれた文字列ではなく、親の「計算値（computed value）」です。 2em と書かれていれば、親の文字の大きさで px に直した値を受け取ります。この違いは line-height や em で結果を大きく変えるため、「継承されるのは計算値」の節で実測します。MDN は「親要素が包含ブロックではなかった場合であっても、常に文書ツリー内の親要素から継承が行われます」と注記しています。position: absolute で別の場所に表示される要素も、継承の元はあくまで HTML の上での親です。

継承されるプロパティ・されないプロパティ一覧（getComputedStyleで実測）

この節では、よく使う41個のプロパティが実際に継承されるかどうかを、Chromium で確かめた結果で分かります。

親だけに値を付け、何も書いていない子の getComputedStyle() を読む、という方法で1つずつ確かめました。 子の値が親と同じになり、しかも何もしないときの値と違えば「継承された」と判断します。使ったコードの中心です。

for (const [p, v] of props) {             // 例：['color', 'rgb(200, 0, 0)']
  root.innerHTML = '';
  const parent = document.createElement('section');
  const child = document.createElement('section');
  parent.appendChild(child); root.appendChild(parent);
  const before = getComputedStyle(child).getPropertyValue(p);  // 何もしないときの値
  parent.style.setProperty(p, v);                              // 親だけに値を付ける
  const cv = getComputedStyle(child).getPropertyValue(p);      // 子の値
  child.style.setProperty(p, 'inherit');                       // 子に inherit を付ける
  const ci = getComputedStyle(child).getPropertyValue(p);
  console.log(p, cv === v && cv !== before ? '継承された' : '継承されない', ci);
}

継承された21個

継承されなかった20個

• ※1 border-top-width：親に幅だけ付けると、親の計算値も 0px でした。border-style が none のとき、枠線の幅の計算値は0になります。枠線を継承させたいときは border: inherit のように一括で受け取ります。
• ※2 width：何も書いていない子も 300px と表示されましたが、継承ではありません。ブロック要素が親の幅いっぱいに広がった結果です。子を display: inline-block にすると、子の幅は文字の幅（27.0625px）になりました。getComputedStyle() の width は、表示に使われた値（px）を返すため、継承と見分けにくい代表例です。
• ※3 text-decoration：継承はされませんが、親の下線は子の文字にも引かれて見えます。「継承と見間違えやすい現象」の節で扱います。

大まかな見分け方は、「文字の見た目と読み方に関わるものは継承される、箱の形と置き方に関わるものは継承されない」です。 ASCII.jp の解説も同じ考え方で、継承される側に color・font・line-height・text-align・visibility などを挙げています。迷ったときは MDN の各プロパティのページで「継承」の欄（「あり」「なし」）を見ます。

DevTools で継承元を確かめる

Chrome の DevTools の「Elements」→「Styles」には、要素に直接当たったルールの下に「Inherited from 親のセレクター」（Chrome DevTools の公式ドキュメントでは Inherited from <element_name>）として、継承の元になったルールが並びます。同じ情報を DevTools Protocol で取り出すと、.card の中の span には次のように継承元が並びました（ブラウザの既定のルールは省いています）。

CSS.getMatchedStylesForNode(#sp) の inherited
  inh 1 regular .card  color:rgb(51, 51, 51); padding:16px; line-height:1.7
  inh 3 regular body   font-family:Georgia, serif

.card のルールには padding も入っていますが、padding は継承されないため span には付きません。「どこから来た値か」を探すときは、Styles の下のほうの「Inherited from」を上から順に見ます。

inheritの使い方（継承しないプロパティを親から受け取る）

この節では、inherit を書く場面と、書いても効かない書き方が分かります。

inherit がよく使われるのは、「ブラウザや別のルールが子に値を付けていて、親の値が届かない」ときと、「継承されないプロパティを親にそろえたい」ときです。

/* 見出しは全体で緑 */
h2 { color: green; }

/* サイドバーの中の見出しだけ、周りの文字色を使う */
.sidebar h2 { color: inherit; }

/* 継承されない border を親から受け取る */
.note { border: 2px solid #e88e2c; }
.note p { border: inherit; }

一括指定（ショートハンド）の一部だけに inherit は書けない

border: 1px solid inherit; のように、一括指定の一部だけを inherit にする書き方は無効です。 無効な宣言はまるごと捨てられるため、枠線そのものが付きません。Chromium の CSS.supports() で確かめた結果です。

CSS.supports('border', '1px solid inherit')       // false（無効）
CSS.supports('margin', '10px inherit 20px 15px')  // false（無効）
CSS.supports('border', 'inherit')                 // true（一括指定まるごとなら有効）
CSS.supports('all', 'inherit')                    // true

一部だけを親から受け取りたいときは、個別のプロパティで書きます。

.child {
  margin: 10px 0 20px 15px;
  margin-right: inherit;      /* 右だけ親の値 */
  border: 1px solid;
  border-color: inherit;      /* 色だけ親の値 */
}

inherit は直接の親からしか受け取らない

inherit が見るのは直接の親の計算値です。祖父母に height: 100px があっても、間の親に height が無ければ、親の計算値は auto で、子の height: inherit も auto になります。祖先から値を届けたいときは、間の要素にも inherit を書くか、CSS 変数（カスタムプロパティ）で値を渡します。

inherit・initial・unset・revert・revert-layerの違い（同じ要素で比較）

この節では、どのプロパティにも書ける5つの値（CSS 全体キーワード）の違いが、同じ見出しに当てた実測で分かります。

5つとも「この要素にどの値を使うか」を決め直すキーワードですが、戻る先が違います。 MDN の説明を短くまとめると次のとおりです。

実測：同じ h1 に5つの値を当てる

次の CSS で、黄色い背景の section.parent の中に h1.k を置き、theme レイヤーの2つ目のルールで6つのプロパティにまとめて同じキーワードを当てました。

@layer base, theme;
@layer base  { h1 { color: green; font-size: 44px; margin-top: 5px; } }
@layer theme {
  h1.k { color: purple; font-weight: 300; display: flex; background-color: pink; }
  h1.k { color: KW; font-size: KW; font-weight: KW;          /* KW に各キーワード */
         display: KW; margin-top: KW; background-color: KW; }
}
.parent { color: rgb(255, 0, 0); font-size: 20px; font-weight: 900;
          display: inline-block; margin-top: 30px; background-color: yellow; }

getComputedStyle() で読んだ h1 の値です。

• revert の color が赤（親の色）になったのは、ブラウザの既定のスタイルに h1 の color が無いためです。 既定にも値が無いプロパティは、継承プロパティなら親の値、そうでなければ初期値になります。
• revert の margin-top の 26.8px は、Chromium の既定の margin-block: 0.67em を、この h1 の 40px で計算した値です（40 × 0.67 = 26.8）。
• revert-rule は、MDN が「Baseline 2026（新しく利用可能）」と表示している新しい値です。手元の Chromium 153 では CSS.supports('color', 'revert-rule') が true でした。以前の版のブラウザでは無効な値として捨てられるので、使うときは対応状況を MDN で確かめます。

initial を「元に戻す」の意味で使わない

allプロパティでまとめてリセットする（all: unset・all: revert）

この節では、すべてのプロパティに一度にキーワードを当てる all の動きと、対象外のプロパティが分かります。

all は、ほぼすべてのプロパティを一度に inherit・initial・unset・revert・revert-layer にする一括指定です。 MDN は、unicode-bidi・direction・CSS 変数（カスタムプロパティ）は対象外だと書いています。

赤い文字・20px の .wrap の中の h2（自分で margin-top: 3px と青い枠線を付けたもの）に all を当てた結果です。

• all: revert は、作者の CSS（3px の余白と青い枠線）を消し、h2 の既定（1.5em・太字・0.83em の余白）に戻しました。 30px は親 20px の1.5倍、24.9px は 30 × 0.83 です。
• すべての値で unicode-bidi は isolate のまま変わりませんでした。Chromium の既定のスタイルが h2 に付けている値で、all の対象外だからです。
• all: initial は、継承される color・font まで初期値（黒・16px）にします。周りの文字に合わせたいなら all: unset です。

all: unset で button を作り直す

button に all: unset を当てると、ブラウザの見た目（灰色の背景・outset の枠線・余白）が全部消え、周りの文字の書体と大きさになりました。

キーボードの Tab で移れること（tabIndex は 0）と、focus() で選択できることは残りました。ただし、フォーカスしたときの枠（outline）も消えるため、:focus-visible の見た目を自分で書きます。all: unset のあとは、display: inline-block・cursor: pointer・padding を書き足して作り直します。

.btn-reset {
  all: unset;
  display: inline-block;
  padding: 0.5em 1em;
  cursor: pointer;
}
.btn-reset:focus-visible {
  outline: 2px solid currentColor;   /* 消えたフォーカスの枠を戻す */
  outline-offset: 2px;
}

リセット CSS（ブラウザの差をならす CSS）の選び方は、関連記事「リセットCSSおすすめ比較2026 コピペで使える最小構成と選び方」で扱っています。

buttonやinputがフォントを継承しない理由と直し方

この節では、フォームの部品だけ書体と大きさが周りと違う原因と、直す CSS が分かります。

font は継承プロパティですが、button・input・select・textarea には、ブラウザの既定のスタイルが font を直接指定しています。 子に値が指定されているので、親の値は届きません。Chromium のソースコード（html.css）には次のルールがあります。

input, textarea, select, button {
    margin: 0__qem;
    font: -webkit-small-control;
    color: FieldText;
    letter-spacing: normal;
    word-spacing: normal;
    line-height: normal;
    text-transform: none;
    text-indent: 0;
    text-shadow: none;
    ...
}

body に書体 Georgia・20px・紺色・行の高さ 1.8・字間 1px を付けたページで、計算値を読みました。

4つとも 13.3333px で、親の 20px は届いていません。textarea だけは等幅の書体（monospace）でした。字間も normal に戻されていました。

直し方：font: inherit を1行足す

button, input, select, textarea {
  font: inherit;            /* 書体・大きさ・太さ・行の高さをまとめて親から */
  color: inherit;
  letter-spacing: inherit;
}

• 書体・大きさ・色・字間は、4つとも p と同じになりました。 select の line-height だけは、手元の Chromium 153 では normal のままでした。select の高さを決めたいときは、line-height ではなく padding や height で整えます。
• MDN の「Styling web forms」は、font-family: inherit; font-size: 100%; を勧めています。font: inherit は太さ・斜体・行の高さもまとめて受け取る書き方です。
• MDN は同じページで、Chrome では <input type="submit"> が親の書体を継承せず system-ui を使う例外にも触れ、<button> を使う理由の一つに挙げています。

フォームの部品の見た目全体を整える方法は、関連記事「CSSフォームデザイン｜input・select・チェックボックス装飾」で扱っています。

リンクの色が親の色にならない理由（a要素とcolor: inherit）

この節では、親に色を付けてもリンクだけ青いままになる理由と、直し方が分かります。

a 要素には、ブラウザの既定のスタイルが色・下線・カーソルを直接指定しています。 Chromium の html.css のルールは次のとおりです。

a:-webkit-any-link {
    color: -webkit-link;
    text-decoration: underline;
    cursor: pointer;
}

赤い文字の段落 p.note の中のリンクを読むと、色は rgb(0, 0, 238)（既定の青）でした。.fix a { color: inherit; } を足した段落では、リンクの色は rgb(255, 0, 0)（親の赤）になりました。

/* 注意書きの中のリンクは周りの文字と同じ色にし、下線で見分ける */
.note a {
  color: inherit;
  text-decoration: underline;
}

リンクを周りの文字と同じ色にすると、色だけではリンクだと分かりません。下線を残すか、別の目印を付けます。

継承されるのは「計算値」：line-heightとemの落とし穴

この節では、「親に書いた値」と「子が受け取る値」が違う場面を、実測の数字で確かめられます。

子が受け取るのは、親で計算し終わった値です。 親が 16px、子が 32px の文字で、親の line-height を4通りに書いて、子の line-height と高さを測りました。

• 単位なしの 1.5 だけ、子の文字の大きさで計算し直されました（32 × 1.5 = 48px）。 単位なしの数値は「倍率」のまま受け継がれるためです。
• 150% と 1.5em は、親で 24px に計算されてから受け継がれたため、32px の文字に 24px の行の高さが付き、行が重なりました。

em は入れ子で大きくなり続ける

3段の入れ子のリストで、li { font-size: 1.2em; } と li { font-size: 1.2rem; } を比べました。

em は親の計算値に掛け算されるため、入れ子ごとに1.2倍になりました。rem は html 要素の文字の大きさが基準なので、何段入れ子にしても同じです。部品の中で文字の大きさを親に合わせて伸び縮みさせたいときは em、ページ全体で大きさをそろえたいときは rem が向いています。

width: inherit とパーセント

幅 800px の箱の中に width: 50% の親を置き、その子に width: inherit を付けると、子の幅は 400px ではなく 200px でした。親の計算値は「50%」というパーセントのまま受け継がれ、子の位置でもう一度、親の 400px の50%として計算されたためです。width: 100% の子は 400px でした。親と同じ幅にしたいときは、inherit ではなく width: 100% を使います。

!importantと継承：詳細度・ユニバーサルセレクターとの関係

この節では、「親に !important を付けたのに子の色が変わらない」理由と、継承とカスケードの順番が分かります。

継承された値には、詳細度も !important もありません。子に当たるどんなルールにも負けます。 親の !important は「親の値を決める争い」で強いだけで、子に受け継がれた時点でその強さは消えます。

.box { color: red !important; }
p    { color: blue; }            /* 詳細度の低いタイプセレクター */

ユニバーサルセレクター * に color や font-family を書くと、すべての要素に直接値が付き、継承が働かなくなります。 body に書いた色が中の要素に届かないときは、* や p などのルールが子に当たっていないかを DevTools で確かめます。詳細度の計算と !important の順番は、関連記事「CSS優先順位と詳細度の早見表｜!importantが効かない原因と直し方」で扱っています。

CSS変数（カスタムプロパティ）の継承

この節では、CSS 変数が継承される仕組みと、@property で継承を止める方法、受け継がれる値の違いが分かります。

CSS 変数（--名前）は、既定で継承されます。 親で定義した変数を、子孫のどこでも var() で読めるのはこのためです。@property で登録すると、継承するかどうか（inherits）と型を決められます。

@property --len-reg { syntax: '<length>'; inherits: true;  initial-value: 0px; }
@property --no-inh  { syntax: '<color>';  inherits: false; initial-value: rgb(0, 0, 255); }

.parent { font-size: 10px; --len: 2em; --len-reg: 2em; --no-inh: rgb(255, 0, 0); }
.child  { font-size: 30px;
          width: var(--len);                        /* 登録していない変数 */
          height: var(--len-reg);                   /* 登録した変数 */
          color: var(--no-inh);                     /* 継承しない変数 */
          background-color: var(--missing, rgb(0, 128, 0)); }

• 登録していない変数は、書いた文字列（2em）のまま受け継がれ、使う場所で計算されました。 型を登録した変数は親で 20px に計算されてから受け継がれました。「継承されるのは計算値」の動きが、登録の有無で変わります。
• inherits: false の変数は、子では初期値（青）になりました。部品の中だけで使う変数を外へ漏らさないときに使います。
• 変数そのものは all の対象外です。all: initial を当てても、親から受け継いだ CSS 変数は消えません。

CSS 変数の書き方とダークモードの切り替えは、関連記事「CSS変数（カスタムプロパティ）の使い方｜コピペ実例とダークモード切替」で扱っています。

継承と見間違えやすい現象（text-decoration・opacity・visibility・Shadow DOM）

この節では、継承していないのに継承したように見える現象と、その逆が分かります。

下線の実験では、<p class="parent">親<span class="child">子</span><span class="blk">ib</span></p> の「親子」には下線が引かれ、inline-block の「ib」には引かれませんでした。下線を消したいときは、子に none を書くのではなく、下線を付けるルールを子に当たらない形に書き直します。

よくあるエラー／つまずき（継承が効かない原因の一覧）

この節では、「継承されない」「inherit が効かない」ときに見る場所が、症状から引けます。

DOCTYPE が無いと表に文字の大きさが届かない

body に font-size: 24px を書いたページを、DOCTYPE のありとなしで開き、段落と表のセル（td）の文字の大きさを読みました。

quirks.html  compatMode=BackCompat  p=24px  td=16px
std.html     compatMode=CSS1Compat  p=24px  td=24px

DOCTYPE の無いページはブラウザが互換モード（BackCompat）で描き、表の中に body の文字の大きさが受け継がれませんでした。<!doctype html> を書くと標準モード（CSS1Compat）になり、td も 24px になりました。

どの値を使うかの判断表（inherit・unset・revert）

この節では、やりたいことから、書くべきキーワードを選べます。

1. 1親と同じ見た目にしたい → inheritリンクの色・フォームの書体・継承されない border や背景
2. 2ブラウザの既定の見た目に戻したい → reverth1 の太字・余白、ul の点、display を要素らしく戻す
3. 3自分のレイヤーの指定だけ外したい → revert-layer@layer で分けた土台のスタイルに戻す
4. 4見た目を全部消して作り直したい → all: unsetbutton を文字だけの部品にする。フォーカスの見た目は書き足す
5. 5仕様の初期値が欲しいと分かっている → initialcolor を黒、opacity を 1 にするなど、初期値を知っているとき

書く前のチェック

• 1そのプロパティは継承されるか継承されるなら、子に何も書かないのが一番短い。MDN の「継承」の欄で確かめる
• 2子に別のルールが当たっていないかブラウザの既定・* ・タイプセレクターが当たると継承は届かない
• 3一括指定の一部に inherit を混ぜていないかborder: 1px solid inherit は宣言ごと無効
• 4受け継ぐのが計算値で困らないかem・%・line-height は、親で計算された値になる

CSS の書き方と効かないときの見方の全体は、関連記事「CSSとは｜HTMLとの違い・書き方・効かない原因を実例で解説」で扱っています。flex コンテナの中では、子の display が親に合わせて変わるように見える場面がありますが、これは継承ではなく flex アイテムの決まりです。横並びの書き方は関連記事「CSS flexboxの使い方早見表｜横並び・中央寄せのコピペ集と効かない原因」で扱っています。

よくある質問

Q. CSS の inherit とは何ですか？ A. プロパティの値を、親要素の計算値と同じにするよう指定するキーワードです。どのプロパティにも書けて、継承されない margin・border・background にも使えます。

Q. inherit を書かなくても継承されるのはどのプロパティですか？ A. color、font 系（font-family・font-size・font-weight など）、line-height、letter-spacing、text-align、white-space、visibility、cursor、list-style など、文字の見た目と読み方に関わるものです。手元の実測では41個中21個が継承されました。

Q. inherit と initial の違いは何ですか？ A. inherit は親の値、initial は仕様が決めた初期値です。initial はブラウザの既定のスタイルとは別物で、h1 に display: initial を付けると inline になりました。

Q. unset と revert の違いは何ですか？ A. unset は継承プロパティなら親の値、それ以外は初期値になります。revert は、作者が書いた CSS が無かったときの値（ブラウザの既定など）に戻ります。h1 では unset で display が inline、revert で block になりました。

Q. revert-layer はいつ使いますか？ A. @layer でスタイルを層に分けているときに、今の層の指定だけを外し、一つ前の層の値に戻したいときに使います。前の層に値が無ければ revert と同じ動きです。

Q. button のフォントが変わらないのはなぜですか？ A. ブラウザが button・input・select・textarea に font を直接指定しているためです。Chromium では 13.3333px の Arial になりました。button, input, select, textarea { font: inherit; } で周りの文字とそろいます。

Q. 親に !important を付けても子の色が変わりません。 A. 継承された値には優先度が無く、子に当たるどんなルールにも負けます。子に当たっているルールを直すか、子に color: inherit !important; を書きます。

Q. CSS 変数は継承されますか？ A. 既定で継承されます。@property で inherits: false を付けると継承されず、子では初期値になりました。登録していない変数は書いた文字列（2em など）のまま受け継がれ、使う場所で計算されます。

Q. all: unset と all: revert のどちらを使えばよいですか？ A. 見た目を全部消して作り直すなら all: unset、ブラウザの既定の見た目に戻すなら all: revert です。button に all: unset を付けると、枠線・背景・余白が消え、周りの文字の書体になりました。

まとめ

• inherit は親要素の計算値を使うキーワード。継承されるプロパティでは書かなくても同じで、継承されない border・背景・余白や、ブラウザの既定が当たる部品で効く。
• 手元の Chromium 153 では41個中21個が継承された。文字の見た目に関わるものは継承され、箱の形に関わるものは継承されない。width は継承されたように見えるが違う。
• 5つの値を同じ h1 に当てると、inherit は親、initial は仕様の初期値（display が inline）、unset は自動の切り替え、revert はブラウザの既定、revert-layer は一つ前の層の値になった。
• button・input・select・textarea は、ブラウザが font を指定しているので親の書体が届かない。font: inherit の1行でそろう。リンクの色は color: inherit。
• 継承されるのは計算値で、優先度を持たない。line-height は単位なし、入れ子の文字の大きさは rem、親の !important は子に届かない。

参考・出典

確認日はいずれも 2026年10月29日です。

• MDN「inherit」：https://developer.mozilla.org/ja/docs/Web/CSS/inherit
• MDN「継承」：https://developer.mozilla.org/ja/docs/Web/CSS/Guides/Cascade/Inheritance
• MDN「all」：https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Properties/all
• MDN「revert-rule」：https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/revert-rule
• MDN「Styling web forms」：https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Styling_web_forms
• W3C「CSS Cascading and Inheritance Level 5」：https://drafts.csswg.org/css-cascade-5/#css-inheritance
• Chromium のソースコード「html.css」：https://chromium.googlesource.com/chromium/src/+/refs/heads/main/third_party/blink/renderer/core/html/resources/html.css
• ASCII.jp「CSS初学者の最初の壁『スタイルの継承』をしっかり理解する」：https://ascii.jp/elem/000/001/541/1541423/

株式会社RJC ― SI事業・SES事業・AI駆動開発。RJCは一緒に成長を楽しめる会社です。