HTMLとCSSでレスポンシブデザインを実現する――現場で学んだ本当に使える技術

2025年11月27日

5年ほど前の話なんだけど、私が受けた案件で「既存サイトをスマホ対応にしてほしい」という依頼があった。クライアントは地方の中小企業で、PC専用で作られたコーポレートサイトをなんとかスマホでも見やすくしたいと。

最初に見た時、正直「うわぁ…」って声が出た。floatで組まれた複雑なレイアウト、固定幅で書かれたCSS、そして何より画像の中にテキストが埋め込まれているデザイン。完全にPC時代の遺産だった。

で、納期は2週間。正直に言うと「これ、作り直した方が早いんじゃ…」と思ったけど、予算的にそれは無理。結局、既存のコードをなんとかレスポンシブ化することになった。

結果から言うと、その案件は地獄だった。メディアクエリを書いても効かない、レイアウトが崩れる、画像が横スクロールを引き起こす。デバッグに何時間も費やして、完成した頃には髪の毛が薄くなった気がした（気のせいだと思いたい）。

あの経験から学んだことがある。レスポンシブデザインって、「後からなんとかする」ものじゃなくて、最初から設計に組み込んでおくべきものなんだって。

この記事では、私がこれまで20年以上のWeb制作経験と、数百件の案件対応で身につけた「HTMLとCSSでレスポンシブデザインを実現する方法」を、できるだけ実践的に書いていく。初心者がハマりやすい落とし穴も含めて、リアルな話をしていこうと思う。

レスポンシブデザインって結局何なの？

「レスポンシブデザイン」って言葉、今じゃ当たり前すぎて逆に説明しにくいんだけど、簡単に言えば「どんな画面サイズでも見やすく表示されるWebサイトの作り方」のこと。

PC、タブレット、スマホ――画面サイズがバラバラなデバイスで同じHTMLを使いながら、CSSで見た目を切り替える技術だ。

2010年頃にEthan Marcotteって人が提唱した概念なんだけど、当時は「そんなの本当にできるの？」って懐疑的な人も多かった。でも今じゃ、レスポンシブじゃないサイトの方が珍しい時代になった。

なぜレスポンシブが必須になったのか

これ、実は2つの大きな理由がある。

1つ目はモバイルユーザーの急増。今やWebサイトへのアクセスの6割以上がスマホからって統計がある。PC専用サイトを作っても、見てくれる人が少ないんだよね。

2つ目はGoogleの方針変更。2021年3月から「モバイルファーストインデックス（MFI）」が全面的に導入された。これ、要するにGoogleがスマホ版のページを基準に検索順位を決めるようになったってこと。

つまり、スマホで見づらいサイトは検索順位が下がる。SEO的にも、レスポンシブ対応は必須になったわけだ。

HTMLの基本設定――ビューポートを理解する

レスポンシブデザインを実現する上で、絶対に外せない設定がある。それがビューポート（viewport）の設定だ。

これを忘れると、どれだけCSSを頑張って書いても、スマホで見た時にPC版がそのまま縮小表示されてしまう。初心者が最初にハマる罠トップ3に入ると思う。

ビューポートタグの書き方

HTMLの<head>タグ内に、必ずこれを書く：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

これだけ。でも、この1行がめちゃくちゃ重要。

width=device-widthは「表示領域の幅を、デバイスの画面幅に合わせる」という意味。initial-scale=1.0は「初期表示時のズーム倍率を100%にする」という指定だ。

実際の失敗例

昔、メンターをしてた受講生がこんなミスをしていた。ビューポートタグは書いたんだけど、initial-scaleを0.5にしてしまっていた。

結果、スマホで開くと最初から50%縮小表示されて、ユーザーが毎回ピンチアウトで拡大しないといけない状態に。「なんでレスポンシブにならないんですか？」って相談されて、コード見たら「あー…」ってなった。

細かい設定だけど、こういうのが積み重なってユーザー体験を壊すんだよね。

CSSの基本技術――メディアクエリを使いこなす

ビューポートの設定ができたら、次はCSSでデバイスごとの表示を切り替える。ここで使うのがメディアクエリだ。

