display:none が効かない時の対処法

スマホ用のボトムナビゲーションをPCの際には非表示にしたいと思い、CSSで「display:none」を適応したのですが、全く効きませんでした。

 

display:noneはかなり強い記述で、バグはほとんどないとのこと。
効かないとしたら、他の要素で打ち消されている可能性が濃厚です。

落ち着いてみてみると…
「PCで非表示にしたい」という記述の後に「SPでは表示」という指示を書いています。
もしかしたらこれが原因では?
「PCでは非表示だけど→SPではやっぱり表示で」という、打ち消した後に表示の指示ではなく
「SPで表示→PCでは非表示」の順で記述してみるとうまくいきました!

もっと確実な方法

「PCではAを表示し、Bを非表示。スマホではAを非表示、Bを表示」という事があります。
その場合は上記や下記のような記述ではうまくいきません。

どちらかだけではなく、それぞれに「max-width」と「min-width」の条件をふりましょう。

まとめ

CSSは後に書いた記述の方が優先されます。
片方だけにwidthの条件をふってdisplay:noneを使う時には、表示したい要素の後に書くようにしましょう。

「PCではAを表示し、Bを非表示。スマホではAを非表示、Bを表示」という場合には、両方にwidthの条件をふりましょう。