スマホ用のボトムナビゲーションを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の条件をふりましょう。
飯田市でホームページ制作・広告運用をサポート｜デザインスタジオiR
牧内理恵
まきうちりえ
飯田市在住、広告制作歴20年以上。これまで200名以上のクライアント様と向き合い、100件以上のサイト制作を手掛けてきたデザイナー兼エンジニアの牧内理恵です。御社の強みを引き出し、業績アップに繋がるWebサイト・ネットショップ・販促ツールをご提案します。拠点とする長野県内はもちろん、全国各地からのご依頼にも柔軟に対応しております。
「相談してよかった」と言っていただける、飯田下伊那地域のパートナーとして。
長野県飯田市を拠点に、ホームページ制作やECサイト構築、Web運用のトラブル解決を承っています。20年以上のキャリアで培った「伝わるデザイン」と「確かな技術」で、御社の業績アップを支えます。飯田・下伊那エリアはもちろん、全国からのオンライン相談も大歓迎です。
「ホームページを作りたい」「ホームページをリニューアルしたい」といったご依頼もお気軽にお声がけください。
※強引な勧誘は一切ありませんので、安心してお悩みをお聞かせください。
