はじめに

当たり前ですが、パソコンでwebサイトを閲覧するときは画面がスマホより大きいです。

そしてスマホでwebサイトを見るときはパソコンより小さいです。

そういった様々なデバイスの大きさに対応し、閲覧しやすいデザインのWebサイトを作成する方法があります。

レスポンシブwebデザイン

画面幅によって見た目が変わるようにWEBサイトやアプリケーションのデザインを設計することです。

作成したHTMLを画面のサイズによってCSSを変える事ができます。

webサイトをレスポンシブ化する為には下記の行程が必要です。

レスポンシブ対応をするためには、画面幅が異なるデバイスに対してWebサイトの表示領域の設定をする必要があります。

この表示領域をviewportと呼びます。

viewportの指定をしないと、スマートフォンで表示した時に、PCサイトのレイアウトをそのままスマートフォンの画面内に収まるように縮小して表示されるので、文字が小さくなり非常に見づらくなってしまいます。

「画面幅が500pxになった時のみ、h1タグのfont-sizeを5pxにしたい」場合は以下のように記述します。

.css

@media (max-width: 500px) {
  h1 {
    font-size: 5px;
  }
}

メディアアクエリ@media (max-width/min-width: 〇〇〇px) { }

メディアクエリとは、表示された画面幅に応じて適用するスタイルを切り替える機能です。

ブレークポイント

ブレークポイントとは、メディアクエリによって規定されるスタイル適用の分岐点を指します。

ブレークポイントの値を何pxにするか、また何箇所ブレークポイントを置くかは制作するWebサイトの要件によって変わります。