継承

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 は継承された計算値に戻ります。

all プロパティで unset 値も使用できます。上記の例では、グローバルな 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
有効な値ではありません。もう一度お試しください。

関連情報