HTMLのレスポンシブデザインの書き方【現役エンジニアが解説】

PROGRAM

今回は、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%で表示し、小さい画面でも見やすいようにしています。