レスポンシブWeb対応 – メディアクエリとは?ブレイクポイントの設定方法【Media Queries】

code

PC/スマホ/タブレットなど、ひとつのHTMLでどのデバイスや画面サイズでも見やすいWebサイト構築する際に、知っておきたい【レスポンシブWeb】と【メディアクエリー】についてです。

レスポンシブWebとは?

ユーザーの画面サイズやブラウザに応じてウェブページが閲覧できることを目指したウェブデザインの手法。

  • どんな大きさの画面でも見やすく、使いやすいWebサイトにする。
  • 1つのHTMLで、CSS(情報の大きさや位置など表示の指定)はデバイスや画面サイズごとに設定を反映する。

メディアクエリ(Media Queries)とは?

メディアクエリとは、ある条件でCSSを適用し、それ以外には適用しないようにする方法です。

CSSの メディアクエリ(Media Queries)

メディアクエリ【Media Queries】の文法

メディアタイプとメディア特性を使用して、対象とするデバイスを指定します。

例:
media="screen and (min-width: 640px)"

解説:
@media メディアのタイプ and (メディア特性:特定の条件) {
  指定したいCSSの記述
}

  1. メディアタイプ【Media-type】
    デバイスの種類
  2. メディア特性【expressions】
    横幅・高さ・色など特性を条件に指定
  3. 論理演算子
    論理演算子 notandonlyを使用し、メディアタイプやメディア特性を指定。

参考) Media Queries Level 4
https://www.w3.org/TR/mediaqueries-4/#media-type

メディア特性:特定の条件【expressions】

レスポンシブWebでよく使う、メディア特性に画面サイズを指定して、それぞれにCSS設定をするサンプルです。

@media screen and (min-width:480px) {
/* 画面サイズ: 横幅480pxからは、こちらのCSS設定を適用 */

}
@media screen and (min-width:768px) and ( max-width:1024px) {
/* 画面サイズ: 横幅768px〜1024pxまでは、こちらのCSS設定を適用 */

}
@media screen and (min-width:1024px) {
/* 画面サイズ: 横幅1024pxからは、こちらのCSS設定を適用 */

}

メディア特性は、特定のユーザーエージェントや、デバイス、環境などの特性を記述します。

min-widthビューエリアの最小横幅。このサイズより大きい場合に適用
max-widthビューエリアの最大横幅。このサイズより小さい場合に適用
Min Device Width:デバイスサイズの最小幅。このサイズより大きい場合に適用
Max Device Width:デバイスサイズの最大横幅。このサイズより小さい場合に適用
Orientation:デバイスが縦長か横長かで振り分ける
Device Pixel Ratio:デバイスの解像度で振り分ける。

参考)https://developer.mozilla.org/ja/docs/Web/CSS/@media

ブレイクポイント【Break Point】

どの画面サイズでCSS設定を変えるか?を「ブレイクポイント」と呼びます。

Responsive layout grid
The Material Design responsive layout grid adapts to screen size and orientation, ensuring consistency across layouts.
https://material.io/design/layout/responsive-layout-grid.html#breakpoints

Google Material Design

人気フレームワーク【Bluma】でブレイクポイントを考える

正解はないのですが、スマホ画面を基準に設計するときは、人気のフレームワークBulmaのブレイクポイントを参考にしています。

Bulma」2016年にリリースされたフレームワーク

Mobile最大768px: スマホ
Tablet769px以上: タブレット
Desktop980px以上: デスクトップ
Widescreen1180px以上: ワイドスクリーン

設計アプローチがモバイルファーストか、デスクトップファーストかによっても違いますし、
サービスによって最適解が異なるのでカスタマイズは必要ですが、基本形のご参考に。

メディアクエリーを利用する3つの方法

  1. HTMLのlinkタグのmedia属性に記述
  2. css内に@media記述
  3. css内に@import記述

表示速度を速くするためには、メディアクエリを使わない。

  1. ユーザーエージェントで大きく振り分けてPC用またはスマホ用の表示
  2. メディアクエリのブレイクポイント毎に調整

Responsive design – Learn web development | MDN
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design

AppleやGoogleなど大規模Webサイトは、メディアクエリ ‘@mediba’ を使用せず、余計なデータを読み込まないように、まずデバイスごとに最適なソースを出しわけした上で、メディアクエリを使って微調整する、という構築の仕方をするようです。

  • 「表示速度・パフォーマンス」
  • 「管理コスト・効率化」

のどっちを取るべきか?または組み合わせるべきか?アクセス数やターゲットによってもWebサイト実装手段の選択肢が変わります。

まとめ

PC/スマホ/タブレットなど、ひとつのHTMLでどのデバイスや画面サイズでも見やすいWebサイト構築する際に、知っておきたい【レスポンシブWeb】と【メディアクエリー】についてでした。

あわせて読みたい記事

あわせて読みたい書籍

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA