静岡発のホームページ制作・Web集客・映像制作ならIHOLDINGS

メニュー

【CSSリファレンス】スマホとPCの画像の表示・非表示のコード

629 views
約 1 分
【CSSリファレンス】スマホとPCの画像の表示・非表示のコード

CSSのリファレンスというより、自分用のメモとしてコードを記述します。
参考程度に見ていってください。

レスポンシブと聞くと難しいイメージを持つ方もいるでしょう。
しかし、CSSでスマホとPCで表示する画像を変えるだけでガラッとイメージが変わります。

ですので今回は、下記のような画像表示状態を作ります。

ここをタップして表示Close
デバイス スマホ用画像 PC用画像
スマホ 表示 非表示
PC 非表示 表示

コードを書く前準備として、スマホ用の画像とPC用の画像を用意しましょう。

注意正確にはデバイスの種類で判断するのではなく、画面のサイズを判断して処理をするコードを変えている形になります。今回は幅〜480pxまでをスマホとし、〜767pxまでをタブレット用、768px以上をPC用と判断するように切り分けます。

まずはhead要素の中にデバイスのサイズを判断するためのコードを記述します。

<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" />

これを記述することで、後述する表示デバイス毎に変えるコードの処理をしてくれるようになります。
簡単に解説すると、各デバイスで見ている画面の幅をmaximum-scale=1と捉えます。つまり、幅が100%になるというわけです。

/*↓スマホ画像は表示、それ以外は非表示*/
@media only screen and (max-width:480px) {
.tab_img,
.pc_img{
display:none;
}
}

/*↓タブレット画像は表示、それ以外は非表示*/
@media only screen and (min-width:481px) and (max-width:767px) {
.sp_img,
.pc_img{
display:none;
}
}

/*↓PC画像は表示、それ以外は非表示*/
@media only screen and (min-width:768px) {
.sp_img,
.tab_img{
display:none;
}
}

ここまで理解できれば、もうお分かりの通りレスポンシブデザインの50%ぐらいまで理解したようなものです。
ここから難しくなるのは、スマホやタブレットのデバイス幅に合わせて要素のサイジングを変更したり、要素を
blockやinlineはたまたinline-blockに切り替えたりします。

次回は引き続きレスポンシブに関連する情報を載せたいと思います。

Writer

F.Ryu
Webのコーディングを担当しています。
主にhtml,CSS,php,jQuery,JavaScriptを扱っています。
毎日新しいコードに出会うことで想像する未来が広がって楽しいです。
多くの方にWebを通して貢献していきたいと思っています。

コメントする

*

Share / Subscribe
Facebook Likes
Tweets
Hatena Bookmarks
Google +
Pinterest
Pocket
Evernote