継承

CSS ポッドキャスト - 005: 継承

要素がボタンのように見えるように CSS を作成したとします。

<a href="http://example.com" class="my-button">I am a button link</a>

.my-button {
  display: inline-block;
  padding: 1rem 2rem;
  text-decoration: none;
  background: pink;
  font: inherit;
  text-align: center;
}

次に、コンテンツの記事にリンク要素を追加します。 class の値が .my-button になっています。しかし 問題もあります テキストの色が期待どおりの色になっていません。どうしてそうなったのでしょうか？

一部の CSS プロパティは、値を指定しない場合に継承されます。 このボタンの場合は、次の CSS から color を継承しています。

article a {
  color: maroon;
}

このレッスンでは、その理由と、 継承がいかに強力な機能であり、記述する CSS を減らすことができるかを説明します。

継承フロー

では継承の仕組みを見ていきましょう 次の HTML スニペットを使用します。

<html>
  <body>
    <article>
      <p>Lorem ipsum dolor sit amet.</p>
    </article>
  </body>
</html>

ルート要素（<html>）はドキュメントの最初の要素であるため、何も継承しません。 HTML 要素に CSS を追加します ドキュメントへのカスケードダウンが開始されます

html {
  color: lightslategray;
}

color プロパティは、デフォルトで他の要素に継承されます。 html 要素に color: lightslategray が含まれている。 そのため、色を継承できるすべての要素の色が lightslategray になります。

body {
  font-size: 1.2em;
}
で確認できます。 
p {
  font-style: italic;
}

最も深くネストされた要素であるため、<p> のみが斜体のテキストになります。 継承は下方向にのみ流れ、親要素には逆方向には戻りません。

デフォルトで継承されるプロパティはどれですか。

デフォルトでは継承されない CSS プロパティがあります それだけではありません 参考までに、デフォルトで継承されるプロパティの一覧を示します。 すべての CSS プロパティの W3 リファレンスから抜粋したものです。

継承の仕組み

すべての HTML 要素には、デフォルトで定義されるすべての CSS プロパティがあり、その初期値が設定されています。 初期値は継承されないプロパティであり、デフォルトとして表示される カスケードがその要素の値を計算できない場合

継承できるプロパティは下位にカスケードされます 子要素は親の値を表す計算値を取得します つまり、親の font-weight が bold に設定されている場合、子要素はすべて太字になり、 font-weight が別の値に設定されていない限り、 ユーザー エージェント スタイルシートで、その要素の font-weight の値が設定されている。

継承を明示的に継承して制御する方法

継承は要素に予期しない影響を及ぼす可能性があるため、CSS にはこれをサポートするツールが用意されています。

inherit キーワード

inherit キーワードを使用すると、任意のプロパティに親の計算値を継承させることができます。 このキーワードの便利な使い方は、例外を作成することです。

strong {
  font-weight: 900;
}

この CSS スニペットでは、すべての <strong> 要素の font-weight が 900 に設定されています。 デフォルトの bold 値ではなく、font-weight: 700 と同等です。

.my-component {
  font-weight: 500;
}

代わりに .my-component クラスが font-weight を 500 に設定します。 .my-component 内の <strong> 要素を font-weight: 500 にするには、以下も追加します。

.my-component strong {
  font-weight: inherit;
}

.my-component 内の <strong> 要素の font-weight は 500 になります。

明示的に設定することもできますが ただし、inherit を使用していて、今後 .my-component の CSS が変更された場合は、 <strong> は自動的に最新の状態に保たれます。

initial キーワード

継承は要素に問題を引き起こす可能性があるため、initial には強力なリセット オプションが用意されています。

先ほど、CSS ではすべてのプロパティにデフォルト値があることを学びました。 initial キーワードは、プロパティをその初期のデフォルト値に戻します。

aside strong {
  font-weight: initial;
}

このスニペットでは、<aside> 要素内のすべての <strong> 要素から太字の太さが削除され、代わりに、 初期値である通常の重みにします。

unset キーワード

unset プロパティは、プロパティがデフォルトで継承されるかどうかで動作が異なります。 デフォルトでプロパティが継承されている場合は unset キーワードは inherit と同じになります。 プロパティがデフォルトで継承されない場合、unset キーワードは initial になります。

どの CSS プロパティがデフォルトで継承されるかを覚えておくのは難しいですが、 そのような場合、unset が役立ちます。 たとえば、color はデフォルトで継承されます。 margin はそうでないため、次のように記述できます。

/* Global color styles for paragraph in authored CSS */
p {
  margin-top: 2em;
  color: goldenrod;
}

/* The p needs to be reset in asides, so you can use unset */
aside p {
  margin: unset;
  color: unset;
}

現在、margin が削除され、color は継承された計算値に戻ります。

unset 値は all プロパティで使用することもできます。 上記の例に戻りましょう グローバル p スタイルが追加のプロパティを取得する場合はどうなるでしょうか。 marginとcolorに対して設定されたルールのみが適用されます。

/* Global color styles for paragraph in authored CSS */
p {
    margin-top: 2em;
    color: goldenrod;
    padding: 2em;
    border: 1px solid;
}

/* Not all properties are accounted for anymore */
aside p {
    margin: unset;
    color: unset;
}

aside p ルールを all: unset に変更すると、次のようになります。 今後 p に適用されるグローバル スタイルは関係ありません。 常に未設定になります。

aside p {
    margin: unset;
    color: unset;
    all: unset;
}

理解度をチェックする

継承に関する知識をテストする

継承可能なプロパティは次のうちどれですか。

animation
アニメーションは子に渡されません。
font-size
🎉
color
🎉
text-align
🎉
line-height
🎉

継承するものが何もなく、かつ inherit のように動作する値。 initial のように動作するか？

reset
有効な値ではありません。もう一度お試しください。
unset
🎉
superset
有効な値ではありません。もう一度お試しください。

リソース