[HTML+CSS]display:none;でスマホの場合だけ非表示にする方法

最近は、PCで表示した場合とスマホで表示した場合で、表示の仕方を変える場合がほとんどだと思います。

そしてその実現手段としてCSSで画面幅ごとに対応していく場合があります。

 

例えばPCではヘッダー部にメニューを設置しているが、スマホではハンバーガーメニューにしてタップすると上からにゅーっと出てくるようにしたりです。

この場合、PCで用意したメニューをそのままスマホのハンバーガーに使えるならいいですが、HTMLの構造やスキルのレベルで同じHTMLを使いまわせない場合が出てきたりします。

そんなときはPC用のメニューはPCでのみ表示させて、スマホメニューはスマホでのみ表示させれば切り分けれるので簡単ですね。

 

上記のような場合でなくても、スマホでは非表示にしてPCでは表示したり、またはその逆の場合はよくあることだと思います。

PHPでそもそも出力するHTMLを切り分ける方法もありますが、PHPのスキルも必要になってきます。

今回はCSSを使って表示を切り替える方法を紹介します。

[HTML+CSS]display:none;でスマホの場合だけ非表示にする方法

実際にPCとスマホで表示が切り替わるコードを書いてみます。

今回は簡易的にPCでは猫画像が表示され、スマホでは犬画像が表示されるというものを作成しました。

HTML

猫エリアも犬エリアもHTMLとしては出力してしまいます。

表示の切り替えはCSSで行います。

CSS

pcviewがクラスに設定された猫エリア要素は、PC時にのみ表示されます。

スマホ表示時(979px以下のとき)は pcview には display: none; が適用されて非表示になります。

 

逆にspviewがクラスに設定された犬エリア要素はスマホ時のみ表示されます。

まとめ

このようにdisplay: none;を使ってデバイス毎にHTMLの表示を切り替えることが可能です。

ただこの方法だとHTMLを両パターン出力することになるので、HTMLの通信量が多くなります。

あまりきれいなHTMLとも言えないので多用は避けたほうがよさそうです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA