HTML文書にスタイルを指定していく上で、思い通りにスタイルが適用されなかったりすることがあります。そんな時に思い出してほしいCSSの挙動を記事にしています。
後半ではPCでもスマホでもそれぞれのスタイルを指定できる、レスポンシブ化について簡単に紹介しています。
カスケードと詳細度
見出しから小難しい言葉ですが、まずカスケードについては下の例を見てください。
p {
color: red;
}
p {
color: blue;
}<p>要素に対して同じcolorプロパティを二重に指定しています。この場合はどちらのプロパティが反映されるでしょうか？
この場合のように、全く同じセレクタで、同じプロパティが複数指定されている場合、スタイルシート上流から読込み、最も下流にあるものが適用されます。
これがカスケード(小さい滝の意)になります。
複数のスタイルシートを読込む場合も同様です。以下のようなスタイルシートの読込順の場合を考えます。
<head>
...
<link rel="stylesheet" href="./style1.css">
<link rel="stylesheet" href="./style2.css">
</head>この二つのstyle1.cssとstyle2.cssファイル内で、全く同じセレクタで異なるスタイルが記述されている場合は、下流にあるstyle2.cssの内容が適用されます。
では次の場合はどうなるでしょう？？
<p class="txt">hogehoge</p>.txt {
color: red;
}
p {
color: blue;
}<p class="txt">に対して、.txtとpの二つのことなるセレクタで、同一のcolorプロパティが記述されています。先の例から、下流にあるcolor:blue;適用されそうですが・・・
ここでは.txtセレクタの方のスタイルcolor:red;が適用されます。
これはクラス指定のセレクタの方が、要素指定のセレクタより詳細度が高いためです。
詳細度の決定方法については複雑なのでここでは割愛しますが、優先順序をざっくりと表すと、IDセレクタ > クラスセレクタ > 要素セレクタになります。
まとめると、
ある要素に対し、競合するプロパティがある場合、
- セレクタの詳細度が高いものを適用する。
- セレクタの詳細度が同じであれば、読込順で最後のものを適用する。
となります。
ちなみに、html要素のstyle属性に直接スタイルを記述する方法と、プロパティの値の末尾に!importantをつける方法があり、これは詳細度が最強になります。
通常のWEB制作ではめったに使用しませんので特に解説しません。というよりこのカスケードと詳細度を無視することになるので、できるだけ使用しないでください・・・。
継承
プロパティの紹介でも少し触れましたが、一部のプロパティは、それを指定した要素の子要素にも適用される場合があり、これを継承と呼びます。
<div class="sec1">
<p>文字色は青色になります</p>
</div>
<p>文字色は青色になりません</p>.sec1 {
color: blue;
}親要素の.sec1にのみcolorプロパティを指定していますが、子要素の<p>にも反映されます。もちろん.sec1の外にある要素には反映されません。
テキストの装飾に関係するプロパティは大体継承されるものと思って間違いないと思います。
リセットcss
各HTML要素を、スタイル指定せずに素のままでブラウザで表示すると、<h1>、<p>等で見た目が異なり、デフォルトでスタイルが付いている事が分かります。
また、margin、padding等もデフォルトで指定されており、目的のスタイルにしたい場合は、一度このデフォルトのスタイルを打ち消す必要があります。
そんな時に使えるのがリセットcss です。
リセットcssでググれば有名なリセットcssが出てくるのでそれをコピペしてreset.css等のファイル名として保存しましょう。(色々種類あるけどそこまでの大差は無い)
HTMLからは次のように読み込みます。
<head>
...
<link rel="stylesheet" href="./reset.css">
<link rel="stylesheet" href="./style.css">
</head>style.cssが該当ページに対するスタイルを記述したものです。
必ずリセットcssを先に読み込みましょう。
先のカスケードのルールから、最初にリセットcssを読み込むことで、デフォルトのスタイルを打ち消し、その後に自分の記述したスタイルを読み込んでいく、という流れになります。
レスポンシブ化
今のWEBサイトは大体のものが、PCで見た時とスマホで見た時の見た目が異なります。
スマホで読み込んだ時だけ、モバイル版のページにリダイレクトするものもありますが、大体はHTMLそのものは同じものを用いて、PCのスタイルとは別にスマホ用のスタイルを用意して、画面幅に応じてそのスタイルを読み込むようにしています。いわゆるレスポンシブデザインというものです。
cssファイル内に@mediaから始まる以下のような記述(メディアクエリ―)を追加すると、その後の中括弧内のブロックに指定した画面幅内でのみ適用となるスタイルを記述できます。
@media screen and (min-width: 1220px) {
/* この中にスタイルを記述すると */
/* 画面幅が1220px以上の時のみ適用となる */
}同じcssファイルの中にPC等の画面幅サイズ"大"版(1220px以上)、画面サイズ"中"版(769px~1219px)、スマホ等の画面幅サイズ"小"版(768px以下)のスタイルを記述する時は下記のようにします。
/* 始めに画面幅"大"版のスタイルを記述 */
@media screen and (min-width: 769px) and (max-width: 1219px) {
/* 画面幅"中"版のスタイルを記述 */
}
@media screen and (max-width: 768px) {
/* 画面幅"小"版のスタイルを記述 */
}この時、各画面幅の端末で読込むと、カスケーディングのルールから次のようになります。
- 画面幅"大"の時は、初めの方に記述されているスタイルのみを読込みます
- 画面幅"中"の時は、画面幅"大"のスタイルを読込んだ後、画面幅"中"スタイルを読込みます
- 画面幅"小"の時は、画面幅"大"のスタイルを読込んだ後、画面幅"小"スタイルを読込みます
下の二つの項目は、初めに読込んだ画面幅"大"スタイルをベースとして、不要なものは上書きしてから各画面幅のスタイルを記述していく必要があります。
次の記事
実務でよく使うデザインについて紹介します！