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-spacing
- 字幕側
- 色
- cursor
- direction
- 空のセル
- font-family
- font-size
- フォント スタイル
- font-variant
- フォントの太さ
- フォント
- letter-spacing
- line-height
- list-style-image
- list-style-position
- list-style-type
- list-style
- 孤児
- 引用
- テキストの配置
- テキストのインデント
- text-transform
- 可視性
- 空白
- 死別
- 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
は継承された計算値に戻ります。
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;
}
理解度をチェックする
継承に関する知識をテストする
継承可能なプロパティは次のうちどれですか。
line-height
font-size
animation
text-align
color
継承するものが何もなく、かつ inherit
のように動作する値。
initial
のように動作するか?
superset
reset
unset