【CSS】レスポンシブデザインを簡単に実装する

現代ではもはや当たり前となっているレスポンシブデザイン。
CSSを利用することで簡単に実装することができます。

やりかた

viewportを設定する

head部に以下のメタタグを追加します。

<meta name=”viewport” content=”width=device-width, initial-scale=1”>

@mediaを追加

CSSにメディアクエリを利用します。

@media screen and (max-width: 500px) {
  img {
    width: 50%;
  }
}

画面の幅が500px以下のとき、画像を50％のサイズにするという形にしています。
画面の幅が500pxより大きいときはメディアクエリ内に設定したCSSを適用することはありません。
こうやってレスポンシブデザインを適用することができます。