iPhoneやAndroidなどスマートフォンなどの様々なデバイス向けに最適化されたサイトを作成することをいいます。
レスポンシブデザインとは、PC向けのサイトから要らないコンテンツを隠したりして(JavaScriptを使用したりします)、様々なサイズのデバイスにあったようにCSS・JavaScriptを使ってサイズを調整します。
レスポンシブデザインを簡単に作成するためのポイントを紹介します。
CSSの振り分け
CSSの振り分けは3つの方法があります。
- CSS自体を振り分ける
- CSSの中で各デバイスごとに記述していく
- CSSの各ブロック毎(header等)に記述していく
CSS自体を振り分ける方法は今回は省略します。
今回はCSS内での振り分け方です。
@media(max-width:320px){
/*
CSSを記述
*/
}
と記述すると、デバイスのサイズごとに振り分けくれます。
オススメの記述の方法は3番です。
viewportの記述
先ほどの様にCSSを記述しても、ブラウザのサイズを小さくしたら変わると思いますが、iPhone等のデバイスでみると最適化されていないと思います。
これはiPhoneがPC用のサイズでみてしまっているためです。
これにはviewportというものを指定します。
viewportで、サイトを『デバイスと同じ大きさで開く・拡大を禁止する』等、どのようにみてもらうかを設定します。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
とhtmlに記述します。
画像の最適化
画像のサイズがデバイスの横幅より大きい場合、飛び出してしまったりします。
スマートフォン用でしたら画像は 横幅はいっぱいに表示したいので、下記のように記述します。
img {
max-width: 100%;
height: auto;
}
とすることで、画像が横幅いっぱいで表示されます。
簡単なレスポンシブデザインへの対応は以上です。
