資料ダウンロード
SEO無料相談
メディアクエリとは、Webページのデザインを記述するCSSのうちの1つです。
画面環境にあったデザインに切り替える機能があり、それぞれの画面の大きさや解像度に適した形に調整して表示できます。
本記事では、メディアクエリの概要や書き方、活用例について解説します。
目次
「自分でSEOの疑問を調べるは大変」
という方はウィルゲートにご相談ください。
「自社サイトにはどんなSEO改善をすれば良いのか？」「アルゴリズム変動で影響を受けたサイトを強化するにはどうしたら良いのか？」など、まだ具体的にサービス導入を検討していない方もお気軽にご相談ください。
メディアクエリとは
メディアクエリとは、従来のCSS（CSS2）では媒体までしか判断できなかったメディア・タイプを拡張して媒体の特性まで判断できるようにしたCSS3の要素のことです。
簡単に説明すると、条件を満たした場合は指定したCSSを適用し、満たさない場合は適用させないといった指示ができます。
これまで使用されていた従来のCSS（CSS2）では、媒体までしか判断できないため条件分岐を設定できず、CSSのみではレイアウトを柔軟に調整できませんでした。
新たな仕様が加わったCSS3を使用することで、メディア・タイプを拡張して「媒体の特性」まで判断できるようになり、レスポンシブデザインが作成できるようになりました。
レスポンシブデザインとは、画面の大きさに合わせてレイアウトを柔軟に調整するWebデザイン手法のことです。
あらゆるデバイスやディスプレイサイズでも見やすいWebページをデザインできるため、ユーザー満足度を高められるのがメリットと言えます。
基本の記述方法は、以下の通りです。
| media メディアタイプ and (メディア特性){指定したいCSSの記述} |
メディアタイプとは、デバイスの種類のことです。
メディア特性で画面幅の条件を明記すれば、〇px以上もしくは〇px以下の場合といった条件を指定できます。
指定したいCSSの記述はなくても問題ありませんが、記載すれば背景色や文字サイズなどを細かく設定できます。
それぞれの項目について詳しく見ていきましょう。
メディアクエリは、レスポンシブデザインを用いる際に理解しておく必要のある記述方法です。
レスポンシブデザインではPC版とモバイル版のURLを統一できるため、被リンク効果の分散防止につながり、Googleから正しく評価を受けることができます。そのため、メディアクエリを理解し、レスポンシブデザインに対応させることが、SEO対策に有効と言えます。
レスポンシブデザインのSEO効果についての詳細はこちらの記事をご参照ください。
『レスポンシブデザインのSEO効果は？メリットやデメリットを解説』
メディアタイプ
メディアタイプとは、「どのメディアにCSSを適用させるか」を指定するものです。
「Media Queries Level 5」によると、2022年2月10日時点（最新）では、以下の3つが推奨されています。
| メディアタイプ | 適用されるデバイス |
| all | 全てのデバイス |
| プリンター | |
| screen | プリンター以外のデバイス （PC、スマホやiPadなど） |
時が経つほど推奨されるメディアタイプは減少し、簡素化しています。現時点で推奨されていても、今後より重要な相違を捉えた特徴が定義されれば、非推奨にされる可能性は高いです。
一方、非推奨になったメディアタイプの一覧です。
- tty
- tv
- projection
- handoheld
- braille
- embossed
- aural
- speech
非推奨のメディアタイプを利用した場合、妥当な条件だとGoogleに認識されるものの、どこも合致しないものとして扱われるため使用を控えましょう。
指定の内容次第ではメディアタイプの「省略」も可能です。メディアタイプにすべてのデバイスを指定するときは、その値となる all を省略できます。
一例を紹介すると、以下2つは同義です。
- media=”(min-width: 500px)”
- media=”all and (min-width: 500px)”
また、印刷に対応していないCSSのプロパティが多いため、メディアクエリでprintを指定する時は以下の方法で仕上がりを確認してください。
- Chromeのデベロッパーツールでエミュレートして印刷時の見え方を確認する
- 実際にプリントアウトする
メディア特性
メディア特性とは、画面の高さや幅を指定する条件のことです。
レスポンシブデザインの導入によってスマホ対応するためには、まずは「width(幅の指定)」を覚えておきましょう。
メディア特性の種類を以下の表で確認しましょう。
| メディア特性 | 意味 |
| width | ブラウザの表示領域の幅 |
| height | ブラウザの表示領域の高さ |
| device-width | デバイス画面の幅 |
| device-height | デバイス画面の高さ |
| orientation | ブラウザの表示領域の向き |
| aspect-ratio | ブラウザの表示領域のアスペクト比 |
| device-aspect-ratio | デバイスの画面のアスペクト比 |
| color | デバイスのビット数 |
| color-index | デバイスのカラールックアップテーブルの項目数 |
| monochrome | モノクロデバイスのビット数 |
| resolution | デバイスの解像度 |
| scan | テレビのスキャン方式 |
| grid | グリッドかビットマップかを参照 |
「width（幅の指定）」でデザインが切り替わる数値をブレイクポイントといいます。
ブレイクポイントの定義は、以下の2つです。
- (min-width:600px) …600px以上と条件定義
- (max-width:600px) …600px以下と条件定義
min-width:600pxと指定したならブレイクポイントは600pxになり、600px以上のデバイスに適用されます。
スマホを基準として、大きいサイズのデバイスのメディアクエリを設定するなら、min-widthを使用すると構成しやすいです。
max-widthが示すのは表示領域の幅、max-device-widthはそのデバイスそのものの幅を指します。
ブレイクポイントを複数用いる場合は、以下のサンプルコードを参考にしてください。
【サンプルコード】
| .test { color: yellow; }@media screen and (min-width:600px) { .test { color: black; } }@media screen and (min-width:1025px) { .test { color: pink; } } |
このコードだと、599px以下であれば黄色、600〜1024pxであれば黒、1025px以上であればピンクの背景色が適用されます。
ブレイクポイントは「境界線」、メディアクエリは「範囲」といったイメージを持つと分かりやすいでしょう。
他にも画面の向きを指定できる「orientation」や、解像度を条件にできる「resolution」もサイトの状況によって役立ちます。
演算子
複数の条件を定義したい場合は、論理演算子を活用します。
論理演算子はメディアタイプとメディア特性の間に記述します。
and 演算子
and キーワードは、複数のメディアタイプやメディア特性を組み合わせます。
複数のメディア特性をつなぐことができ、「かつ」の意味を持ちます。
【サンプルコード】
| @media screen and (min-width: 600px) { … } |
600px以上の画面のあるデバイスに対し適用されることを意味します。
カンマ（,）区切り
カンマを使うと端末が指定された、いずれかの条件に合致するときに適用されます。
複数のクエリをつなぐことができ、「または」の意味を持ちます。
【サンプルコード】
| media=”(max-width: 420px), (orientation: portrait)” |
ビューポートの横幅が420px以内、または縦長のデバイスが対象を意味します。
not 演算子
notの効果は、その条件に一致しないデバイスを対象にすることです。
つまり、メディア特性の前にnotキーワードを置けば、否定形になります。
【サンプルコード】
| media=”not all and (max-width: 420px)” |
ビューポートの横幅が420px以内ではないデバイスに適用を意味します。
only 演算子
onlyを使うと、指定した条件に対応していないデバイスを対象外にできます。
古いブラウザーで適用されるのを防ぐことが目的のため、最近のブラウザーで適用されることはありません。
【サンプルコード】
| media=”only screen and (min-width: 600px)” |
対応しているブラウザならonlyは無視されて、それ以降のメディアクエリが処理されます。
メディアクエリの書き方
ここからは具体的なメディアクエリの書き方を解説します。
htmlファイルに記入する場合と、CSSファイルに記入する場合の2つの書き方があります。
サンプルコードのテンプレートを用意したので参考にしてください。
HTMLに記述する場合
HTMLに記述する場合、headerのlink要素でメディアクエリを指定します。
【サンプルコード】
| <head> <link rel=”stylesheet” href=”style.css” media=”screen and (max-width:480px)”> /** 中略 **/ </head> |
スマホ、タブレット、PCといった複数のデバイスに対応させるなら、複数のメディアクエリを記載して場合分けをしましょう。
【サンプルコード】
| <link rel=”stylesheet” href=”small.css” media=”screen and (max-width:480px)”>/* 画面サイズが480pxまでこのファイルのスタイルが適用される。*/ <link rel=”stylesheet” href=”medium.css” media=”screen and (min-width:480px) and (max-width:1024px)”> /* 画面サイズ480pxから1024pxまではこのファイルのスタイルが適用される。 */ <link rel=”stylesheet” href=”wide.css” media=”screen and (min-width:1024px)”>/* 画面サイズが1024pxからはこのファイルのスタイルが適用される。*/ |
viewportの設定方法も確認しましょう。HTMLにmetaタグを使用して、viewportの内容を定義します。書き込むときは、headタグ内に記述しましょう。
【サンプルコード】
| <meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”> |
viewportが適切に設定されていないと、メディアクエリが反映されない原因となります。
CSSに記述する場合
スタイルシート（CSSファイル）に直接記述する方法を解説します。
CSS内で@mediaに記述する場合
@media は「条件付きグループ規則」なかの１つで、メディアタイプの指定ができます。
メディアクエリを書き込むコツは、スマホ、タブレット、PCといったデバイスごとにCSSを分けることと、幅のサイズ順に書くことです。
「大きい→小さい」順か「小さい→大きい」順か、どちらかに統一して書き込んでください。
メディアクエリの指定方法には、モバイルファーストとデスクトップファーストの2つがあります。
【モバイルファーストサンプルコード】
| /* @media以外の所は全てのサイズで読み込まれます。 */ p { color:red; } @media screen and (min-width:480px) { /* 画面サイズが480pxからはここを読み込む */ p { color:#ededed;} } @media screen and (min-width:768px) and ( max-width:1024px) { /* 画面サイズが768pxから1024pxまではここを読み込む */ p {} } @media screen and (min-width:1024px) { /* 画面サイズが1024pxからはここを読み込む */ } |
【デスクトップファーストのサンプルコード】
| body { background:#E4E3E4;} /* 1024px以上の幅の場合に適用される */ @media screen and (max-width: 1024px) { /* 1024pxまでの幅の場合に適用される */ body { background-color:#2262D1; } } @media screen and (max-width: 768px) { /* 768pxまでの幅の場合に適用される */ body { background-color:#f10010; } }@media screen and (max-width: 480px) { /* 480pxまでの幅の場合に適用される */ body { background-color:#F9DF2C; } } @media screen and (max-width: 320px) { /* 320pxまでの幅の場合に適用される */ body { background-color: #68B876; } } |
多くのサイトで主流の指定方法はモバイルファーストと言われています。
多くのサイトでスマホユーザーが過半数を超えている現代では、デスクトップファーストで指定すると無駄に読み込みに時間がかかるためページ表示が遅くなってしまいます。
Google Analyticsなどでデバイスの割合を確認し、多い方のデバイスを指定しましょう。
ターゲットのデバイスの判断が難しいなら、モバイルファーストがおすすめです。
Google Analyticsの詳しい使い方は「Google Analyticsの初期設定から使い方まで解説」をご参照ください。
CSS内で＠importに記述する場合
@import は、書き込んだCSSに外部のスタイルシートを取り込みます。
外部のスタイルシートを取り込むコードは以下の通りです。
【サンプルコード】
| @import ‘custom.css’; @import url(“chrome://communicator/skin/”); |
@import を使いすぎると読み込み速度が遅くなるので、注意しましょう。
【実例】メディアクエリの活用例
メディアクエリを実際に活用していくうえで、知っておきたいCSSの記述を解説します。
デバイスの指定方法
メディア特性（幅の指定）を変更することでデバイスごとのサイズを指定できます。
iPhone13 ・iPad・PCを指定する場合のコードは以下の通りです。
【サンプルコード】
| /* 正確な幅 */ @media (width: 360px) { div { color: red; } } /* 最小幅 */ @media (min-width: 35rem) { div { background: yellow; } } /* 最大幅 */ @media (max-width: 50rem) { div { border: 2px solid blue; } } |
【サンプルコード】
| /* iPhone 縦 */ @media screen and (min-width:480px) { /* for iPhone Landscape (iPhone 横) */ } @media screen and (min-width:768px) and ( max-width:1024px) { /* for iPad */ } @media screen and (min-width:1024px) { /* for PC */ } |
iPad miniの扱いに悩む人もいるかもしれませんが、実際に画面を見てみると解像度の数字以上に表示が小さく見えるため、スマホ表示でも問題ありません。
また、高解像度のRetinaディスプレイ搭載モデルは実際のサイズの倍の解像度をもっているため、デバイス比で判断します。
デバイスのピクセル比で判断する記述は以下の通りです。
【サンプルコード】
| /* Retinaディスプレイの場合に適用される */ @media screen and (-webkit-min-device-pixel-ratio:2){ p {font-size: 1.2em; } } |
また、cssのバグによってブラウザがFirefoxの場合はデザイン崩れを起こす可能性があります。もしそうなった場合は、メディアクエリと同じ要領で以下のコードを記載してください
【サンプルコード】
| @-moz-document url-prefix(){} |
端末の向きを判定する場合の指定方法
デバイスの向きを判定するには、orientationを活用しましょう。
画面の縦と横でCSSを切り替えられるのでレスポンシブデザインにできます。
向きの指定は、portrait（縦向き）かlandscape（横向き）で行いましょう。
【サンプルコード】
| //縦向きの場合 @media screen and (orientation:portrait){ p {font-size: 1.5em; } } //横向きの場合 @media screen and (orientation:landscape){ p {font-size: 2.4em; } |
まとめ
本記事では、メディアクエリの特徴や書き方について解説しました。
デバイスごとに適切なサイズのWebページを表示することは、有効なSEO対策の一つです。
メディアクエリを習得すれば、初心者でもレスポンシブデザインを理解できます。
レスポンシブデザインの重要性とメディアクエリの書き方を確認して、ユーザーに快適なWebページを提供しましょう。
SEOに関して、何から着手すべきかわからない、なかなか成果がでないなどのお悩みがございましたら SEO無料相談も受け付けておりますので、お気軽にお問合せください。
