先生、カスケードのことはわかったんですが、それ以外にも「継承」っていう仕組みがあるって聞きました。カスケードと継承ってどう違うんですか？
大事なポイントだね。継承とカスケードは、どちらもCSSでスタイルがどう適用されるかに関わる仕組みだけど、全く違う働きをするんだ。カスケードが「競合するスタイルの優先順位を決める仕組み」なのに対して、継承は「親から子へスタイルが自動的に引き継がれる仕組み」なんだよ。
親から子へって、HTMLの要素の階層構造のことですか？
その通り！例えば、<body>要素にフォントを設定すると、その中の全ての段落や見出しに自動的にそのフォントが適用されるんだ。これが継承の基本的な動きなんだよ。今日は、この2つの違いをしっかり理解して、使い分けできるようになろう。
継承（Inheritance）とは
では具体的に継承について教えてください！
継承は、親要素に指定したスタイルが、子要素や孫要素に自動的に引き継がれる仕組みなんだ。家族で考えるとわかりやすいよ。親の特徴が子どもに受け継がれるように、HTMLの親要素のスタイルも子要素に受け継がれるんだ。
継承（Inheritance）とは、HTMLの階層構造において、親要素に設定されたスタイルが、子要素や孫要素に自動的に適用される仕組みです。
子要素のテキスト 孫要素のテキスト
- 継承は、親要素に設定したスタイルが子要素に自動的に適用される仕組み
- すべてのCSSプロパティが継承されるわけではない
- テキスト関連のプロパティは継承されやすいが、ボックスモデル関連のプロパティは継承されないことが多い
- 子要素で明示的にスタイルを指定すれば、継承されたスタイルより優先される
継承の基本動作
継承がどのように動作するか、具体例で見てみましょう：
<article>
<h2>記事のタイトル</h2>
<p>この段落のテキストは...</p>
<div>
<span>このテキストも...</span>
</div>
</article>この場合、article要素に設定したfont-family、color、line-heightは、h2、p、div、spanなど、すべての子孫要素に自動的に適用されます。
実際に色などを変更して動作を確認してみましょう：
継承されるプロパティと継承されないプロパティ
すべてのCSSプロパティが継承されるわけではありません。一般的に、テキスト関連のプロパティは継承され、ボックスモデル関連のプロパティは継承されないという特徴があります。
継承されるプロパティ（主なもの）
- フォント関連 font-family, font-size, font-weight, font-style, line-height
- テキスト関連 color, text-align, text-decoration, letter-spacing
- リスト関連 list-style, list-style-type, list-style-position
- その他 cursor, visibility
継承されないプロパティ（主なもの）
- ボックスモデル width, height, margin, padding, border
- 配置関連 position, top, right, bottom, left, display
- 背景関連 background, background-color, background-image
- その他 z-index, overflow, float
継承される例とされない例
実際の記事構造を使って、継承がどう働くか見てみましょう。article要素にだけスタイルを設定し、h2、p、ulには何も指定しないことで、継承の動作を確認します：
<article class="blog-post">
<h2>ブログ記事のタイトル</h2>
<p>この段落は親要素のフォント設定を継承します。</p>
<ul>
<li>リスト項目1</li>
<li>リスト項目2</li>
</ul>
</article>h2、p、ul、liに継承されないプロパティを指定して、違いを確認してみましょう。継承されていないことがわかります。
わかりました！記事全体のフォントを1箇所で設定するだけで、見出しも段落もリストも全部同じフォントになるんですね。
その通り！これは理にかなっているんだ。もしpaddingやmarginまで継承されたら、子要素がどんどん小さくなったり、余白が増え続けたりして大変なことになってしまうからね。
継承を制御するキーワード
継承は便利ですけど、逆に継承を止めたい時とか、強制的に継承させたい時もありますよね？
まさにその通り！CSSには継承を明示的にコントロールするための特別なキーワードが4つ用意されているんだ。これらを使えば、継承の動作を自由に操作できるよ。
継承の動作を明示的に制御するために、CSSには以下の4つの特別なキーワード値が用意されています。
継承制御の4つのキーワード
4つのキーワードのまとめ
| キーワード | 使用場面 | よくあるケース |
|---|---|---|
| inherit | 継承されないプロパティを継承させたい | 子要素にも親と同じborderを適用 |
| initial | 継承や指定を完全にリセット | 親の影響を受けない独立した要素 |
| unset | プロパティ性質に応じた自動リセット | 複数プロパティを一括リセット |
| revert | ブラウザデフォルトに戻したい | リセットCSSを一部解除 |
inheritは、具体的な意図が明確な場合に使用unsetは、複数のプロパティを一括でリセットしたい場合に便利initialとrevertはブラウザのデフォルトスタイルに依存するため、予期せぬ動作を避けるために注意が必要allプロパティと組み合わせて、すべてのスタイルを一括リセットすることも可能。
例：all: unset;、all: initial;
実践例：inheritキーワード
通常、borderプロパティは継承されませんが、inheritを使うことで親のborderを子要素にも適用できます。
<div class="parent">
親要素
<div class="child">通常の子要素</div>
<div class="child">通常の子要素</div>
<div class="child inherit">inherit指定の子要素</div>
</div>なるほど！inheritを使えば、本来継承されないプロパティも親から受け取れるんですね。
その通り！特にborderやbackgroundなど、デザインの統一感を出したい時に便利だよ。
実践例：initialキーワード
initialは、親の影響を完全に無視してCSS仕様の初期値に戻します。
<div class="parent">
親要素
<div class="child">通常の子要素</div>
<div class="child">通常の子要素</div>
<div class="child">通常の子要素</div>
<div class="child initial">initial指定の子要素</div>
</div>initialを使うと、親の設定が全部無視されて真っ黒になるんですね。
そうなんだ。initialは「CSS仕様書に書かれた初期値」に戻すから、colorなら黒色になる。親の影響を完全に断ち切りたい時に使うよ。
実践例：unsetキーワード
unsetは、プロパティが継承可能ならinherit、不可能ならinitialとして動作します。
親から継承されたスタイルと、子要素に直接指定されたスタイルがある場合、unsetで直接指定を取り消し、継承に戻すことができます。
<div class="parent">
親要素
<div class="child">通常の子要素</div>
<div class="child">通常の子要素</div>
<div class="child unset">unset指定の子要素</div>
</div>なるほど！最初の2つは.childで赤色、3つ目は.unsetで.childの指定を取り消して親の青色に戻るんですね。
その通り！実務では、共通クラス（.child）で一括指定したけど、特定の要素だけ例外的に親の継承に戻したい時にunsetが便利なんだ。わざわざ個別に色を指定し直さなくても、unset一つで継承に戻せるからね。
- all: unset CSSフレームワークのスタイルを一括リセット
- コンポーネント分離 外部スタイルの影響を受けないウィジェット作成
- 詳細度の問題解決 複雑なセレクタの影響を回避
- 必要なスタイルだけ再指定 リセット後、本当に必要なプロパティのみ追加
実践例：revertキーワード
revertは、ブラウザのデフォルトスタイルシートに記載された値に戻します。initialが「CSS仕様の初期値」に戻すのに対し、revertは「ブラウザが独自に設定したデフォルト値」に戻す点が異なります。
また、ブラウザのデフォルトスタイルシートに記載がないプロパティは、継承が維持されます。
<div class="parent">
親要素
<h2 class="child">通常の見出し</h2>
<h2 class="child">通常の見出し</h2>
<h2 class="child revert">revertの見出し</h2>
</div>あれ？revertを指定した見出しが大きくなってますね。親は20pxなのになんでですか？
これはrevertの重要な特性なんだ。h2のブラウザデフォルトはfont-size: 1.5em;という相対値なんだよ。だからrevertで戻ると、親の20px × 1.5 = 30pxになるんだ。
なるほど！revertは「ブラウザデフォルトの値」に戻すけど、その値がem単位だったら計算が必要なんですね。
その通り！これはrevertの挙動を理解する上でとても重要なポイントなんだ。ブラウザデフォルトが相対値の場合、親要素の影響を完全には無視できないんだよ。
revertでブラウザデフォルトに戻す際、そのデフォルト値がemなどの相対単位の場合、親要素の値を基準に計算されます。
- 親：
font-size: 20px; - h2のブラウザデフォルト：
font-size: 1.5em; revertの結果：20px × 1.5 = 30px
これはCSS仕様の正常な動作です。
カスケードと継承が協調する仕組み
先生、継承を制御するキーワードまで学んだので、だいぶ理解できました！でも実際のWebサイトでは、継承と前回のレッスンで学んだカスケードをどう使い分ければいいんですか？
いい質問だね！これまで学んだ継承とカスケード、それぞれには得意分野があるんだ。この使い分けを理解すると、効率的で保守しやすいCSSが書けるようになるよ。実際の開発現場でどう活用されているか見ていこう。
継承とカスケードは、別々の仕組みではありますが、実際のWebサイトでは密接に連携してスタイルを決定します。それぞれの得意分野を理解し、適切に使い分けることで、保守性の高いCSSを書くことができます。
それぞれの役割と使い分け
（body に font-family, color, line-height）
（h1 は大きく、.alert は赤色に）
なるほど！継承で全体の雰囲気を決めて、カスケードで個別に調整するんですね。
まさにその通り！実際の開発では、この2つを組み合わせて使うことで、効率的にスタイルを管理できるんだ。次は、具体的な実装例を見てみよう。
実践例：ブログ記事のスタイリング
実際のブログ記事を例に、継承とカスケードの協調動作を見てみましょう：
<body>
<article class="blog-post">
<h1>記事タイトル</h1>
<p>本文の段落です。</p>
<p class="highlight">重要な段落です。</p>
<ul>
<li>リスト項目1</li>
<li>リスト項目2</li>
</ul>
</article>
</body>この例では：
- 継承の役割
bodyで設定したfont-family、color、line-heightが、すべての子孫要素に自動的に適用される - カスケードの役割 特定の要素（
h1、.highlight）で個別にスタイルを上書きし、独自のデザインを実現 - 協調動作 基礎は継承で統一し、個別の調整はカスケードで行うことで、効率的で保守しやすいCSSになる
継承とカスケードの協調パターン
実務でよく使われる、継承とカスケードの協調パターンを見てみましょう：
パターン1：テーマの切り替え
/* 基本テーマ（継承で配布） */
.theme-light {
color: #333;
background: #fff;
}
.theme-dark {
color: #e5e7eb;
background: #1f2937;
}
/* 個別調整（カスケードで上書き） */
.theme-light .button {
background: #3b82f6;
color: white;
}
.theme-dark .button {
background: #60a5fa;
color: black;
}パターン2：コンポーネントの基礎と変種
/* 基礎スタイル（継承） */
.card {
font-family: 'Arial', sans-serif;
line-height: 1.6;
}
/* 変種（カスケードで調整） */
.card.card-primary {
color: #1e40af;
border-color: #3b82f6;
}
.card.card-danger {
color: #991b1b;
border-color: #ef4444;
}わかりました！継承で基礎を作って、カスケードで細かく調整する。この組み合わせが大事なんですね。
その通り！この使い分けができると、CSSのコード量が減り、変更も楽になる。ただし、継承とカスケードが同時に働く時には、注意すべきポイントもあるんだ。次はその競合ケースを見ていこう。
- 継承の活用 サイト全体やセクション全体で統一したいスタイルは、親要素に設定して継承させる
- カスケードの活用 特定の要素に個別のスタイルを適用する場合は、詳細度を意識してセレクタを記述
- 効率的な設計 基礎スタイルは継承で、個別調整はカスケードで行うことで、保守性の高いCSSになる
- 優先順位の理解 継承された値は詳細度0なので、どんな直接指定でも上書きできることを覚えておく
継承とカスケードの競合
先生、協調の仕組みはわかったんですが、もし親から継承された値と、子要素への直接指定が競合したらどうなるんですか？
重要なポイントだね！実は、継承とカスケードが競合した場合、明確な優先順位のルールがあるんだよ。このルールを理解すると、予期しないスタイルの上書きに悩まされなくなる。具体例で見ていこう。
継承とカスケードが競合するケースでは、両方の仕組みが同時に働きます。次のコードを見てください：
/* 子要素に直接スタイル指定 */
p {
color: red;
}
/* 親要素にスタイル指定 */
.container {
color: blue;
}<div class="container">
<p>このテキストは何色になる？</p>
</div>えっと…親の.containerにblueが設定されているから、継承で青色になる？
でも、p要素に直接redが指定されているから、赤色じゃないですか？
まさにこれが、継承とカスケードの混同ポイントなんだ！実は赤色になるんだよ。なぜなら、継承された値よりも、直接指定された値の方が優先されるからなんだ。 これを理解するには、カスケードの「詳細度」の仕組みを思い出す必要がある。
では、ブラウザは具体的にどのようなプロセスでこの判定を行っているのでしょうか？ステップごとに見ていきましょう。：
.container { color: blue }が子の<p>に継承される
<p>には2つのcolor値が候補① 継承値: blue（親から）
② 直接指定: red（pセレクタから）
p = 詳細度1（要素セレクタ）
→ 詳細度の時点で勝負が決まる
出現順の比較には到達しない
（詳細度が同じ場合のみ出現順を見る）
そのため、要素に直接指定されたスタイル（どんなに詳細度が低くても）は、常に継承された値に勝つ。
図を見るとよくわかりますね。継承された値は詳細度0だから、どんな直接指定でも上書きできるんですね。
その通り！この継承値の詳細度0という原則を覚えておけば、スタイルの優先順位で迷うことがなくなるよ。協調と競合、両方の仕組みを理解できたら、実践的なCSSが書けるようになるんだ。
理解度チェッククイズ
ここまで学んだ内容を確認するために、クイズに挑戦してみよう！継承とカスケードの違い、そして協調動作を理解できているかチェックしてみてね。
継承とカスケードの理解度チェック
<style>
.container {
color: blue;
}
p {
color: red;
}
</style>
<div class="container">
<p>このテキストは？</p>
</div>.parent {
font-size: 20px;
}
.child {
font-size: unset;
}<!-- HTML -->
<body>
<div class="box">
<p>テキスト</p>
</div>
</body>
/* CSS */
body {
border: 2px solid red;
}
.box {
/* borderの指定なし */
}まとめ
継承とカスケード、最初は別々のものかと思っていましたが、実際には協力して働いているんですね。
それと継承で全体の雰囲気を作って、カスケードで個別に調整する。この使い分けが大切なんだって理解できました。
素晴らしい！継承とカスケードは、CSSの中でも特に重要な概念なんだ。この2つの仕組みを理解すると、なぜそのスタイルが適用されるのか、なぜ思った通りにならないのかが見えてくるよ。今日学んだことを整理しておこう。
- 継承の役割 親要素のスタイルが子孫要素に自動的に伝わる仕組み。サイト全体の統一感を作るのに最適
- 継承されるプロパティ テキスト関連（color, font-family, line-heightなど）が中心。ボックスモデル関連は継承されない
- 継承制御キーワード inherit（強制継承）、initial（CSS初期値）、unset（自動判定）、revert（ブラウザデフォルト）で継承を制御
- カスケードとの協調 継承で基礎スタイルを設定し、カスケードで個別調整することで効率的なCSSを実現
- 競合時の優先順位 継承された値の詳細度は0。直接指定されたスタイルは常に継承値より優先される
- 実践的な使い分け 継承＝全体の統一、カスケード＝個別のカスタマイズという役割分担を意識する
次回は、継承とカスケードの知識を活かして、保守しやすいCSS設計の実践テクニックを学んでいきます。