メディアクエリは、画面幅に応じて適用するCSSを変更できる機能。これがレスポンシブデザインの核心部分と言っていい。

基本的な書き方

/* スマホ向けのスタイル（モバイルファースト） */
.container {
  width: 100%;
  padding: 16px;
}

/* タブレット以上（768px以上）のスタイル */
@media (min-width: 768px) {
  .container {
    width: 750px;
    margin: 0 auto;
    padding: 24px;
  }
}

/* PC向け（1024px以上）のスタイル */
@media (min-width: 1024px) {
  .container {
    width: 960px;
    padding: 32px;
  }
}

この書き方が「モバイルファースト」と呼ばれるアプローチ。最初にスマホ向けのスタイルを書いて、画面が大きくなるにつれて上書きしていく。

なぜモバイルファーストなのか

昔は「デスクトップファースト」で書く人が多かった。PC向けのスタイルを先に書いて、max-widthでスマホ向けに上書きする方法だ。

でも、これだとスマホで不要なスタイルまで読み込んでしまって、パフォーマンスが悪くなる。モバイルファーストなら、小さい画面では必要最小限のCSSしか読み込まないから効率的なんだ。

あと、Googleが推奨してるってのも大きい。SEO的にも有利になる。

ブレイクポイントの決め方

「何pxでメディアクエリを切り替えればいいの？」って、よく聞かれる質問。

正直に言うと、絶対的な正解はない。デザインやコンテンツによって変わる。

ただ、一般的によく使われるのはこの辺り：

スマホ：～767px
タブレット：768px～1023px
PC：1024px～

私が実際の案件でよく使うのは、768pxと1024pxの2箇所だけ。細かく分けすぎると管理が大変になるし、コードも複雑になる。

よくある失敗：max-widthとmin-widthの混在

これ、初心者がめちゃくちゃハマる。私も昔やらかした。

/* ダメな例 */
@media (max-width: 768px) {
  /* スマホ向け */
}

@media (min-width: 768px) {
  /* PC向け */
}

一見良さそうだけど、これだと768pxちょうどの時に両方のスタイルが適用される。結果、どっちのCSSが優先されるかは記述順次第で、予測不能な表示になる。

正しくはこう：

/* 正しい例 */
@media (max-width: 767px) {
  /* スマホ向け */
}

@media (min-width: 768px) {
  /* PC向け */
}

1pxの違いだけど、これで重複がなくなる。細かいけど、こういうのが後々バグの原因になるんだよね。

FlexboxとCSS Gridの使い分け――レイアウトの選択肢

レスポンシブデザインを実現する上で、FlexboxとCSS Gridの使い分けは避けて通れない話題だ。

正直、この2つの登場で、レイアウト構築の難易度は劇的に下がった。昔のfloatでの苦労を思い出すと、涙が出そうになる（冗談じゃなく）。

Flexboxが得意なこと

Flexboxは1次元のレイアウトに強い。横並び、または縦並びの要素を柔軟に配置できる。

例えば、ナビゲーションメニューとか：

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

/* スマホではメニューを縦並びに */
@media (max-width: 767px) {
  .nav {
    flex-direction: column;
  }
}

flex-direction: column;だけで、横並びが縦並びに変わる。これ、本当に便利。

CSS Gridが得意なこと

CSS Gridは2次元のレイアウトに強い。縦と横、両方向に要素を配置する時に威力を発揮する。

例えば、カードレイアウトとか：

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 24px;
}

このrepeat(auto-fit, minmax(min(300px, 100%), 1fr))ってのが、CSS Gridの真骨頂。画面幅に応じて自動的にカラム数が変わる。スマホなら1カラム、タブレットなら2カラム、PCなら3カラムみたいに。

メディアクエリを書かなくても、勝手にレスポンシブになる。これ、最初に知った時は感動した。

実務での使い分け

私が案件で使う時の判断基準は、こんな感じ：

Flexboxを使う場面：

ナビゲーションメニュー
ボタンの横並び
幅が不定な要素の配置
要素数が可変のリスト

CSS Gridを使う場面：

カードレイアウト
ページ全体の大枠レイアウト
複雑な配置パターン
グリッド状に並ぶコンテンツ

