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 リファレンスから取得されます。
- 方位角
- border-collapse
- border-spacing
- 字幕側
- 色
- cursor
- direction
- 空のセル
- フォント ファミリー
- font-size
- font-style
- font-variant
- font-weight
- フォント
- 文字間隔
- line-height
- list-style-image
- list-style-position
- list-style-type
- list-style
- 孤児
- 引用
- text-align
- text-indent
- テキスト変換
- 視認性
- white-space
- 未亡人
- word-spacing
継承の仕組み
すべての 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