CSSのリファレンスというより、自分用のメモとしてコードを記述します。
参考程度に見ていってください。
レスポンシブと聞くと難しいイメージを持つ方もいるでしょう。
しかし、CSSでスマホとPCで表示する画像を変えるだけでガラッとイメージが変わります。
ですので今回は、下記のような画像表示状態を作ります。
| デバイス | スマホ用画像 | 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に切り替えたりします。
次回は引き続きレスポンシブに関連する情報を載せたいと思います。
