メディアクエリとは？基本の知識と注意点を解説
メディアクエリは、Googleも推奨するモバイルフレンドリーなWEBサイトの作成に欠かせない機能です。それぞれのデバイスに最適な画面サイズになるようにCSSを適用させる機能があります。
しかし、メディアクエリを適切に記述するには非推奨になっているものがあります。またメディアクエリはデバイスごとに条件文を記述しなければならず、記述が長く煩雑になりがちです。
WEBサイトの読み込み速度に影響することで画面表示に時間がかかり、ユーザビリティを低下させる可能性も考えられます。こういった事態を避けるために、省略して記述する方法を把握しておかなければなりません。
そこでこの記事ではメディアクエリをシンプルかつ適切に記述するために押さえておきたい基礎知識やメリットとともに、メディアクエリを使用する際の注意点を解説します。
メディアクエリとは
メディアクエリはWEBサイトをレスポンシブデザインに対応させるために必要な機能です。CSS3になってから登場しました。
メディアクエリではブレイクポイントでデバイスのスクリーン幅を指定します。これによってパソコンやスマートフォンなどさまざまなデバイスの画面であっても、WEBサイトを最適なサイズで表示できます。
レスポンシブデザインとは
レスポンシブデザインとはユーザーが使用するデバイスの種類に関係なく、各デバイスの画面に適したサイズでWEBページを表示できます。
レスポンシブデザインを活用すれば、ユーザーがどのようなデバイスからWEBサイトにアクセスしても、常に最適な表示サイズで表示することが可能です。スマートフォンからWEBサイトを閲覧するユーザーの増加を受けて、Googleもレスポンシブデザインを推奨しています。
レスポンシブデザインはユーザビリティを維持すると同時に、Googleの検索エンジンの評価につながるモバイルフレンドリーなWEBサイトを作成するために有効です。
ブレイクポイントとは
ブレイクポイントはデバイスの場面の幅に合わせてCSSを切り替えるポイントのことです。ブレイクポイントはスマートフォンやタブレット、パソコンといったそれぞれのデバイスの幅に合わせて、pixel（ピクセル）で設定します。なお、pixelとはデジタル画像を構成する最小単位です。
ブレイクポイントに特定のルールはありませんが、一般的には次のようなブレイクポイントがよく用いられます。
- スマートフォン：~480px
- タブレット：768px~1023px
- PC：1024px~
ただし、すべてのデバイスや機種に最適な設定を施すことは不可能です。特にスマートフォンの画面サイズはさまざまです。想定するスマートフォンの画面のサイズが上記事例と異なる場合は、別途サイズ指定してください。
メディアクエリのメリット
メディアクエリなら、CSSファイルに必要条件を記述するだけでレスポンシブデザインが実現可能です。これによって期待できるメリットには次のようなものがあります。
- 設定の難易度が低い
- メンテナンスが容易
CSSはプログラミング言語と比べると難易度が低く、初心者でも使いやすい言語です。CSSファイル1つで修正や変更といったメンテナンスができるため、管理の手間も少なくすみます。
メディアクエリの弱点
メディアクエリの難点はコードが長くなることです。
メディアクエリでは条件を細かく指定するためコードの記述量が多くなります。そのためWEBページの読み込みに時間がかかり表示速度が遅くなるため、ユーザビリティの低下は否めません。メンテナンスや変更の際も記述内容を確認するのに手間がかかります。
ただ、メディアクエリには省略可能な記述があります。不要なコードを書かないことで少しでも記述量を減らし、ページの読み込みにかかる負担を軽減してください。
メディアクエリ以外でレスポンシブ対応にする方法
メディアクエリに頼らずにWEBサイトをレスポンシブ対応させる方法には、次のようなものがあります。
- WordPressのテーマやプラグイン
- CSSレイアウトモジュール
- CSSフレームワーク
- JavaScript
WordPressのテーマやプラグインでレスポンシブデザインを実現するのが、もっとも容易な方法です。
WEBサイト作成やプログラミングの知識がある場合はFlexboxのようなCSSレイアウトモジュールやBootstrapのようなCSSフレームワークのほか、プログラミング言語のJavaScriptでもレスポンシブデザインすることも可能です。
なお、GoogleはJavaScriptでレスポンシブデザインを実装する方法を紹介しています。
メディアクエリとビューポート
メディアクエリとビューポート（viewport）はどちらもレスポンシブ対応に欠かせません。メディアクエリとビューポートは一緒に使ってください。
ビューポートはモバイルフレンドリーなサイトにするために欠かせない記述です。しかし、ビューポートだけでは不十分です。メディアクエリを併せて使用することで、よりレスポンシブになります。逆にメディアクエリだけ設定してビューポートを記述しないと、メディアクエリが機能しません。
モバイルフレンドリーであることはWEBサイトの必須条件といっても過言ではありません。HTMLに記載するだけでモバイルフレンドリーが実現するビューポートは、メディアクエリを設定するなら必ず記述してください。
ビューポートとは
ビューポートは表示領域のことです。WEBページの横幅を意味しています。ビューポートのコードはHTMLのheadタグに記述してください。
Googleは以下のmeta name=”viewport” をheadタグに記述することを推奨しています。
引用元：レスポンシブ ウェブ デザイン（Google検索セントラル）
例えばビューポートを設定しないパソコン用のページをスマートフォンの画面で表示すると、文字もページも小さく表示されることがあります。ユーザビリティの低下は否めません。
ビューポートが指定されていないWEBページでは、モバイルブラウザがパソコン画面の幅を想定して縮小した画面が表示されます。コンテンツが読みにくくなるため、ユーザーフレンドリーではありません。
しかし、ビューポートを設定した場合は縮尺を変更するのではなく、スマートフォンの画面に最適のデザインが表示されます。WEBコンテンツもスマートフォンで読みやすい大きさに表示されるため、ビューポートはすべてのWEBサイトに欠かせない記述です。
モバイルファーストインデックスとは
モバイルファーストインデックス（MFI）とはスマートフォン向けのWEBサイトを優先的にSEOで評価する仕組みです。
モバイルファーストインデックス導入以前は、パソコン用のWEBサイトを基準に検索順位が決定されていました。しかしモバイルインデックスが導入されて以降、スマートフォン向けのサイトが優先的に検索エンジンによってインデックスされ評価されるスタイルに変更されています。
2018年3月に開始されたモバイルファーストインデックスの完全移行の期日は延長されています。しかし、スマートフォンからWEBサイトを閲覧するユーザーの増加に伴い、モバイルフレンドリーなWEBサイトの重要性は増す一方です。
メディアクエリで指定する内容
メディアクエリを記述する際は、メディアタイプとメディア特性によって対象デバイスを指定してください。
具体的には以下のような書式になります。
メディアタイプ、メディア特性のいずれにも、推奨されているものと非推奨のものがあります。使用にあたっては注意が必要です。
メディアタイプとは
メディアタイプとはWEBページを表示させるデバイスの意味です。パソコンのブラウザのほかスマートフォンやタブレット、スクリーン、テレビ、印刷機器といった多様なメディアが想定されています。
メディアタイプは@mediaやmedia属性である<link>要素や<style>要素で指定してください。
推奨されるメディアタイプ
メディアクエリ4以降、メディアタイプは以下の4つが推奨されています。
推奨されるメディアタイプ
| メディアタイプ | 対応メディア |
| all | すべてのデバイス |
| screen | デバイス(
プリンターまたは音声機器以外)
|
| プリンター、印刷プレビュー画面 | |
| speech | 音声出力デバイス |
WEBサイトを作成する際によく使用されるのはallもしくはscreenです。プリンターに適用したくないWEBサイトでない場合は、allを使用してください。
非推奨になったメディアタイプ
以下は非推奨になっているメディアタイプです。使用しないように注意してください。
- aural
- braille
- embossed
- handheld
- projection
- tty
- tv
メディア特性とは
メディア特性ではデバイスの表示領域の横幅や高さといった要素を指定します。主に使用されるのはデバイスの横幅です。widthと記述します。
推奨されるメディア特性
推奨される主なメディア特性には次のような種類があります。
メディア特性の種類
| メディア特性 | 内容 |
| width | 幅 |
| height | 高さ |
| orientation | 向き |
| aspect-ratio | 縦と横の長さの比(アスペクト比) |
| resolution | デバイスの解像度 |
非推奨のメディア特性
次のメディア特性は使用が推奨されていません。使用は避けてください。
- device-aspect-ratio
- device-width
- device-height
メディアクエリを記述する方法
メディアクエリを記述する方法には次の3つがあります。
- HTML内のlinkタグにmedia属性記述
- CSS内で@mediaを記述
- CSS内で@importを記述
HTML内のlink要素にmedia属性を記述
HTMLにメディアクエリを記述する際は、CSSファイルを読み込むlinkタグにmedia属性を記述します。
例えば、表示デバイスの最大幅が640pixelの場合は、以下のようになります。
linkタグはHTMLのhead内に記載してください。head内に表記すれば、WEBサイトを訪問した人の目に触れることなく、ブラウザや検索エンジンに指示を出すことができます。
ただし、メディアクエリでstyleタグは使用できないので注意してください。
CSS内で@mediaを記述
CSSに@mediaを記述すると、指定したスタイルをそれぞれのデバイスに振り分けることができます。
記述方法は次の通りです。
@media メディアタイプの指定 and (メディア特性の指定) {
/*指定するスタイルの記述*/
}
例えば、表示デバイスの最大幅が640pixelの場合は、以下のようになります。
@media screen and (max-width: 640px) {
div {
width: 100%;
}
}
CSS内で@importを記述
CSSに@importを記述すると、インポートするファイルを各デバイスに振り分けることができます。
@importは次のように記述してください。
表示デバイスの最大幅が640pixelの具体例は次のようになります。
メディアクエリの記述を短くする方法
メディアクエリにはコードを簡潔に記述する方法が2つあります。
- 省略できる記述
- 接続詞の使用
コードがコンパクトになれば、ページの表示速度が遅くなりがちなメディアクエリの弱点を軽減する効果が期待できます。
省略できる記述
メディアクエリには省略できる記述があります。書かなくてよい記述を省略すればページの読み込みにかかる時間を短縮する効果が期待できるので、覚えて損はありません。
省略できる記述には次のようなものがあります。
- メディアタイプのall
- メディア特性に使うminとmax
メディアタイプのall
allというメディアタイプは、すべてのメディアを指定できます。allは記述を省略することも可能です。
例えばすべてのデバイスにおいて最大幅が640pixelに設定したい場合は次のように記述します。
@media all and (max-width: 640px) {
/*指定するスタイルの記述*/
}
この表記のand allを省略して、以下のように記述することも可能です。
@media (max-width: 640px) {
/*指定するスタイルの記述*/
}
メディア特性に使うminとmax
メディア特性のwidhtやhegihtにはminやmaxを使用します。このminやmaxを省略してそれぞれ<や>への変更が可能です。
先の例で考えた場合、次のようになります。
@media screen and (width < 640px) {
}
接続詞の使用
メディアクエリでは、接続詞を使用して複数のメディア特性の指定を一括しておこなうことも可能です。メディアクエリの接続詞には次のようなものがあります。
- and
- or
and
andを使用すると複数のメディア特性を同時に指定できます。例えば、横幅の最大値と最小値を同時に指定することが可能です。
具体例を挙げると次のようになります。
@media (min-width: 200px) and (max-width: 640px) {
}
上記事例の場合ひとつの文で最小値を200ピクセルかつ最大値が640ピクセルに指定できます。
or
または、を意味する接続詞がorです。orと表記する、もしくはカンマ（,）を記述します。
例えば、200pixel以上もしくは640pixel以上の場合は次のように記述してください。
@media (max-width: 200px) or (min-width: 640px){
}
orをカンマ（,）に変えて次のように記述することも可能です。
@media (max-width: 200px), (min-width: 640px){
}
まとめ
メディアクエリはいまやすべてのWEBサイトに実装すべきレスポンシブデザインを実現する機能です。ただし、メディアクエリでレスポンシブ対応を設定する場合、各デバイスのサイズ条件を設定しなければなりません。コードが長くなることでファイル管理が煩雑になるほか、WEBサイトの表示速度の低下につながり、ユーザビリティを下げる可能性が考えられます。レスポンシブデザインは高度なWEBサイトの知識がなくてもCSSを編集するだけでレスポンシブデザインができることから、かつてはGoogleも推奨していました。しかし今はJavaScriptに切り替えています。また、ブレイクポイントに達するとレイアウトが切り替わる代わりに、利用可能なスペースに基づいてWEBサイトを最適化させるCSSフレームワークでレスポンシブデザインを実現する方法も登場しています。メディアクエリ以外の方法でレスポンシブデザインする方法も検討したいところです。引き続きメディアクエリでレスポンシブ設定する場合は、省略や接続詞を活用してコンパクトに記述することを心がけてください。
この記事の監修者
日本大学法学部卒業、広告代理店で12年間働いている間、SEOと出会い、SEO草創期からSEO研究を始める。SEOを独学で研究し100以上のサイトで実験と検証を繰り返しました。そのノウハウを元に起業し現在、10期目。営業、SEOコンサル、WEB解析（Googleアナリティクス個人認定資格GAIQ保持）コーディング、サイト制作となんでもこなす。会社としては今まで1000以上のサイトのSEO対策を手掛けてきました。
