PR

PCとスマホで表示非表示(スタイル)を切り替える方法

スマホでは表示したいけどPCでは表示したくないまたはその逆なんてことがあります、今回はその方法をご紹介します。
Media Queriesを使用すると簡単に表示非表示を切り替えることができます。
表示画面の大きさで判断するのである程度の余裕をもって画面サイズを指定しておきましょう
 

スポンサーリンク

※指定部分は500pxと記述している部分です
HTML ここに切り替えたい要素を記述

CSS

/*画面の大きさが500px以下だと適応するスタイル(スマホに表示)*/
@media screen and (max-width: 500px) {
.sm500 { display: block !important; }
}
/*画面サイズが500px以上だと適応しないスタイル(pc非表示)*/
@media screen and (min-width: 900px) {
.sm500 { display: none !important; }
}
/*表示するしないを入れ替える場合は「block」と「none」を入れ替えてください*/

HTML5になると下記表現になります

Max Width:最大幅、このサイズより小さい場合
Min Width:最小幅、このサイズより大きい場合
Max Device Width:最大幅、このサイズより小さい場合
Min Device Width:最小幅、このサイズより大きい場合

【DaVinci Resolve】Speed Editorが「DaVinci Control Panels」には認識されるけどダヴィンチリゾルブ側で認識されない場合の対処方法!
アドセンスのお支払い情報画面に「お支払いが遅れることなく、税金の源泉徴収も適切に行われるようにするために、できる限り早急にシンガポールの税務情報をご提出ください。」と表示された?!(対処方法)
auスマホ・タブレットのSIMロックを無料で解除する方法(auスマホで格安MVMO SIMが使えるようになる!)
Windows11で高速スタートアップを無効にする方法(稀にハードウエア不具合を招くことも!?)
DaVinci Resolveの課金有料版「DaVinci Resolve Studio」をポイントも合わせてなるべくお得に購入する方法(実際に買ってみた)
【ライティング】キーボードなどのライティング設定を邪魔してくるWindws機能「動的ライティング」の切り方(無効にする方法)
【100均】ペン型セラミックカッターが便利すぎるのに100円で買える!?
【AI】初めてChatGPTに登録して聞いてみた(AI初体験)
入院時の暇つぶし最強アイテムは家でも使っているアレ!
容量は増えていくけどたまに必要になる中容量のSDカード(32GB)を購入したのでベンチマークしてみた
2024年10月
 123456
78910111213
14151617181920
21222324252627
28293031  
タイトルとURLをコピーしました