HTMLのレスポンシブデザインの書き方【現役エンジニアが解説】
今回は、HTMLのレスポンシブデザインの書き方について、順序立てて、簡単に解説していきます。
1. ビューポートの指定
レスポンシブデザインにするためにはビューポートを指定する必要があります。
ビューポートの指定はmetaタグで行い、このmetaタグはheadタグ内に書いておきます。
<meta name="viewport" content="width=device-width,initial-scale=1.0">
上記のコードでは、レスポンシブデザインにおいて大前提となるビューポートを指定しています。
2. メディアクエリを書く
レスポンシブデザインでは、メディアクエリによってCSSでデザインを分けます。
メディアクエリは、”@media screen and (幅の最大もしくは最小サイズ){}”の形式で書きます。
/* PC用 */
@media screen and (min-width: 481px) {
}
/* スマホ用 */
@media screen and (max-width: 480px) {
}
上記のコードでは、PC用(幅481ピクセル以上)とスマホ用(幅480ピクセル以下)でCSSを分けています。
3. レスポンシブのサンプル
レスポンシブデザインは、端末の幅のサイズによってCSSを分けるデザインのことです。
よくあるデザインは、横並びに配置していたものを、一つひとつ幅100%で大きく表示するものです。
@media screen and (max-width: 480px) {
img{width:100%;}
}
上記のコードでは、480ピクセル以下の端末で画像を表示するimg要素を全て幅100%で表示し、小さい画面でも見やすいようにしています。