レスポンシブコーディング
スマホ・タブレットに表示を最適化する
1つの HTML を、PC・タブレット・スマートフォンなど画面の幅に合わせて見やすく表示させるコーディングの方法です。今のサイト制作では必須の技術といわれています。
サンプルコード
実行結果
解説
レスポンシブコーディングとは、スマートフォンやタブレットに対して表示を最適化すること です。
サイト訪問者の約7割がスマホ といわれており（総務省「情報通信白書」などを参照）、コーディングを行ううえで必須といわれている技術です。
また、Google は検索アルゴリズムにおいて、スマホ向けのページを評価対象にすることを公表しています（モバイルファーストインデックス）。スマホで見づらいページは、検索結果の順位にも影響します。
上の例では、スマホ向けのスタイル（縦並び）を基本に書き、画面幅が600px以上になったら @media で横並びに切り替えています。この「切り替える幅」がブレイクポイントです。
応用例・注意点
覚えてほしい3つのキーワード
| キーワード | 説明 |
|---|---|
ビューポート（viewport） | ブラウザウィンドウの表示領域のこと。meta タグで端末の画面幅に合わせる |
ブレイクポイント | CSS を切り替えるタイミング（画面幅）のこと |
メディアクエリ | @media で「画面幅が○px以上のとき」などの条件を書き、CSS を切り替える仕組み |
viewport の meta タグを書く
レスポンシブコーディングでは、すべてのページの head に必ず書きます。この行がないと、スマホでメディアクエリが正しく動きません。
注意点
- 01案件の仕様によっては、レスポンシブにせず PC用ページとスマホ用ページを分けて制作するケースもあります。
- 02対応するデバイスが増えるほど、レイアウトが複雑になるほど、対応に時間がかかります。デザインを受け取ったら、スマホでどう並ぶかを最初に確認しましょう。
- 03実機がなくても、ブラウザの開発者ツール（デベロッパーツール）のデバイスモードで、スマホの画面幅を確認できます。
レスポンシブコーディングの特徴と3つのキーワード
メリットとデメリット
| 内容 | |
|---|---|
| メリット | HTML ファイルひとつ で PC・タブレット・スマホに対応できる |
| メリット | URL が変わらない ため、シェアしやすい |
| デメリット | 対応するデバイス（タブレットやスマホ）が増えるほど、複雑なレイアウトになるほど、対応に時間がかかる可能性がある |
案件の仕様によっては、PC用ページ、スマホ用ページを分けて制作する ケースもあります。
① ビューポート（viewport）
ビューポートとは、ブラウザウィンドウの表示領域 のことです。PC ならブラウザの窓の中、スマホなら画面全体がビューポートになります。HTML の head に <meta name="viewport" content="width=device-width, initial-scale=1.0"> を書いて、表示領域の幅を端末の画面幅に合わせます（詳しくは meta のページ）。
② ブレイクポイント
ブレイクポイントとは、CSS を切り替えるタイミング（画面幅） のことです。PC とスマホの表示を切り替える場合、画面幅が何 px になったときに切り替えるかを定義する必要があります。
ブレイクポイントを決めるときは、実際によく使われている画面の大きさを参考にします。下の表は日本の画面解像度のシェア（2025年7月時点・StatCounter 調べ）です。
| PC | タブレット | スマホ |
|---|---|---|
| 1920×1080（25.71%） | 768×1024（19.4%） | 390×844（17.03%） |
| 1536×864（8.38%） | 820×1180（13.75%） | 393×852（12.73%） |
| 2560×1440（6.49%） | 810×1080（12.39%） | 375×667（6.37%） |
| 1366×768（5.34%） | 834×1194（8.11%） | 375×812（5.83%） |
| 1280×720（3.61%） | 744×1133（6.84%） | 430×932（5.35%） |
| 1440×900（2.33%） | 1024×1366（5.86%） | 412×915（5.29%） |
| 端末 | よく使われている幅の目安 |
|---|---|
| PC | 幅 1280px〜1920px が多くのシェアを占めている |
| タブレット | 768px〜1024px |
| スマホ | 375px〜414px |
ただし PC では、ブラウザのサイズを縮めて Webサイトを見ている人もいます。必ずしも 「画面幅＝ブラウザの幅」とは限らない ことを覚えておきましょう。
ブレイクポイントの決め方
- 制作会社や制作者によって定義は様々です。案件で決まっている場合はそれに従います。
- 画面サイズが大きいデバイスもどんどん発売されるため、一定期間でブレイクポイントの見直しをしたほうがよい です。
- 端末の種類にこだわりすぎず、レイアウトが崩れ始める幅を基準に決めるのも一つの方法です。
③ メディアクエリ
@media (min-width: 600px) { … } のように、画面幅などの条件を書いて、条件に合うときだけ CSS を適用する仕組みです。ブレイクポイントの幅は、このメディアクエリの条件に書きます（詳しくは @media のページ）。