■Cascadingの意味
昨日のブログで「Cascading」について書きましたが、本日、改めて知りました。
「親要素から子要素に、スタイルが段階的に継承されていく」
(分かって無かったのかよ。とか言わないで..)
■スタイルとして継承されるもの／されないもの
「全てのプロパティが、継承されていく訳では無い」という事に注意が必要。
一例として参考サイトなどで調べると、
colorプロパティ － 継承される
borderプロパティ － 継承不可
例えば、<body>内に、<h1>で見出しがあるとして、.cssファイルで body に対し、上記2つのプロパティをスタイルとして宣言した場合、colorプロパティは、<body> に対してだけでなく、<h1>に対しても継承されて適用されますが、borderプロパティは、<body> に対してのみ適用され、<h1>に対しては継承されない為に適用されません。
■プロパティ毎の継承／継承不可を調べる
(参考サイトの一例)
・MDN – CSSリファレンス
https://developer.mozilla.org/ja/docs/Web/CSS/Reference
・TAG index – CSSプロパティ一覧
https://www.tagindex.com/stylesheet/properties/
■スタイルとして継承されないものを(強制的に？)継承させる
継承不可となっているプロパティを継承させる場合は、inherit (インヘリット、受け継ぐ)を使うらしいです。
(使う時、あるのかな..？)
(例)
body {
border: 1px solid red; /* 本来、継承されないが */
}
h1 {
border: inherit; /* 値として、inherit を指定すれば、継承される */
}
■分かっていない事は、まだまだある
一度、調べて「分かったつもり」になっている事も、時間を置いて、更に掘り下げて調べれば、新たな発見がある！
ゆくゆくは、「自信」も必要になってくる場面もあるだろうが、常に「過信」(※一度見たもの、読んだものを信じ過ぎてしまう事)をしてしまわないよう注意して、ちゃんと使った実践結果から理解するという必要がある。
色んな意味で、気を付けながら、生きていこうっと♪