Weblasts

スタイルの継承

スタイルの継承とは?

cssにはスタイルの継承という難しい概念があります
これをしっかり理解できると無駄なコードが減るのでしっかり理解しておくとよいでしょう

例えばこのようなコードがあったとします

表示結果
コードの中にも書いてありますが親要素であるdiv要素に設定された文字サイズが子要素であるp要素にもかかってきます 今まで当たり前のように扱っていたと思いますが、親要素から文字サイズの設定を継承したので大きくなりました

どのような時に便利なのか?

ズバリ、まとめて何かを設定したいときに有効な手段といえます
例えば

bodyに対して「font-size」「color」「line-height」を設定してあげると、上書きしない限りすべての要素にこの設定が適用されます。
もしもスタイルの継承ができない場合はすべての要素に対して一つ一つ設定をしていかなくてはなりません
これはハッキリ言ってめんどくさいですよね。

継承しないプロパティもある

全てのプロパティが親要素の設定を継承してしまっていたらその都度上書きしなくてはならない状態になります。
これは継承がない場合と同じぐらいめんどくさい状態だと思います。
スタイルの継承をしないプロパティもありますので合わせて覚えていく必要がありますが覚えるのはとても困難だと思うので、全てを覚える必要はありません
サイト制作をしているうちによく使うプロパティから徐々に身についていくものだと思います。

継承されないプロパティだけど強制的に継承させる

こんなことも可能です。
例えば継承しないプロパティである「border」

表示結果

親要素の設定を継承させたかったら
継承させたいプロパティの値にinherit
の形で記述しましょう。

inherit

inheritは親要素の値を継承させるためのプロパティ値です
どのプロパティにも設定できます


表示結果

そのままコピペしたほうが恐らく早い

POPULAR