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の記述
}- メディアタイプ【Media-type】
デバイスの種類 - メディア特性【expressions】
横幅・高さ・色など特性を条件に指定 - 論理演算子
論理演算子not,and,onlyを使用し、メディアタイプやメディア特性を指定。
参考) 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
Google Material Design
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
人気フレームワーク【Bluma】でブレイクポイントを考える
正解はないのですが、スマホ画面を基準に設計するときは、人気のフレームワークBulmaのブレイクポイントを参考にしています。
「Bulma」2016年にリリースされたフレームワーク
| Mobile | 最大768px: スマホ |
| Tablet | 769px以上: タブレット |
| Desktop | 980px以上: デスクトップ |
| Widescreen | 1180px以上: ワイドスクリーン |
設計アプローチがモバイルファーストか、デスクトップファーストかによっても違いますし、
サービスによって最適解が異なるのでカスタマイズは必要ですが、基本形のご参考に。
メディアクエリーを利用する3つの方法
- HTMLのlinkタグのmedia属性に記述
- css内に@media記述
- css内に@import記述
表示速度を速くするためには、メディアクエリを使わない。
- ユーザーエージェントで大きく振り分けてPC用またはスマホ用の表示
- メディアクエリのブレイクポイント毎に調整
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】と【メディアクエリー】についてでした。
