今回もややマニアックな内容です。
コードでデザインが少し書けるようになったら、理解しておくと便利です。
では、さっそく…
cssの継承
継承ってことばはむずかしいですが、要は遺伝みたいなものです。
親の身長が高いから、子も高い。
同様に、親が陸上選手だったから、子どもも走るのが得意。
親が医者だから、子ども医学部。
つまり、親の特徴を子どもが引き継ぐのが継承。
もっというと、この遺伝子は結構強く、子だけでなく孫やその孫まで引き継がれます。
例を見てみましょう。
親にtext-align: centerを指定。
<div>
<p>ほぼほぼ</p>
</div>div {
border: solid 1px #000000;
text-align: center;
}
外枠が<div>のエリアです。
<p>のテキストである「ほぼほぼ」が中央にきました。
一応、<p>のエリアも見ておきましょうか。
<div>
<p>ほぼほぼ</p>
</div>div {
border: solid 1px #000000;
text-align: center;
}
p {
background-color: aliceblue; /* うすい青色 */
}
ご覧のように<div>の幅いっぱいに広がります。
ということで、<p>にはtext-alignが効いてるというわけです。
つまり<div>から継承されたってことです。
検証画面の右側にも継承されていることが示されています。
inherited…継承された。
ですから、Inherited from divは、<div>から継承されたという意味になります。
プロパティには継承されるものとそうでないものがある
ちなみに、上図のborder: solid 1px #000は色がうすくなっていますよね。
というのも、borderは子要素に継承されないプロパティなんです。
このようにプロパティには継承されるものとそうでないものに別れます。
ちなみにこれらを
- 継承プロパティ
- 非継承プロパティ
と呼んだりします。
じゃあ、どうやってその1つ1つのプロパティが継承してるかどうかっていうのは、こちらを見てもらえればいいと思います。
以下は、text-alignのページ。
継承が「あり」となっています。
bodyに継承プロパティを指定するわけ
これはほかの記事でも解説したかもですが、もう1回書かせてください。
学習中のみなさんはcssのコードを書き始めた時、そのほぼ最初で<body>の指定をしてるはずです。
こんな感じで↓
body {
color: #333; /* 黒に近い色 */
font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
font-weight: 500;
font-size: 1.6em;
line-height: 2.4rem;
text-align: center;
}上記の<body>への指定は、すべて継承可能なプロパティです。
ですから、子や孫。
または、その孫にまでその値は引き継がれます。
例えば、<body>にcolorを指定しておくと、テキストはすべて#333の文字色になるわけです。
1番の親である<body>にしておけば、ほかの子要素にいちいちcolorを指定しなくて済むわけです。
で、見出しなど強調したいとこだけcolor: redとかにすればいいんですね。
継承を理解すれば、指定被りを減らせる
もし<body>に指定してるのを忘れて、子要素の<p>などにtext-algin: centerと指定すれば、指定が被ることになります。
body {
color: #333; /* 黒に近い色 */
font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
font-weight: 500;
font-size: 1.6em;
line-height: 2.4rem;
text-align: center;
}
p {
text-align: center;
}一方、<body>の指定が継承だと知っていれば、指定の重複を防げる。
つまり、指定を1つ減らせます。
と言っても、初心者の人はぜんぜん神経質にならなくていいですよ。
あくまで余裕が出てきたらでオッケー
box-sizingは継承されない
よく勘違いしがちなのですが、box-sizingは継承されません。
非継承プロパティというやつです。
ですから、box-sizingは、
*, *::before, *:after {
box-sizing: border-box;
}みたく、指定していると思います。
* はアスタリスクといって、すべての要素に指定する時に使われます。
なんか、いろいろややこしいですね。
【参考記事】box-sizingとは？｜幅・高さの基準を変える
継承と初期値の関係
プロパティには初期値がありましたね。
初期値とはプロパティを指定しない時、はじめから与えられている値です。
例えば、text-alignの初期値はstartという値で、要は左寄せです。
ほぼほぼleftと同じ解釈でオッケー
で、これまで見てきたとおり、親要素にtext-align: centerが指定されていれば、そちらが優先して子に引き継がれました。
もし親要素にtext-alignが指定されてなければ、子要素は初期値が適用されるというわけです。
【参考記事】【css】初期値の使い所を理解する
参考サイト
「継承」は、CSS3をもとに書きました。
CSS3とは、cssのルールブックみたいなもので、その最新版です。
まとめ
ちょっとむずかしめなので、余裕が出てきたら見直してみてください。
というわけで、おしまい。