【CSS備忘録】スマホ画面とPC画面で画像が切り替わる 簡単CSSレシピ

こんにちはrey( @reydesign8376) です
都内の勤務生活を辞めてフリーランスに。主にWeb制作しています。
趣味のサーフィンなどしながら海沿いでのんびり暮らしています。

地味に忘れがち、どっちがどっちだったけ、、、
スマホとPCで画面が切り替わるCSS記述をサクサクっと書いていきます
ではでは

目次

htmlとcss

切り替え方法の手段の1つにdisplay要素で切り替えるというのが簡単だったので
それを使っております。

HTML

<!–pcの時に表示したい画像–>
<div class=”pc”><img src=”img/pc-img.jpg” alt=”pc画像”></div>

<!–スマホの時に表示したい画像–>
<div class=”sp”><img src=”img/sp-img.jpg” alt=”スマホ画像”></div>

CSS

/* PC表示 */

.pc {

display: block !important;

}

.sp {

display: none !important;

}

/* スマホ表示 */

@media only screen and (max-width: 599px) {

.pc {

display: none !important;

}

.sp {

display: block !important;

}

}

display要素を使って切り替え

display:noneで画面非表示にさせて
display:blockは親要素の大きさが継承され、1つのブロックとして認識される。ブロック要素は縦に配置される。という特性を与えてあげて表示するようにします。
さらに!importantでスタイルを強制的にあたるようにしました

おまけ

SPは、スマートフォン(Smart Phone)の略なのですが
他にも「structured programming」「セールスプロモーション」「セキュリティ・ポリス」とかとか
色々な略に使われているらしいのでSPデザインなどと言ってあげた方が良さそうです。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA

目次