【SCSSは注意】レスポンシブが効かない・優先されない【CSS優先順位】

コーディング
スポンサーリンク

問題:メディアクエリで指定しているのにレスポンシブが効かない

状況:PCサイズ→スマホサイズの順でSCSSで記述
スマホサイズの時にフォントサイズと色を変更したいがレスポンシブが効かず、PC用のCSSのまま。

スマホサイズで表示時 @media screen and (max-width: 767px)



スマホサイズ(767px以内)で見ているのに、PC用のCSSが適用されている・・・。

デベロッパーツールでスマホサイズにして表示しているのにも関わらず、色は適用されていますがフォントサイズはレスポンシブが効いておらず、PCサイズのままです。

スマホ用サイズのfont-size: 20pxに打ち消し線が引かれており、このCSSが適用されていないことがわかります。

無理やり!importantをつければ解決できますが、スマホサイズのコード全てに付けなればならなくなるし、
!importantはルール無用で最優先にしてしまうので、なるべく使わない方が良いとのこと。

 

考えられる原因

head部分にviewportを記述していない

初歩的なことですが、headタグ内にviewportを書かないといけません。

<meta name="viewport" content="width=device-width, initial-scale=1">

 

今回は忘れず書いているのでviewportの問題ではありません。

CSSの優先順位通りに書けていない

この問題について調べてみると、どうやらCSSの優先順位の問題のようです。
CSSは、ただ上から下に書けばいいというわけではありませんでした。(基本的に下に書いたものが優先される)

 

CSSの記述の優先度の理解不足が原因

タイプセレクタのみで指定 優先度:低

p {
font-size:20px;
}

 

親要素+タイプセレクタ 優先度:高

.親クラス p {
font-size:20px;
}

 

私は後から書いたスマホ用のCSSに親要素を書かず小要素のみを書いていたため、優先順位が狂いPC用CSSが優先されてしまっていました。

 

SCSSのネストには注意!

私の場合はSCSSでネスト(入れ子)で書くことによって起きた問題です。
親要素もしっかり書かないとCSSの優先度が狂い、自分のしたいようにコーディングできない場合があります。

SCSSのネストでのミス

コンパイル後

SCSSでネストにして書いていると優先順位に気づきにくいのですが、コンパイル後は入れ子にしたものが上記のように連なって表示されるので、
「ここの要素はレスポンシブでも変更がないから書く必要なし〜」と言うわけにはいきません。

 

変更後・・・

スマホサイズで表示時 @media screen and (max-width: 767px)

スマホ用のCSS(SCSS)でも親要素まで書くことにより、無事にスマホサイズで表示時にスマホ用CSSが適用されるようになりました!

コメント

タイトルとURLをコピーしました