MEMORVA

レスポンシブデザインの仕組み、メディアクエリ（CSS @media）の書き方

更新：2026-03-20

同一のウェブページにおいてPC（パソコン）とスマホの両方の表示に対応しているものはレスポンシブデザインなどと呼ばれている。 細かく言うと、様々な画面サイズに応じてデザインやレイアウトが変化するデザイン。

レスポンシブデザインは、基本的にCSSのメディアクエリ（@media）を記述することで実現している。

レスポンシブデザインが流行る前は、スマホ用のページを別に用意したり、JavaScriptやPHPなどでOSを判別して表示する内容を変えるといった方法が使われていた。

参考： メディアクエリーの使用 - CSS @media（MDN）

レスポンシブデザインの仕組み

レスポンシブデザインの仕組みは単純で、@media（メディアクエリ）を使ってCSSを記述するだけ。 動的なように見えるがJavaScriptは必要なくCSSだけでできる。

以下の例は、通常はbody要素の背景色が白色（#fff）で、ブラウザのウィンドウ幅が800px以下になると青色（#00f）に変化する。 

<style>
body {background:#fff;}

@media all and (max-width:800px){
   body {background:#00f;}
}
</style>

要するにブラウザのウィンドウの横幅に応じて適用するCSSを変えるのがレスポンシブデザインということになる。

パソコンの場合、閲覧しているサイトがレスポンシブデザインかどうかを見分けるのは簡単で、ブラウザのウィンドウ（横）幅を小さくするだけで良い。 もちろんブラウザのデベロッパーツールを使って確かめても良い。

スマホのブラウザは基本的に全画面表示なので「画面の横幅＝ブラウザのウィンドウ横幅」ということになる。

Bootstrapなど便利なフレームワークがあるが、レスポンシブデザインの仕組みを簡単にするとこういうことをやっている。

メディアクエリはサイトを作る人にとってメリットがある。 それはいちいちスマホを使ってサイトのデザインを確認する必要がないこと。 パソコンでサイトを作り、ブラウザのウィンドウ幅を縮めればスマホでどのように表示されるか概ね把握できる。 最終的にはスマホで動作確認するが、サイト制作がかなり楽になる。

メディアクエリ

上述の @media all and (max-width:800px) の部分はメディアクエリと呼ばれる。 上例の場合、すべてのメディア（デバイス）が対象で、且つ横幅の最大値が800pxのとき、ここに書いたCSSが適用される。

allの他にprint、screen、speech、handheldなどがあり、メディアタイプと呼ばれる。 よく使われているのはscreenで、パソコンやスマホなどのコンピュータ画面を指し、通常のサイトであればscreenで問題ない。 allはすべてのデバイスが対象になる。

(max-width:800px) は横幅の最大値が800pxで、800px以下はすべて適用される。 スマホの画面解像度が横720pxや1080pxなどでも、viewportで「width=device-width」を指定してサイトを表示した場合、横（短辺）の画面サイズは360pxなどになる。 2025年現在は400px以上のスマホも増えてきた。 viewportの設定によるが、max-widthの値はサイトに合わせて決めると良い。 max-widthの他 min-widthなど条件はいろいろ記述できる。

メディアクエリの記述例

基本

以下の例は、div要素の文字の色が通常赤色（red）で、ウィンドウ幅が800px以下になると文字の色は赤色のまま変わらず、div要素内の文字がセンタリングする。 

<style>
div {color:red;}

@media all and (max-width:800px){
   div {text-align:center;}
}
</style>

<div>テスト</div>

ウィンドウを縮めた後、再び広げると文字は左に戻る。 text-align:left など指定しなくても初期値に戻る。 CSS は分かりやすいようにstyle要素に記述しているが、当然外部のCSSファイルに記述しても良い。

複数指定

@mediaは複数指定でき、パソコン、タブレット、スマホなどデバイスに合わせて段階的にデザインを変えることもできる。 以下の例では通常文字が左寄せで赤色、800px以下になるとセンタリング、400px以下になると文字がボールド（太字）になる。 

<style>
div {color:red;}

@media all and (max-width:800px){
   div {text-align:center;}
}

@media all and (max-width:400px){
   div {font-weight:bold;}
}
</style>

<div>テスト</div>

最大値と最小値を同時に書くこともできる。 

<style>
@media all and (min-width:360px) and (max-width:900px){
   p {font-size:20px;}
}
</style>

上記は以下のような書き方もできる。 

<style>
@media all and (900px >= width >= 360px){
   p {font-size:20px;}
}
</style>

モバイルファースト

メディアクエリを記述する場合、先にPC用のCSSを書いて@mediaでスマホ用を書くパターンと、その逆がある。

ウェブ界隈はモバイルファーストになっているが、CSSはどちらを先に書いてもおそらくSEO（検索エンジン最適化）においては影響はないと思われる。 気になる人はモバイルファーストで書いた方が良いかもしれない。 

<style>
body {background:#00f;}

@media all and (min-width:900px){
   body {background:#fff;}
}
</style>

ナビゲーションメニュー

ナビゲーションメニューの変形

通常横に並んでいるナビゲーションメニューを変形させ、スマホでは縦に並ぶレスポンシブデザインを見かける。 以下の例は、パソコンでは li 要素が inline-block により横に並び、ウィンドウ幅が 800px 以下になると block により縦に並ぶ。 

<style>
ul.ex_navi {
   margin:0;
   padding:0;
}

ul.ex_navi li {
   background:#ddd;
   font-size:1.1em;
   display:inline-block;
   margin:2px;
   padding:10px;
   text-align:center;
}

@media all and (max-width:800px){
   ul.ex_navi li {
      display:block;
   }
}
</style>

<ul class="ex_navi">
<li>サービス</li><li>会社概要</li><li>お問い合わせ</li>
</ul>

ナビゲーションメニューの収納

レスポンシブデザインで最もよく見かけるのは、ブラウザのウィンドウ幅が小さくなるとメニューが消えて三本線［☰］になるタイプ。 ［☰］をクリック（タップ）するとメニューが表示される。 以下の例は、パソコンでは li 要素のメニューが表示され、ウィンドウ幅が 800px 以下になるとそれが消えて三本線［☰］が現れる。 

<style>
#ex_navi_pc ul {
   margin:0;
   padding:0;
}

#ex_navi_pc ul li {
   background:#ddd;
   font-size:1.1em;
   display:inline-block;
   margin:2px;
   padding:10px;
   text-align:center;
}

#ex_navi_sp {
   display:none;
}

#ex_navi_sp span {
   display:none;
   font-size:2em;
   background:#ddd;
   margin:2px;
   padding:0 10px 0 10px;
}

