
今回もややマニアックな内容です。
コードでデザインが少し書けるようになったら、理解しておくと便利です。
では、さっそく…
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のルールブックみたいなもので、その最新版です。
まとめ
ちょっとむずかしめなので、余裕が出てきたら見直してみてください。
というわけで、おしまい。