Web担当者であれば、メディアクエリを知っておく必要があります。
メディアクエリ、聞いたことありますが、まだ理解できていなくて…。
モバイルフレンドリーなWebサイトには必須の知識だよ！
メディアクエリとは、ユーザーがWebサイトを閲覧するデバイスに合わせて、最適な画面サイズになるように、スタイルやレイアウトを調整する機能です。
ここでは、モバイルフレンドリーなWebサイト作りに欠かせない、書き方や活用方法などのメディアクエリの基礎知識を、初心者にもわかりやすく解説します。
メディアクエリとは
メディアクエリとは？
CSS3の一部で、デバイスの特定の条件に応じてスタイルシートを適用するための技術です。
メディアクエリは、デバイスの画面サイズ、解像度、方向（ポートレートまたはランドスケープ）、色の深度などの特性にもとづいてスタイルを調整します。
ユーザーはパソコンだけではなく、スマホやタブレットなど、さまざまなデバイスでWebページを閲覧します。
各デバイスによって、「画面サイズ」や「解像度」が異なるため、同じスタイルを適用してしまうと、デバイスによっては表示が崩れたり、読みにくくなったりすることがあるのです。
以前まで使用されていた「CSS2」では、画面サイズやデバイスの詳細な情報は取得できなかったため、レイアウトを柔軟に調整できませんでした。
一方「CSS3」では、画面サイズやデバイスの情報を取得し、それぞれの特性に合わせてスタイルを変更できます。
一つのWebぺージで、媒体の特性に合わせてスタイルを切り替えられるため、レスポンシブデザインの実現が可能となりました。
例えば、「特定の画面サイズの幅を超えたデバイスに対しては、レイアウトや文字サイズを変更する」など、より具体的な調整が可能です。また、デバイスの向き（縦向き・横向き）や解像度などにも対応できます。
スマホの小さい画面では、「文字を大きくする」「レイアウトを縦する」ことができ、反対にパソコンの大きな画面では、「広いスペースを活用して複数の列にする」「画像を大きく表示する」ことが可能です。
スマホでは「縦向き」、タブレットでは「横向き」の表示レイアウトなど、デバイスごとに最適な表示ができるんだ！
メディアクエリは、CSSの記述内で条件を指定することで、特定のデバイスや画面サイズに対して、異なるスタイルを適用する仕組みです。
デバイスに合わせてスタイルを切り替えられるから、ユーザーが最適な表示でWebページを閲覧できるようになるんですね！
あらゆる画面サイズやデバイスでも見やすいWebページは、ユーザーの利便性と満足度を高められるため、SEO評価の向上が期待できます。
メディアクエリの基本式
メディアクエリってどう記述するのですか？
いい質問だね！実は「基本式」があるから意外と簡単なんだ！
メディアクエリの基本式は以下です。
サンプルコード
@mediaメディアタイプand(メディア特性){指定したいCSS}
デバイスの種類は「メディアタイプ」で指定し、画面幅や画面サイズの条件は「メディア特性」で指定しましょう。
具体的な書き方は、後ほどご紹介するよ。
viewport記述例
メディアクエリを使う場合は、CSSだけではなくHTMLにも記述が必要です。具体的にいうと、<head>内に表示領域を指定するメタタグの「viewport」を記述します。
viewportを記述し忘れると、パソコン用のWebぺージをスマホで表示した際に、文字やWebページが小さく表示されることがあり、ユーザーエクスペリエンスが低下する恐れがあります。
viewportの記述方法は以下です。
サンプルコード
<meta name="viewport" content="width=device-width, initial-scale=1">
記述例では、viewportを指定し、content内で「画面幅＝デバイスのサイズ」「初期のズーム倍率＝1倍」とそれぞれ指定しています。
メディアタイプ
メディアタイプでは、CSSをどのメディアに適用させるのかを指定します。
今回は「推奨」と「非推奨」に分けて紹介しよう。
推奨
CSSで推奨されているのは、以下4つのメディアタイプです。
| メディアタイプ | 意味 |
|---|---|
| all | すべてのデバイス |
| screen | デスクトップパソコン・ノートパソコン・スマホ・タブレットなど、画面を持つデバイス ※プリンターまたは音声機器を除く |
| プリンターや印刷プレビューの画面 | |
| speech | 音声出力デバイス |
Webサイトの場合は、どれを指定すればいいのですか？
すべてのデバイスを表す「all」や、画面を持つデバイスの「screen」を指定することが一般的なんだ。
非推奨
非推奨のメディアタイプには、以下が挙げられます。
| メディアタイプ | 意味 |
|---|---|
| aural | 音声出力 |
| braille | 点字ディスプレイ |
| embossed | 点字プリンター |
| handheld | 携帯電話 |
| projection | プロジェクター |
| tty | 文字幅が固定の機器 |
| tv | テレビ |
非推奨になっている記述は、なるべく記述しないように心がけよう。
メディア特性
メディア特性では「画面の幅」「高さ」など、デバイスの表示領域を指定するよ！
スマホ対応のために、レスポンシブデザインを導入する際には、主に横幅を指定する「width」を使用します。
推奨と非推奨に分けてご紹介します。
推奨
CSSで推奨されているのは、主に5つのメディア特性です。
| メディア特性 | 意味 |
|---|---|
| width | 幅 |
| height | 高さ |
| orientation | デバイスの向き（縦向きまたは横向き） |
| aspect-ratio | 幅と高さの比率(アスペクト比) |
| resolution | デバイスの解像度 |
他にも、デバイスのカラー数（ビット数）を指定する「color」、グリッドまたはビットマップの参照を指定する「grid」なども使用できます。
非推奨
非推奨のメディア特性には、以下が挙げられます。
| メディア特性 | 意味 |
|---|---|
| device-aspect-ratio | 画面の幅対高さのアスペクト比 |
| device-width | 画面の幅 |
| device-height | 画面の高さ |
演算子
メディアクエリで複数の条件を指定したい場合は、論理演算子を使用します。
演算子はどこに記述するのですか？
「メディアタイプ」と「メディア特性」の間だよ。
and
「かつ」の意味を持つandは、複数のメディアタイプやメディア特性を組み合わせる際に使用します。
サンプルコード
@media (max-width: 319px) and (orientation: portrait) {}
上記の例では、「幅が319px以下」「デバイスが縦向き」の場合に適用されるよ。
カンマ
「または」の意味を持つカンマを使うと、クエリを複数つなぐことができ、端末が指定された、いずれかの条件に合った際に適用されます。
サンプルコード
@media screen and (max-width: 1279px), screen and (max-width: 1023px) {}
上記の例では「幅1279px以下」または「1023px以下」の場合に適用される、ということですね！
not
「ではない」の意味を持つnotは条件を否定するものですので、条件に一致しないデバイスを対象にします。
サンプルコード
@media not screen and (max-width: 413px) {}
上記の例では、「スクリーンではないデバイス」かつ「幅が413px以下でない」場合に適用されるよ。
only
特定のデバイスのみに適用することを指定できるのが、「のみ」の意味を持つonlyです。条件に合っていないデバイスを、対象から外せます。
ただし、古いブラウザでは正しく解釈されない可能性があるため、確認が必要です。最近のブラウザでは適用されることはほぼありません。
サンプルコード
@media only screen and (max-width: 1279px) {}
上記の例では、「スクリーン」かつ「幅が1279px以下」の場合に適用される、ということですね。
比較演算子
比較演算子には、以下4つの種類があります。
- >（～より大きい）
- <（～より小さい）
- >=（～以上）
- <=（～以下）
サンプルコード
@media (width >= 400px){}
上記の例では、「幅が400px以上」の場合に適用されるよ。
このように、論理演算子と比較演算子を使用して、条件付きのスタイル指定が可能になります。
演算子を使いこなすコツ
基本の書き方がわかったら、演算子を使いこなすコツもチェックしておきましょう。
記述方法の中には、省略できる記述もあるんだ。
コツをつかめば、コーディングがはかどりそうですね！
allのメディアタイプを省略する
allはすべてのメディアを対象とするものですが、実は省略できます。
省略前
@media all and (min-width: ○○px) {}
省略後
@media (min-width: ○○px) {}
「all and」という記述を省略したのですね！
比較演算子を使って記述する
範囲型のメディア特性で使用する「min」や「max」は、比較演算子を使った記述が可能です。
省略前
@media (max-width: ○○px) {}
省略後
@media (width < ○○px) {}
「max-」という記述が省略されていますね。
あまり変わらないと感じるかもしれませんが、記述が多い場合は特に、わずかな手間を減らすことで、スムーズに作業を進められます。
まずは基本の書き方を覚える。慣れてきたときに、省略する書き方を試してみてくれ！
メディアクエリの書き方
いよいよ、具体的な書き方をご紹介します。
書き方には3つの方法があり、「HTMLファイルに記述する」「CSSファイルに、@mediaまたは@importを記述」します。
HTML
HTMLに記述する方法では、media属性を、CSSファイルを読み込むlinkタグに記述します。
サンプルコード
<link rel="stylesheet" href="読み込むファイルのパス" media="指定するメディアタイプand (指定するメディア特性)">
例えば、表示デバイスの最大幅が768pxの場合は、以下のように記述します。
サンプルコード
<link rel="stylesheet" href="style.css" media="screen and (max-width: 768px)">
linkタグをhead内に表記することで、Webサイトを訪れたユーザーの目に触れることなく、検索エンジンやブラウザに指示を出すことが可能です。
メディアクエリでは、styleタグの使用はできないことを押さえておこう。
CSS
CSSでは、「@media」と「@import」を記述する方法があります。
@media
CSSに「@media」を記述することで、指定したスタイルをデバイスごとに振り分けることができます。
サンプルコード
@media メディアタイプの指定 and (メディア特性の指定) {/* 指定するスタイルの記述 */}
例えば、表示デバイスの最大幅が1024pxの場合は、以下のように記述します。
サンプルコード
@media screen and (max-width: 1024px) {div {width: 100%;}}
@import
読み込むファイルは「@media」と同じですが、CSSに「@import」を記述することによって、インポートするファイルをそれぞれのデバイスに振り分けることが可能です。
サンプルコード
@import url(‘読み込むファイル’) メディアタイプの指定 and (メディア特性の指定);
表示デバイスの最大幅が768pxの場合は、以下のように記述します。
サンプルコード
@import url(‘style.css’) screen and (max-width: 768px);
メディアクエリの活用例
上手くメディアクエリを活用すれば、ユーザーが使用しているデバイスの画面サイズに合わせて、異なるCSSを適用できます。
min-width、max-width
min-width、max-widthは、それぞれ幅の最小値と最大値を表すものです。
min（最小値）は、指定した値以上の条件に当てはまる要素にスタイルを適用するため、指定した値以上の範囲に該当する要素にスタイルが適用されます。
例えば、「min-width: 768px」は、「幅が768px以上の要素」という条件に当てはまりますので、768px以上の幅を持つ要素に対して適用されます。
一方のmax（最大値）は、指定した値以下の条件に当てはまる要素にスタイルを適用するため、指定した値以下の範囲に該当する要素にスタイルが適用されます。
minとmaxはサイズ制御など、特定の範囲内でスタイルを適用するために使用されます。そのため、条件に合致する要素に対して、最小値や最大値を指定することで、柔軟なデザインやレスポンシブ対応が可能です。
min-widthとmax-widthは併用できるが、可読性の低下につながるため、使用はどちらか一方にしよう。
モバイルファースト
Googleがモバイルフレンドリーを推奨しているため、Webサイトもモバイルファーストを意識しなければなりません。
モバイルファーストでは、画面サイズが大きくなるに連れて、スタイルを上書きします。
min-widthを使用し、「スマホ → タブレット → パソコン」の順で記述するよ。
/* モバイルデバイスのスタイル */
/* タブレット向けのスタイル */
@media (min-width: 768px) { /* タブレットのスタイル */ }
/* デスクトップパソコン向けのスタイル */
@media (min-width: 1024px) { /* デスクトップパソコンのスタイル */ }
「モバイル → タブレット → デスクトップパソコン」とスタイルを指定することで、同じ順序でスタイルを適用できます。
モバイルファーストは、モバイルユーザーの利便性向上のために欠かせない要素なので、意識したいと思います！
デスクトップファースト
モバイルファーストとは反対に、デスクトップファーストは画面サイズが小さくなるに連れてスタイルを上書きします。
max-widthを使用し、「パソコン→タブレット→スマホ」の順で記述するよ。
/* デスクトップ向けのスタイル指定 */
/* タブレット向けのスタイル指定 */
@media (max-width:1023px) { /* タブレットのスタイル */ }
/* モバイル向けのスタイル指定 */
@media (max-width: 767px) { /* モバイルのスタイル */ }
モバイルファーストの記述とは逆順で書くのですね！
よくある質問
メディアクエリはどこに記述するのですか？
HTMLのheadタグ内に記述します。このとき、HTMLにmetaタグでviewportを定義することで、メディアクエリが正常に反映されます。
記述の優先順位はどうなっていますか？
CSSは最後の記述が優先して適用されます。
CSSの「@media」とは何ですか？
1つまたは複数のメディアクエリの結果にもとづき、スタイルシートの一部を適用するためのアットルールです。
まとめ
メディアクエリはCSSで使用される機能で、異なるデバイスや画面サイズに応じて、スタイルを調整する機能です。活用することで、モバイルやタブレット、パソコンなど、さまざまなデバイスに対して最適な表示を提供できます。
書き方は@mediaルールにもとづいており、一般的な条件は画面の幅や解像度です。
初心者でもわかりやすく記述するためには、目的に合わせて複数を定義し、各デバイスに対して適切なスタイルを指定することが重要です。
レスポンシブデザインやユーザーエクスペリエンスの向上に、メディアクエリは欠かせません。
正しい書き方を学び、異なるデバイスでの表示に柔軟に対応することで、ユーザーに最適な閲覧体験を提供できます。
～流入を増やそう Googleビジネスプロフィール～">
