スタイルの継承
スタイルの継承とは？
cssにはスタイルの継承という難しい概念があります
これをしっかり理解できると無駄なコードが減るのでしっかり理解しておくとよいでしょう
例えばこのようなコードがあったとします
|
1 2 3 4 5 6 7 8 9 10 11 |
<style> div{ background-color:red; padding: 30px; font-size: 24px; } </style> <div> <p>スタイルが継承されるので設定なしでも赤くなります</p> </div> |
表示結果
どのような時に便利なのか？
ズバリ、まとめて何かを設定したいときに有効な手段といえます
例えば
bodyに対して「font-size」「color」「line-height」を設定してあげると、上書きしない限りすべての要素にこの設定が適用されます。
もしもスタイルの継承ができない場合はすべての要素に対して一つ一つ設定をしていかなくてはなりません
これはハッキリ言ってめんどくさいですよね。
継承しないプロパティもある
全てのプロパティが親要素の設定を継承してしまっていたらその都度上書きしなくてはならない状態になります。
これは継承がない場合と同じぐらいめんどくさい状態だと思います。
スタイルの継承をしないプロパティもありますので合わせて覚えていく必要がありますが覚えるのはとても困難だと思うので、全てを覚える必要はありません
サイト制作をしているうちによく使うプロパティから徐々に身についていくものだと思います。
継承されないプロパティだけど強制的に継承させる
こんなことも可能です。
例えば継承しないプロパティである「border」
|
1 2 3 4 5 6 7 8 9 10 11 |
<style> div{ border:5px dotted pink; padding: 30px; font-size: 24px; } </style> <div> <p>borderは継承されない</p> </div> |
表示結果
親要素の設定を継承させたかったら
継承させたいプロパティの値にinherit
の形で記述しましょう。
inherit
inheritは親要素の値を継承させるためのプロパティ値です
どのプロパティにも設定できます
|
1 2 3 4 |
</style> <div> <p>inheritを使うと継承される</p> </div> |
|
1 2 3 4 5 6 7 8 9 |
div{ border:5px dotted pink; padding: 30px; font-size: 24px; } p{ border:inherit; } |
表示結果
そのままコピペしたほうが恐らく早い
