スタイルの優先順位と継承とは?

スタイルの優先順位って何?


よりデザインにこだわったサイトを制作していると、複数のスタイルを指定してしまうことがあり、どうにも思うようなデザインにならないことが多々あります。
このような場合、どうやって優先順位が決定されるかというと、そのタグの最も近くで指定されたスタイルが上書きされるようにして優先されます。なお、外部CSSファイルで指定した場合は、上から順番にファイルを読み込んでいくという流れになるため、ファイルの下の方にあるスタイルが最終的に適用されます。
ただし、セレクタの種類によって更に優先度が異なります。より局所的に指定されるidセレクタが最も優先度が高く、ついでclassセレクタ、タイプセレクタ、全称セレクタとなります。同一のセレクタが用いられていた場合、やはり最後に指定したスタイルが適用されます。また、要素を特定した詳細なセレクタの方が、特定されないものより優先されます。
確実に特定のスタイルを最優先させたい場合、!importantというキーワードを用いることでどのような状況でも適用されるようになります。


image

更に複雑になりやすい、スタイルの継承って何?


HTMLには親要素、子要素というものがあります。例えば、divボックスの中にpタグで記述された文章がある場合、divが親要素、pが子要素という立場になります。この時、親要素が指定したスタイルが、自動的に子要素にも適用されることがあり、これをスタイルの継承と呼びます。具体例では文字色や文字サイズなどが継承されます。
一方、継承されないスタイルもあり、例としては枠線のボーダーや余白、画像などが該当します。このような場合、親要素と子要素の両方に等しく値を設定するか、inheritという値を指定することで強制的に継承させることが可能です。
ただし、例えば親要素に相対的な値を指定していた場合は注意が必要です。例えば、幅を%していて継承させた場合、親要素が80%とすると、子要素は親要素の80%に80%を掛け合わせることになるので、適用されるのは64%になります。想定外のサイズやデザインになりやすいので、確認して用いましょう。