スマホ用のボトムナビゲーションを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の条件をふりましょう。