ただし、この2つは組み合わせて使うこともできる。例えば、ページ全体はGridで、各セクション内はFlexboxで、みたいな。

どっちかしか使っちゃいけないわけじゃない。適材適所で選べばいい。

よくある失敗とその対策――現場のリアルな話

ここからは、私が実際に見てきた（あるいは自分でやらかした）失敗例と、その対策を紹介する。

メンターとして何百人も見てきたけど、みんな似たようなところでハマるんだよね。

失敗1：画像が横スクロールを引き起こす

これ、本当によくある。

/* ダメな例 */
img {
  width: 800px;
}

固定幅で画像を指定すると、スマホで見た時に画面からはみ出て、横スクロールが発生する。

正しくはこう：

/* 正しい例 */
img {
  max-width: 100%;
  height: auto;
}

max-width: 100%で、親要素の幅を超えないようにする。height: autoで縦横比を維持。これだけで、画像は自動的にレスポンシブになる。

簡単だけど、意外と忘れがち。

失敗2：文字サイズが小さすぎる

特に画像内のテキスト。PCサイズで作った画像をそのまま縮小すると、スマホでは文字が潰れて読めなくなる。

これ、私が最初に紹介した地獄案件でも問題になった。クライアントが用意した画像、全部テキスト入りだったんだよね…。

対策は2つ：

テキストは画像じゃなくHTMLで書く（これが理想）
スマホでは別の画像を用意する（pictureタグを使う）

<picture>
  <source media="(max-width: 767px)" srcset="image-sp.jpg">
  <img src="image-pc.jpg" alt="説明文">
</picture>

面倒だけど、ユーザビリティを考えるとこれくらいはやるべき。

失敗3：box-sizingの罠

これは地味だけど、ハマると抜け出せない。

CSSのwidthプロパティは、デフォルトだとpaddingとborderを含まない。だから、width: 100%にpaddingを足すと、親要素からはみ出る。

/* 問題が起きる例 */
.box {
  width: 100%;
  padding: 20px;  /* これではみ出る */
}

解決策は、box-sizing: border-boxを全要素に適用すること：

* {
  box-sizing: border-box;
}

これで、paddingとborderがwidthに含まれるようになる。レスポンシブデザインを作る時は、最初にこれを書いておくのが鉄則。

失敗4：固定幅の罠

width: 1000px;みたいな固定幅を使うと、当然レスポンシブにならない。

でも、「じゃあ全部パーセントで書けばいいのか」って言うと、それも違う。パーセントだと、極端に画面が大きい時や小さい時に崩れることがある。

私がよく使うのは、max-widthとの組み合わせ：

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

これで、画面幅が1200px以下の時は100%、それ以上の時は1200pxで固定される。左右中央揃えにもなるし、paddingでスマホの時も余白が確保される。

シンプルだけど、実用的。

実践的なレイアウト例――コードで見る実装

理論ばかり話してもつまらないから、実際によく使うレイアウトパターンをコードで見ていこう。

パターン1：2カラムレイアウト

サイドバーとメインコンテンツの2カラム。よくあるブログとかのレイアウトだ。

.layout {
  display: grid;
  gap: 32px;
  padding: 20px;
}

/* タブレット以上で2カラムに */
@media (min-width: 768px) {
  .layout {
    grid-template-columns: 250px 1fr;
  }
}

/* PC向けで中央寄せ */
@media (min-width: 1024px) {
  .layout {
    max-width: 1200px;
    margin: 0 auto;
  }
}

スマホでは1カラム、タブレット以上で2カラム。シンプルだけど、実務でよく使う。

パターン2：カードグリッド

商品一覧とか、ブログ記事一覧でよく使うパターン。

.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 24px;
  padding: 20px;
}

.card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  padding: 20px;
}

auto-fitとminmaxの組み合わせで、画面幅に応じて自動的にカラム数が変わる。メディアクエリいらず。

パターン3：ヘッダーナビゲーション

レスポンシブヘッダーは、初心者が苦戦するポイントの1つ。

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
}

.nav {
  display: flex;
  gap: 24px;
}

/* スマホではハンバーガーメニュー */
@media (max-width: 767px) {
  .nav {
    display: none;  /* 初期状態では非表示 */
    flex-direction: column;
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    background: #fff;
    padding: 20px;
  }

  .nav.is-open {
    display: flex;  /* JavaScriptでクラスを付けて表示 */
  }
}