#ex_navi_sp ul {
   margin:0;
   padding:0;
   display:none;
}

#ex_navi_sp ul li {
   background:#ddd;
   font-size:1.1em;
   margin:2px;
   padding:10px;
   display:block;
}

@media all and (max-width:800px){
   #ex_navi_pc {
      display:none;
   }

   #ex_navi_sp {
      display:block;
   }

   #ex_navi_sp span {
      display:inline-block;
   }
}
</style>

<div id="ex_navi_pc">
<ul>
<li>サービス</li><li>会社概要</li><li>お問い合わせ</li>
</ul>
</div>

<div id="ex_navi_sp">
<span>☰</span>
<ul>
<li>サービス</li><li>会社概要</li><li>お問い合わせ</li>
</ul>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
   $('#ex_navi_sp').click(function(){
      $('#ex_navi_sp ul').slideToggle('normal');
   });
});
</script>

予め［☰］を display:none で非表示にしておき、ウィンドウ幅が 800px 以下になると display:block で［☰］が現れるようになっている。 やり方はいろいろあるが、要するに display による表示、非表示を活用すると、こういうナビゲーションメニューが作れる。 三本線［☰］はここではテキストで書いたが、人によっては CSS で作ったり、画像を用意したり様々。

Hatena Button
はてな X Button
X Bluesky Button
Bluesky