CSSメディアクエリ(シーエスエス メディア クエリ)とは | 意味や読み方など丁寧でわかりやすい用語解説

CSSメディアクエリとは、Webページの見た目（スタイル）を、ユーザーが利用しているデバイスの特性や環境に応じて動的に変化させるためのCSSの機能である。これは、現代の多様なデバイス環境において、どのような画面サイズや解像度でも最適にコンテンツを表示し、ユーザーが快適に利用できるWebサイトを構築するために不可欠な技術である。例えば、パソコンで閲覧する際には広い画面を活かした複数カラムのレイアウトを、スマートフォンで閲覧する際には画面の狭さを考慮した単一カラムのレイアウトを自動的に適用するといったことが可能になる。メディアクエリは、@media というキーワードで始まるCSSのルールセットとして記述され、指定された条件が真である場合にのみ、その内部に記述されたCSSスタイルが適用される仕組みを持つ。これにより、一つのHTMLファイルで複数のデバイスに対応する「レスポンシブウェブデザイン」を実現する中心的な役割を担う。

メディアクエリは、主に「メディアタイプ」と「メディア特性（メディアフューチャー）」、そしてそれらを組み合わせるための「論理演算子」の三つの要素で構成される。

まずメディアタイプについて説明する。これは、スタイルを適用するデバイスの種類や出力媒体を指定するものである。代表的なものにscreen、print、allなどがある。screenはカラー画面を持つコンピュータやタブレット、スマートフォンなどのデバイスを対象とし、Webサイトの表示に最も一般的に利用される。printはプリンターや印刷プレビュー画面を対象とし、ページを印刷する際のレイアウトやフォントサイズなどを調整するのに使われる。allはすべてのメディアタイプを対象とするため、特別な理由がない限りは特定のメディアタイプを指定することが推奨される。

次にメディア特性について詳しく見ていく。これは、デバイスの具体的な特徴や状態を条件として指定するものである。非常に多くの特性が存在するが、特に利用頻度の高いものとしてwidth、height、min-width、max-width、orientation、prefers-color-schemeなどが挙げられる。

widthとheightは、それぞれビューポート（Webコンテンツが表示される領域）の幅と高さを指定する。min-widthは「指定された幅以上」を意味し、max-widthは「指定された幅以下」を意味する。これらを組み合わせることで、特定の画面幅の範囲内でのみスタイルを適用する「ブレイクポイント」を設定できる。例えば、@media screen and (min-width: 768px) と記述すれば、画面幅が768ピクセル以上のスクリーンデバイスにのみスタイルが適用される。逆に、@media screen and (max-width: 767px) と記述すれば、767ピクセル以下のスクリーンデバイスにのみスタイルが適用されることになる。これにより、タブレットとスマートフォンで異なるレイアウトを適用するといった制御が可能になる。

orientationはデバイスの向きを指定し、portrait（縦向き）またはlandscape（横向き）のどちらかにスタイルを適用できる。スマートフォンやタブレットでデバイスを回転させた際に、コンテンツの表示を最適化するために用いられる。

prefers-color-schemeは、ユーザーがシステムレベルで設定している色のテーマ（例えば、ライトモードやダークモード）に基づいてスタイルを適用する。lightまたはdarkを指定することで、ユーザーの環境設定に合わせたWebサイトの見た目を提供できるため、ユーザーエクスペリエンスの向上に大きく貢献する。

これらのメディアタイプやメディア特性を組み合わせて、より複雑な条件を指定するために「論理演算子」が使用される。主要な演算子としてand、or（CSSではカンマ, で表現）、notがある。

andは、複数の条件がすべて真である場合にスタイルを適用する。例えば、@media screen and (min-width: 768px) and (orientation: landscape) は、画面幅が768ピクセル以上のスクリーンデバイスで、かつ横向きの場合にのみスタイルが適用される。

orは、複数の条件のうちいずれか一つでも真であればスタイルを適用する。CSSではカンマ, で区切ることで表現される。@media screen and (min-width: 1200px), print のように記述すると、画面幅が1200ピクセル以上のスクリーンデバイス、または印刷メディアのどちらかの条件を満たす場合にスタイルが適用される。

notは、指定された条件が偽である場合にスタイルを適用する。@media not screen and (min-width: 768px) のように使用すると、画面幅が768ピクセル未満のスクリーンデバイスにスタイルが適用されることになる。また、onlyキーワードも存在するが、これは古いブラウザがメディアクエリを誤解釈するのを防ぐために用いられ、現代のブラウザでは通常は不要である。onlyはメディアクエリ全体を対象とし、指定されたメディアタイプと一致しないブラウザにはスタイルを適用させない。

メディアクエリは、CSSファイル内で@mediaブロックとして直接記述できる他、HTMLの<link>タグのmedia属性や、CSSの@importルールでも利用できる。<link rel="stylesheet" media="screen and (min-width: 768px)" href="tablet.css"> のように記述すれば、画面幅が768ピクセル以上のスクリーンデバイスでのみtablet.cssが読み込まれる。

このように、CSSメディアクエリはWebコンテンツを多様なデバイスやユーザー環境に合わせて柔軟に表示させるための基盤技術である。これにより、単一のコードベースで一貫性のあるユーザーエクスペリエンスを提供し、Webサイトの保守性を高めるとともに、アクセスできるユーザーの範囲を広げ、アクセシビリティの向上にも寄与する。システムエンジニアを目指す上で、現代のWeb開発においてレスポンシブデザインの実現と理解は必須であり、その中心にあるメディアクエリの知識は非常に重要である。