ハンバーガーメニューの開閉にはJavaScriptが必要になるけど、レイアウト自体はCSSで完結する。

パターン4：フッターレイアウト

フッターも意外とレスポンシブ化で悩む部分。特に、複数カラムの情報を整理するのが難しい。

.footer {
  background: #333;
  color: #fff;
  padding: 40px 20px;
}

.footer-content {
  display: grid;
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
}

/* スマホでは1カラム */
.footer-content {
  grid-template-columns: 1fr;
}

/* タブレット以上で2カラム */
@media (min-width: 768px) {
  .footer-content {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* PC向けで4カラム */
@media (min-width: 1024px) {
  .footer-content {
    grid-template-columns: repeat(4, 1fr);
  }
}

これで、スマホでは縦に並び、タブレットで2カラム、PCで4カラムになる。

フッターはページの最下部だから軽視されがちだけど、実はユーザーがよく見る場所。問い合わせ先とかプライバシーポリシーとか、重要な情報が集まってるからね。

実際、私が過去に受けた案件で「フッターだけレスポンシブ化してほしい」って依頼もあった。他の部分は問題ないのに、フッターだけスマホで崩れてたんだよね。それだけでサイト全体の印象が悪くなる。

細かいところまで気を配るのが、プロとアマチュアの差だと思う。

レスポンシブデザインで稼ぐために――副業視点

ここまで技術的な話をしてきたけど、最後に副業・案件獲得の視点からも書いておく。

レスポンシブ対応案件の相場

私が見てきた範囲だと、既存サイトのレスポンシブ化案件は：

簡単なLP（ランディングページ）：3万～8万円
コーポレートサイト（5～10ページ）：10万～30万円
ECサイトやメディアサイト：30万円～

新規で作る場合は、これの1.5～2倍くらいが相場かな。

ただし、「既存サイトのレスポンシブ化」は見積もりが難しい。元のコードがどれだけ汚いかで工数が全然変わるから。

案件を取る時の注意点

クラウドソーシングで「レスポンシブ化」案件を見る時、必ず確認すべきことがある：

元のサイトのコードは誰が書いたのか
どこまでの対応を求められているのか（デザインから？コーディングだけ？）
テスト環境はあるのか
納期は現実的か

特に1番目。自作サイトならまだマシだけど、「昔どこかの業者に作ってもらったけど、連絡取れなくなった」みたいなケースは要注意。

コードが読めないレベルで汚いことがある。そういう案件は、最初から高めに見積もるか、断った方が無難。

初心者が実績を作るには

これから副業でレスポンシブ案件を取りたい人は、まずポートフォリオサイトを自分で作ることから始めるべき。

それも、ただ作るだけじゃなくて：

実際にスマホ・タブレット・PCで表示確認
Chrome DevToolsのレスポンシブモードで各サイズチェック
Lighthouseでパフォーマンス測定
画像最適化もしっかりやる

このあたりまでやって、初めて「レスポンシブデザインができます」って言える。

そのポートフォリオを持って、クラウドソーシングで小さい案件から取っていく。最初は単価低くても、実績作りと思って割り切る。

5件くらい実績ができれば、徐々に単価の高い案件も取れるようになる。私が見てきた受講生も、だいたいこのパターンで副業収入を作ってる。

よくある質問（FAQ）

Q1：レスポンシブデザインは必ず必要？

A：2025年の今、ほぼ必須です。

理由は3つ：

スマホユーザーが全体の6割以上
GoogleのMFI（モバイルファーストインデックス）でSEOに影響
クライアントがレスポンシブ対応を前提にしている

「PC専用サイトを作りたい」って依頼、この5年で1件も見てない。それくらい当たり前になってる。

Q2：FlexboxとGridはどちらを学ぶべき？

A：両方学ぶべきですが、優先順位をつけるならFlexboxから。

Flexboxの方が使う場面が多いし、理解しやすい。Gridは必要になった時に学んでも間に合う。

ただ、両方使えるようになると、レイアウト構築の選択肢が広がって、仕事が早くなる。最終的には両方マスターした方がいい。

Q3：ブレイクポイントはいくつ設定すべき？

A：2～3箇所が実用的。多くても4箇所まで。

私の場合：

768px（スマホ／タブレットの境界）
1024px（タブレット／PCの境界）

この2箇所だけで、ほとんどの案件は対応できる。

細かく分けすぎると、メンテナンスが大変になる。シンプルに保つのが長期的には正解。

Q4：既存サイトをレスポンシブ化するのは大変？

A：元のコード次第ですが、新規で作る方が楽な場合も多い。

特にtableレイアウトや古いfloatで組まれたサイトは、レスポンシブ化が地獄。下手すると、ゼロから作り直した方が早い。

見積もり時には必ず元のコードを確認して、現実的な工数を出すべき。

Q5：独学でレスポンシブデザインは習得できる？

A：できます。でも、実機確認の環境は必須。

本やオンライン教材で基礎を学んで、実際に手を動かして作る。これが一番の近道。

ただし、PCのブラウザだけじゃなくて、実際のスマホやタブレットでも確認すること。エミュレータと実機では微妙に挙動が違うことがある。

私がメンターしてる受講生には、「最低でもiPhoneとAndroidの実機で確認しろ」って言ってる。

Q6：レスポンシブ対応の案件単価はどれくらい？

A：既存サイトで10万～30万円、新規制作で20万～50万円が相場。

ただし、これは5～10ページ程度の中小規模サイトの話。大規模サイトや複雑な機能がある場合は、もっと高くなる。

クラウドソーシングだと相場より安い案件も多いけど、実績作りと思えば最初は受けてもいいと思う。

ただし、「1ページ5,000円」みたいな案件は避けた方がいい。時給換算すると悲惨なことになる。

Q7：レスポンシブデザインの学習にどれくらい時間がかかる？

A：基礎を理解するなら1～2週間、実務レベルなら2～3ヶ月。

HTMLとCSSの基礎がある前提で：

ビューポートとメディアクエリの理解：1～2日
FlexboxとGridの基本：1週間
実際にサイトを作って練習：2～3週間

ただし、「実務で使える」レベルになるには、複数のサイトを作る経験が必要。失敗しながら学ぶのが一番早い。

私の受講生を見てると、だいたい3ヶ月あれば小規模なレスポンシブサイトは作れるようになる。焦らず、コツコツ積み上げていくのが大事。

まとめ――レスポンシブデザインは「最初から」が鉄則

ここまで、HTMLとCSSでレスポンシブデザインを実現する方法を書いてきた。

最後にもう一度強調したいのは、レスポンシブデザインは後付けじゃなくて、最初から設計に組み込むべきってこと。

私が最初に話した地獄案件のように、後からレスポンシブ化しようとすると、工数も増えるし、品質も下がる。クライアントも自分も不幸になる。

だから、新しくサイトを作る時は：

ビューポートタグを忘れずに書く
モバイルファーストでCSSを書く
FlexboxとGridを適材適所で使う
画像は最初からレスポンシブを前提にする
実機で必ず確認する

この5つを守れば、基本的には大丈夫。

レスポンシブデザインって、一見難しそうに見えるかもしれない。でも、基本を押さえれば、そんなに複雑じゃない。むしろ、慣れてくると「レスポンシブじゃないサイトの方が作りにくい」って感じるようになる。

これから副業でWeb制作をやろうと思ってる人も、既にやってる人も、レスポンシブデザインは避けて通れないスキル。早めに習得しておいて損はない。

あと、実際に手を動かすのが一番の勉強法。記事を読んだだけで満足せず、今日からでも自分のサイトを作ってみてほしい。失敗しても大丈夫。私だって最初は散々失敗した。

そういう失敗の積み重ねが、結局は一番の学びになる。

それじゃ、また。

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

この記事を書いたエンジニア

宮城隆 SREエンジニア

SREエンジニアとしてインフラ安定運用に精通。トラブル時の冷静な判断と改善提案が高評価。クラウドとコンテナ技術を得意とし、効率的な構成を組むことが好き。穏やかな性格で、趣味は植物を育てること。自宅のベランダには小さな菜園も。

この著者の記事一覧へ