「メディアクエリって、レスポンシブ対応で使うみたいだけど、どういう仕組み？」
「CSS初心者だけど、画面サイズごとにスタイルを変える書き方が知りたい」
このような疑問をお持ちではないでしょうか？
本記事では、メディアクエリの基本である「メディアタイプ」や「メディア特性」から、HTMLやCSSでの具体的な記述方法などを詳しく解説します。
弊社StockSunは、多くのシステム開発で実績を持つ認定パートナーと提携し、貴社の魅力を引き出すチームを提供します。
オンライン相談は無料です。貴社の魅力を引き出す戦略を聞きに行きましょう！
＼システム開発のプロが戦略をご提案／
【無料】システム開発の相談をする目次
メディアクエリは、ユーザーのデバイスや画面サイズ、向きに応じて、適用するCSSを切り替える仕組みです。
以前のCSS2では「画面用」「印刷用」の大まかな分類しかできませんでしたが、CSS3では画面幅などの具体的な条件も指定できるようになり、細かいスタイル調整が可能になりました。
たとえば「画面幅が〇〇px以下の場合はこのCSSを適用する」などの指定ができ、柔軟なデザイン対応が実現します。
メディクエリの仕組みにより、1つのHTMLファイルでもパソコン・スマートフォン・タブレットの異なる端末に合わせた表示ができるようになり、多くのWebサイトで採用されています。
メディアクエリの基本構文は、@media メディアタイプ and (メディア特性) { /* CSS */ } の形式です。
内部対策を意識したレスポンシブ化はSEO評価にもつながります。SEO内部対策に関しては以下の記事を参考にしてください。
関連記事：SEOの内部対策とは？内部対策20のチェックリストと使えるチェックツールを徹底解説【StockSun独自のチェックシートを無料提供中】
メディアタイプは、メディアクエリで「どの種類の媒体（デバイス）にスタイルを適用するか」を指定する基本的な分類です。Web制作で主に使われる推奨タイプは以下の通りです。
過去にはtv（テレビ）、handheld（携帯端末）などもありましたが、現在は使われていません。
メディア特性は、メディアタイプで指定した媒体が持つ、より具体的な特徴や状態を条件として指定する仕組みです。画面の幅や高さなどの情報を使って、スタイルの適用条件を細かく設定できます。
よく使われるメディア特性は以下の通りです。
上記の特性をandなどの演算子で組み合わせると、「画面幅が768px以上で、かつ横向きの時」のような、詳細な条件指定が可能になります。
演算子は、メディアクエリ内で複数の条件を結びつけたり、条件を否定したりするために用いる記号やキーワードです。主に論理演算子、比較演算子 の2つがあります。
論理演算子
比較演算子
上記の演算子を使いこなすことで、ターゲットとするデバイスや状況に合わせたスタイル調整が、正確に行えます。
弊社StockSunは、多くのシステム開発で実績を持つ認定パートナーと提携し、貴社の魅力を引き出すチームを提供します。
オンライン相談は無料です。貴社の魅力を引き出す戦略を聞きに行きましょう！
＼システム開発のプロが戦略をご提案／
【無料】システム開発の相談をするメディアクエリを実際にWebサイト制作で使うには、主に2つの記述方法があります。
コード例も交えながら説明するので、ぜひ参考にしてください。
HTMLファイル内でメディアクエリを指定する方法は、外部CSSファイルを読み込むを利用する仕組みです。
基本的な記述は以下のようになります。<head>タグ内に記述します。
<!– 例: 画面幅が 480px 以下の場合に small.css を読み込む –>
<link rel=”stylesheet” href=”small.css” media=”screen and (max-width: 480px)”>
上記の方法のメリットは、画面サイズなどの条件ごとにCSSファイルを完全に分離できる点です。例えば、スマートフォン用、タブレット用、パソコン用とCSSファイルを分け、それぞれの<link>タグのmedia属性で読み込む条件を指定できます。
| <!– スマートフォン用 (幅480px以下) –><link rel=”stylesheet” href=”mobile.css” media=”screen and (max-width: 480px)”> <!– タブレット用 (幅481px～1024px) –><link rel=”stylesheet” href=”tablet.css” media=”screen and (min-width: 481px) and (max-width: 1024px)”> |
ファイルを分けることで管理しやすくなる一方、読み込むファイル数が増えるとページの表示速度にわずかに影響が出る可能性も考慮する必要があります。
スマートフォンなどでメディアクエリを正しく機能させるには、HTMLの<head>内にviewport（表示領域）を設定する<meta>タグの記述が必要です。
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
width=device-widthは、ページの表示幅をデバイスの画面幅に合わせるもので、initial-scale=1は、初期のズーム倍率を等倍にする設定です。
CSSファイル内にメディアクエリを記述する一般的な方法は、ルールを使用するやり方です。上記の方法では、1つのCSSファイルの中に、さまざまな条件に応じたスタイル定義をまとめて記述できます。
基本的な書き方は以下の通りです。
| /* 画面幅が600px以下の場合に適用されるスタイル */@media screen and (max-width: 600px) { body { font-size: 14px; /* 文字サイズを小さくする */ }} |
@media 条件 { … } の波括弧 {} の中に、条件が真（true）のときに適用したい通常のCSSルール（セレクタとプロパティ）を記述します。関連するスタイルを1つのファイルに集約できるため、管理がしやすいのがメリットです。
@mediaルールを使う際の設計の考え方として、主にモバイルファーストとデスクトップファーストの2つのアプローチがあります。
モバイルファーストは、スマートフォン向けのスタイルを基本（デフォルト）とし、パソコンと画面が大きくなるにつれてスタイルを上書きしていく方法です。
| /* ベース (スマートフォン) */.container { width: 95%; }/* 768px以上 (タブレット) */@media (min-width: 768px) { .container { width: 90%; } } |
デスクトップファーストはパソコン向けのスタイルを基本とし、max-widthを使って画面が小さくなるにつれてスタイルを上書きしていく方法です。
| /* ベース (パソコン) */.container { width: 80%; }/* 1023px以下 (タブレット) */@media (max-width: 1023px) { .container { width: 90%; } } |
ここでは、メディアクエリの代表的な活用例を7つ紹介します。
上記の使い方を知っておけば、画面サイズや利用環境に応じた柔軟なサイト設計がしやすくなります。では、それぞれの内容を具体的に見ていきましょう。
メディアクエリの基本的な活用法は、閲覧デバイスの画面幅に応じてページのレイアウト構造を変更するときです。パソコンでは3カラム、スマートフォンでは1カラムのように、コンテンツの配置を最適化できます。
max-widthやmin-widthでブレイクポイント（レイアウトが変わる画面幅）を指定し、CSSのdisplay: grid;やdisplay: flex;、widthなどの値を変更して実現します。上記の設定をすれば、小さな画面でもコンテンツが縦に並び、見やすく操作しやすい表示を提供できます。
サイトがモバイルで見やすいか（モバイルフレンドリーか）はSEO評価にも関わる部分です。
モバイルフレンドリーなサイトに関して、詳しく知りたい方は以下の記事を参考にしてください。
関連記事：モバイルフレンドリーとは？SEOへの影響と対応コンテンツを作成する9つの方法 | StockSun株式会社
画面サイズに応じて、文字の大きさ（font-size）や行の高さ（line-height）を調整し、テキストの読みやすさを最適化できます。
メディアクエリで「画面幅〇〇px以下ならフォントサイズを14pxに」のように指定すれば、どのデバイスでも快適な文字サイズを提供できます。画面が小さくても読みやすくなるよう調整すれば、ユーザーにとって快適な閲覧環境につながるでしょう。
ページ内の画像の表示サイズを、閲覧しているデバイスの画面幅に合わせて調整できます。大きな画面では画像を大きく、小さな画面では適切なサイズに縮小表示させることが可能です。
CSSで画像の幅をwidth: 100%; height: auto;のように指定し、親要素の幅に合わせて自動調整されるようにするのが基本です。メディアクエリと組み合わせることで、レイアウトに応じた画像の表示制御や、高解像度ディスプレイ向けに解像度の高い画像へ切り替える対応も行えます。
サイト案内役のナビゲーションメニューも、画面サイズに応じて表示形式を変更できます。パソコンではヘッダーに横並び表示されるメニューも、スマートフォンではスペースが足りません。
メディアクエリを使い、スマートフォン表示時はメニューを隠し、タップすると開く「ハンバーガーメニュー」に切り替えるのが一般的です。
ハンバーガーメニューを使用すれば、限られた画面スペースを有効活用しつつ、必要な情報へのアクセスを確保できます。
特定の画面サイズのときだけ、ページ内の一部の要素を表示させたり、逆に隠したりができます。上記の方法は、CSSのdisplay: block;、display: none;プロパティを使って制御可能です。
例えば、パソコンでは表示している詳細情報や補足情報を、スマートフォンでは非表示にして主要なコンテンツを優先させたり、逆にスマートフォン限定で電話発信ボタンを表示させたりできます。デバイスの特性やユーザーの利用状況に合わせて、表示する情報を取捨選択し、最適化された情報提供を目指せます。
Webページを印刷する際に、画面表示とは異なる印刷に適した見た目の変更が可能です。上記の方法はメディアタイプprintを使い、@media print { … }内に印刷用のCSSを記述します。
印刷時には不要なヘッダー、フッターなどを非表示（display: none;）にします。また、背景色や画像を印刷しない設定にしたり、印刷に適したフォントサイズや余白を指定したりも可能です。このように設定すれば、紙でも読みやすくなり、インクや用紙の無駄も抑えられます。
OSの表示設定に合わせて、Webサイトの配色を自動で切り替えが可能です。メディア特性prefers-color-schemeを使います。
@media (prefers-color-scheme: dark) 内に、背景を暗く、文字色を明るくするなどのダークモード用スタイルを指定しましょう。ユーザーの設定に合わせて表示を切り替えることで、暗い場所でも目が疲れにくくなり、見やすさが向上します。
弊社StockSunは、多くのシステム開発で実績を持つ認定パートナーと提携し、貴社の魅力を引き出すチームを提供します。
オンライン相談は無料です。貴社の魅力を引き出す戦略を聞きに行きましょう！
＼システム開発のプロが戦略をご提案／
【無料】システム開発の相談をするメディアクエリを使えば、画面サイズや端末に合わせた柔軟なデザイン調整が可能になります。レイアウトや文字サイズ、印刷対応など、多くの場面で活用できるため、メディアクエリはレスポンシブ設計に欠かせません。
自分で対応するのが難しいと感じた場合は、専門家に相談するのも一つの方法です。
弊社StockSunは、多くのシステム開発で実績を持つ認定パートナーと提携し、貴社の魅力を引き出すチームを提供します。
オンライン相談は無料です。貴社の魅力を引き出す戦略を聞きに行きましょう！
＼システム開発のプロが戦略をご提案／
【無料】システム開発の相談をする
商品の魅力を引き出す商品撮影のコツ5選！必要な7つの機材や基本の流れもご紹介
2OSS（オープンソースソフトウェア）とは？定義やライセンスの種類・導入のメリットを解説
3Salesforce（セールスフォース）とは？主要な7つのサービスや導入するメリットを解説
4メディアクエリとは？レスポンシブデザインに対応した書き方や7つのできることを紹介
5FTPサーバーとは？通信の仕組みや利用のメリット、おすすめFTPソフト3選を紹介
6相対パスとは？絶対パスとの違いや書き方・使い分け方を2つのシーンで解説
7SIerのおすすめランキング TOP3! 外注先の選び方や委託時の注意点を解説
8システム開発の外注と内製の違いは？外注の3つのメリットや会社の選び方を解説
9robots.txtとは？設定する4つの目的や3STEPの設定手順・4つの注意点も解説
10DXの成功事例10選！業界別企業や成功のポイントも紹介【2025年最新版】
