こんにちは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デザインなどと言ってあげた方が良さそうです。
コメント