スマホでは表示したいけど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：最小幅、このサイズより大きい場合
