Q&A
（質問文は編集できます）具体的になにが継承されていて何が継承されていませんか？
おそらく超初歩的なかもしれませんが、CSSのスキルアップのために是非教えてください。
実在するサイトの模写を作ってコーディングの練習をしているのですが、時々うまくスタイルが反映されないということがあります。
大抵は書き直して、どうにかするのですが効率が下がってしまうので、ルールをしっかりと理解したいと思います。
例えば下記のコード
aタグ内に「こんにちは」というテキストがあり、それを囲むpタグ文字に関するプロパティをつけてみました。しかし、「こんにちは」にスタイルは適用されませんでした。aタグに書いたら適用されました。
この場合、pタグに書いたクラスの内容はなぜ継承されないのでしょうか。
また、こういったちょっとしたミスをなくすためにはCSS/HTMLの何を理解すべきでしょうか。
よろしくお願い致します。
追記：すみません、どうやらその時は何かしら他の点でミスをしていた可能性が高かったようです。今検証してみると文字色以外はどうやら適用されました。（記載したcssプロパティ）
<p class="hello"> <a href="#">こんにちはこんにちは</a> </p>
.hello{ font-family:"遊ゴシック"; font-size:1.6rem; color:#fff; line-height:2; }
申し訳ないです。質問に記載した通り、どうやら文字色以外は適用されました（文字色はリンクタグの青色のまま）
もしかしたら、aタグを囲んだテキストは親要素のブロック要素にプロパティをしても継承されない・・・?みたいな疑いをかけていたようです。
回答1件
0
ベストアンサー
こんにちは。
CSSではご存知かもしれませんがスタイルの継承というものがあります。
では、実際に例を見て確認してみましょう。
html
1<body> 2 <h1>スタイルの継承</h1> 3 <p>hello world</p> 4</body>
bodyにcolorプロパティを指定して文字色を赤色にしてみます。
bodyの子要素にはh1タグとpタグでいくつかダミー文を用意します。
ブラウザで確認してみるとh1タグやpタグに直接スタイリングしていなくても文字色は赤色になっているかと思います。
これがスタイルの継承です。
では、全てのプロパティがスタイルの継承をするかと思うかもしれませんが、スタイルの継承ができないプロパティも中にはあります。ではそちらも確認してみましょう。
先ほどのHTMLにborderプロパティを指定してみましょう。
bodyに対しては境界線が付いているかと思いますが、h1やpに対しては境界線がついていないかと思います。
これは、borderプロパティはスタイルの継承がされていない。ということになります。
では、継承がされるプロパティなのかそれともされないのかはMDNという仕様がまとめられているサイトで確認することができます。
今回は先ほど挙げた二つのプロパティで確認してみます。
colorプロパティ
どこをみるかというと仕様書という見出しがあるのでそちらをご参照ください。
この様に継承ありと書かれており、スタイルの継承はあるということが分かります。
では、先ほど継承が行われなかったborderプロパティを確認してみましょう。
borderプロパティ
先ほどと同じ場所を参照すると継承なしと書かれています。
この様にスタイルの継承には継承されるものとされないものがあるのでそちらとその仕様を確認できる様にしときましょう。
投稿2020/05/02 06:00
編集2020/05/02 06:20
総合スコア2076
ありがとうございます!プロパティによって継承があるものとないのがあるんですね。。。
確かに、borderが全てに継承されたらとんでもないことになりそうです。
少しずつこんな物もあるんだと理解していきます。分かりやすい内容ありがとうございます。
解決された様で何よりです
あなたの回答
tips
プレビュー
