レスポンシブデザイン総合演習

この章で得られるスキル：

• ✅ HTML/CSS/Bootstrapを組み合わせて使える
• ✅ レスポンシブなWebページを作成できる
• ✅ 適切なBootstrapコンポーネントを選択できる
• ✅ モバイルファーストの設計ができる
• ✅ グリッドシステムとメディアクエリを組み合わせて使える
• ✅ 実践的なレイアウトパターンを実装できる

---

Step 0: まず体験してみよう

説明の前に、まず レスポンシブデザインがないと何が困るのか を体験しよう。

シナリオ：企業サイトを作る

以下のような企業サイトを作りたいとする。

レスポンシブ対応なし（固定幅）

<style> .header { width: 1200px; background: #007bff; color: white; padding: 20px; } .content { width: 1200px; padding: 20px; } </style> <div class="header"> <h1>企業名</h1> <nav>ホーム | 事業内容 | お問い合わせ</nav> </div> <div class="content"> <p>私たちは最高のサービスを提供します。</p> <p>※ブラウザの幅を狭くしてみよう。横スクロールが発生して見にくい。</p> </div>

問題点：

• スマートフォン（幅375px）で見ると、画面からはみ出る
• 横スクロールが発生して、非常に見にくい
• テキストが小さすぎて読めない

レスポンシブ対応あり

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container"> <a class="navbar-brand" href="#">企業名</a> <ul class="navbar-nav"> <li class="nav-item"><a class="nav-link" href="#">ホーム</a></li> <li class="nav-item"><a class="nav-link" href="#">事業内容</a></li> <li class="nav-item"><a class="nav-link" href="#">お問い合わせ</a></li> </ul> </div> </nav> <div class="container mt-4"> <p>私たちは最高のサービスを提供します。</p> <p><small>※ブラウザの幅を変えてみよう。レイアウトが自動調整される。</small></p> </div>

• スマートフォンでも見やすい
• PCでもタブレットでも最適な表示
• ユーザビリティが大幅に向上

やってみよう： 上のCodePenで、ブラウザの幅を狭めたり広げたりしてみよう。レスポンシブ対応なしとありで、どのように表示が変わるかを確認しよう。

なぜレスポンシブ対応が必要なのか？

固定幅（例：1200px）は、PCでは問題ないが、スマートフォン（幅375px）では画面からはみ出る。現代のWebサイトの閲覧の半数以上がスマートフォンであり、 レスポンシブデザインは必須 である。

現代のWebサイトでは、 レスポンシブデザインは必須 である。

---

Step 1: レスポンシブデザインとは何か

レスポンシブデザイン とは、 画面サイズに応じてレイアウトが自動的に変わる デザイン手法である。

レスポンシブデザインの重要性

• スマートフォンの普及：Webサイトの閲覧の半数以上がスマートフォン
• 様々なデバイス：タブレット、PC、スマートウォッチなど、多様な画面サイズに対応する必要がある
• ユーザー体験の向上：デバイスに最適化された表示で、ストレスなく閲覧できる
• SEO効果：Googleは、モバイルフレンドリーなサイトを検索結果で優遇する

レスポンシブデザインの3つの柱

1. フルードグリッド：固定幅ではなく、相対的な幅（%）を使う
2. フレキシブルな画像：画像が親要素に収まるように調整する
3. メディアクエリ：画面サイズに応じてCSSを変える

---

Step 2: モバイルファーストの設計

モバイルファースト とは、 スマートフォン向けのデザインを最初に作り、その後で大きい画面向けに拡張 する考え方である。

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

モバイルファーストのメリット

1. コンテンツの優先順位が明確：小さい画面では、本当に必要な情報だけを表示する必要がある
2. シンプルなデザイン：装飾より、情報の伝達を重視する
3. パフォーマンス：軽量な設計になる（スマートフォンの通信速度を考慮）

モバイルファーストの実装

<style> /* スマートフォン（デフォルト） */ .container { padding: 10px; background: #e9ecef; } .nav { display: flex; flex-direction: column; background: #007bff; color: white; padding: 10px; } .nav a { color: white; padding: 5px 0; } /* タブレット以上 */ @media (min-width: 768px) { .container { padding: 20px; background: #d1e7fd; } .nav { flex-direction: row; gap: 20px; } } /* PC以上 */ @media (min-width: 1024px) { .container { max-width: 1200px; margin: 0 auto; background: #b6d4fe; } } </style> <nav class="nav"> <a href="#">ホーム</a> <a href="#">サービス</a> <a href="#">お問い合わせ</a> </nav> <div class="container"> <h2>コンテンツ</h2> <p>※ブラウザの幅を変えてみよう。</p> <ul> <li>スマートフォン（デフォルト）：縦並び、padding 10px、背景グレー</li> <li>タブレット（768px以上）：横並び、padding 20px、背景薄い青</li> <li>PC（1024px以上）：最大幅1200px、中央寄せ、背景青</li> </ul> </div>

ポイント：

• まず スマートフォン向けのスタイルを書く（デフォルト）
• @media (min-width: ...)で、大きい画面向けのスタイルを追加する
• 小さい画面から大きい画面へと段階的に拡張していく

やってみよう： ブラウザの幅を変えて、スマートフォン、タブレット、PCのそれぞれで表示がどう変わるかを確認しよう。背景色とナビゲーションの並び方に注目。

なぜモバイルファーストで書くのか？

デスクトップファースト（大きい画面から小さい画面へ）だと、不要な装飾や機能を削除する作業になり、コードが複雑化する。モバイルファーストでは、必要な機能を追加していくため、シンプルで保守しやすいコードになる。

---

Step 3: 実践的なレイアウトパターン（ヘッダー）

レスポンシブなヘッダー

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> <nav class="navbar navbar-expand-lg navbar-dark bg-primary"> <div class="container"> <a class="navbar-brand" href="#">マイサイト</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav ms-auto"> <li class="nav-item"> <a class="nav-link active" href="#">ホーム</a> </li> <li class="nav-item"> <a class="nav-link" href="#">サービス</a> </li> <li class="nav-item"> <a class="nav-link" href="#">会社概要</a> </li> <li class="nav-item"> <a class="nav-link" href="#">お問い合わせ</a> </li> </ul> </div> </div> </nav> <div class="container mt-4"> <p>※ブラウザの幅を狭めると、ナビゲーションがハンバーガーメニュー（三本線）になる</p> <p>※ハンバーガーメニューをクリックすると、メニューが開く</p> </div>

ポイント：

• navbar-expand-lg：992px以上で横並び、それ未満で折りたたみ
• ms-auto：ナビゲーションを右寄せ
• navbar-toggler：スマートフォン用のハンバーガーメニュー
• data-bs-toggle="collapse"とdata-bs-targetでメニューの開閉を制御

やってみよう： ブラウザの幅を狭めて、ハンバーガーメニュー（三本線アイコン）をクリックしてみよう。メニューが開閉する動作を確認しよう。

なぜハンバーガーメニューが必要なのか？

スマートフォンの画面は狭いため、全てのリンクを横並びにすると収まらない。ハンバーガーメニューで折りたたむことで、画面を有効活用できる。

---

Step 4: 実践的なレイアウトパターン（ヒーローセクション）

ヒーローセクションとは

ヒーローセクション は、Webサイトの最上部に配置する、大きな画像やメッセージのエリアである。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <div class="hero bg-primary text-white text-center py-5"> <div class="container"> <h1 class="display-4">ようこそ、マイサイトへ</h1> <p class="lead">私たちは、最高のサービスを提供します。</p> <a href="#" class="btn btn-light btn-lg">詳しく見る</a> </div> </div> <div class="container mt-4"> <p><small>※ヒーローセクションは、Webサイトの第一印象を決める重要なエリア</small></p> </div>

ポイント：

• py-5：上下に余白を追加
• display-4：大きな見出し
• lead：リード文（通常より大きいテキスト）
• btn-lg：大きいボタン

やってみよう： display-4をdisplay-1やdisplay-6に変えて、見出しのサイズを調整してみよう。また、btn-lgをbtn-smに変えて、ボタンのサイズを小さくしてみよう。

なぜヒーローセクションが重要なのか？

Webサイトを訪れたユーザーが最初に目にするエリアであり、サイトの内容や価値を一目で伝える必要がある。インパクトのあるメッセージと明確な行動喚起（ボタン）が重要である。

---

Step 5: 実践的なレイアウトパターン（カードグリッド）

レスポンシブなカードレイアウト

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <div class="container my-5"> <h2 class="text-center mb-4">サービス一覧</h2> <div class="row g-4"> <div class="col-md-6 col-lg-4"> <div class="card h-100"> <div class="card-body"> <h5 class="card-title">Webデザイン</h5> <p class="card-text">美しく、使いやすいWebサイトを制作します。</p> <a href="#" class="btn btn-primary">詳しく見る</a> </div> </div> </div> <div class="col-md-6 col-lg-4"> <div class="card h-100"> <div class="card-body"> <h5 class="card-title">システム開発</h5> <p class="card-text">業務を効率化するシステムを開発します。</p> <a href="#" class="btn btn-primary">詳しく見る</a> </div> </div> </div> <div class="col-md-6 col-lg-4"> <div class="card h-100"> <div class="card-body"> <h5 class="card-title">コンサルティング</h5> <p class="card-text">IT戦略の立案から実行までサポートします。</p> <a href="#" class="btn btn-primary">詳しく見る</a> </div> </div> </div> </div> <p class="mt-4"><small>※ブラウザの幅を変えてみよう。スマホ:1列、タブレット:2列、PC:3列に自動変換される</small></p> </div>

ポイント：

• col-md-6：タブレット（768px以上）で2列
• col-lg-4：PC（992px以上）で3列
• g-4：カード間の間隔
• h-100：カードの高さを揃える

やってみよう： ブラウザの幅を変えて、スマートフォン（1列）、タブレット（2列）、PC（3列）のレイアウトを確認しよう。カードの高さが揃っていることにも注目しよう。

なぜカードの高さを揃えるのか？

h-100がないと、各カードのテキスト量によって高さがバラバラになり、見た目が悪くなる。h-100（height: 100%）で親要素いっぱいに広げることで、揃った見た目になる。

---

Step 6: 実践的なレイアウトパターン（お問い合わせフォーム）

レスポンシブなフォーム

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <div class="container my-5"> <div class="row justify-content-center"> <div class="col-md-8 col-lg-6"> <h2 class="text-center mb-4">お問い合わせ</h2> <form> <div class="mb-3"> <label for="name" class="form-label">お名前</label> <input type="text" class="form-control" id="name" required> </div> <div class="mb-3"> <label for="email" class="form-label">メールアドレス</label> <input type="email" class="form-control" id="email" required> </div> <div class="mb-3"> <label for="subject" class="form-label">件名</label> <select class="form-select" id="subject"> <option value="">選択してください</option> <option value="inquiry">お問い合わせ</option> <option value="request">資料請求</option> <option value="other">その他</option> </select> </div> <div class="mb-3"> <label for="message" class="form-label">メッセージ</label> <textarea class="form-control" id="message" rows="5" required></textarea> </div> <div class="d-grid"> <button type="submit" class="btn btn-primary btn-lg">送信</button> </div> </form> </div> </div> </div>

ポイント：

• col-md-8 col-lg-6：タブレット以上で幅を制限（読みやすくする）
• justify-content-center：フォームを中央配置
• d-grid：ボタンを100%幅にする

やってみよう： ブラウザの幅を変えて、スマートフォン（全幅）とPC（幅制限）でのフォーム表示を確認しよう。PCでは幅が制限されて読みやすくなっていることに注目しよう。

なぜPCでフォームの幅を制限するのか？

フォームが画面いっぱいに広がると、入力欄が横に長くなりすぎて読みにくい。適度な幅（例：600px）に制限することで、視線の移動が少なくなり、入力しやすくなる。

---

Step 7: 実践的なレイアウトパターン（フッター）

レスポンシブなフッター

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <footer class="bg-dark text-white py-4"> <div class="container"> <div class="row"> <div class="col-md-4 mb-3 mb-md-0"> <h5>マイサイト</h5> <p>最高のサービスを提供する企業です。</p> </div> <div class="col-md-4 mb-3 mb-md-0"> <h5>リンク</h5> <ul class="list-unstyled"> <li><a href="#" class="text-white">会社概要</a></li> <li><a href="#" class="text-white">サービス</a></li> <li><a href="#" class="text-white">お問い合わせ</a></li> </ul> </div> <div class="col-md-4"> <h5>フォローする</h5> <a href="#" class="text-white me-3">Twitter</a> <a href="#" class="text-white me-3">Facebook</a> <a href="#" class="text-white">Instagram</a> </div> </div> <hr class="my-4"> <p class="text-center mb-0">&copy; 2024 マイサイト. All rights reserved.</p> </div> </footer>

ポイント：

• col-md-4：タブレット以上で3列
• mb-3 mb-md-0：スマートフォンでは下余白、タブレット以上では余白なし
• list-unstyled：リストのマーカーを消す

やってみよう： ブラウザの幅を変えて、スマートフォン（縦並び）とPC（3列）でのフッター表示を確認しよう。スマートフォンでは各セクションに下余白があり、PCでは余白がないことに注目しよう。

なぜスマートフォンでは下余白が必要なのか？

スマートフォンでは縦並びになるため、各セクション間に余白がないと詰まって見える。mb-3で下余白を追加し、mb-md-0でタブレット以上では余白を削除することで、最適な表示を実現している。

---

Step 8: 完成例：レスポンシブな企業サイト

完全な構成

これまで学んだ全てのパターンを組み合わせて、完全なレスポンシブサイトを構築する。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> <!-- ナビゲーション --> <nav class="navbar navbar-expand-lg navbar-dark bg-primary"> <div class="container"> <a class="navbar-brand" href="#">マイサイト</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav ms-auto"> <li class="nav-item"><a class="nav-link active" href="#">ホーム</a></li> <li class="nav-item"><a class="nav-link" href="#services">サービス</a></li> <li class="nav-item"><a class="nav-link" href="#contact">お問い合わせ</a></li> </ul> </div> </div> </nav> <!-- ヒーローセクション --> <div class="hero bg-primary text-white text-center py-5"> <div class="container"> <h1 class="display-4">ようこそ、マイサイトへ</h1> <p class="lead">私たちは、最高のサービスを提供します。</p> <a href="#services" class="btn btn-light btn-lg">詳しく見る</a> </div> </div> <!-- サービス一覧 --> <div class="container my-5" id="services"> <h2 class="text-center mb-4">サービス一覧</h2> <div class="row g-4"> <div class="col-md-6 col-lg-4"> <div class="card h-100"> <div class="card-body"> <h5 class="card-title">Webデザイン</h5> <p class="card-text">美しく、使いやすいWebサイトを制作します。</p> <a href="#" class="btn btn-primary">詳しく見る</a> </div> </div> </div> <div class="col-md-6 col-lg-4"> <div class="card h-100"> <div class="card-body"> <h5 class="card-title">システム開発</h5> <p class="card-text">業務を効率化するシステムを開発します。</p> <a href="#" class="btn btn-primary">詳しく見る</a> </div> </div> </div> <div class="col-md-6 col-lg-4"> <div class="card h-100"> <div class="card-body"> <h5 class="card-title">コンサルティング</h5> <p class="card-text">IT戦略の立案から実行までサポートします。</p> <a href="#" class="btn btn-primary">詳しく見る</a> </div> </div> </div> </div> </div> <!-- お問い合わせフォーム --> <div class="bg-light py-5" id="contact"> <div class="container"> <div class="row justify-content-center"> <div class="col-md-8 col-lg-6"> <h2 class="text-center mb-4">お問い合わせ</h2> <form> <div class="mb-3"> <label for="name" class="form-label">お名前</label> <input type="text" class="form-control" id="name" required> </div> <div class="mb-3"> <label for="email" class="form-label">メールアドレス</label> <input type="email" class="form-control" id="email" required> </div> <div class="mb-3"> <label for="message" class="form-label">メッセージ</label> <textarea class="form-control" id="message" rows="5" required></textarea> </div> <div class="d-grid"> <button type="submit" class="btn btn-primary btn-lg">送信</button> </div> </form> </div> </div> </div> </div> <!-- フッター --> <footer class="bg-dark text-white py-4"> <div class="container"> <div class="row"> <div class="col-md-4 mb-3 mb-md-0"> <h5>マイサイト</h5> <p>最高のサービスを提供する企業です。</p> </div> <div class="col-md-4 mb-3 mb-md-0"> <h5>リンク</h5> <ul class="list-unstyled"> <li><a href="#" class="text-white">会社概要</a></li> <li><a href="#" class="text-white">サービス</a></li> </ul> </div> <div class="col-md-4"> <h5>フォローする</h5> <a href="#" class="text-white me-3">Twitter</a> <a href="#" class="text-white">Facebook</a> </div> </div> <hr class="my-4"> <p class="text-center mb-0">&copy; 2024 マイサイト. All rights reserved.</p> </div> </footer>

やってみよう： ブラウザの幅を変えて、スマートフォン、タブレット、PCのそれぞれでサイト全体がどのように表示されるかを確認しよう。特に以下のポイントに注目：

• ナビゲーションのハンバーガーメニュー化
• カードグリッドの列数変化（1列 → 2列 → 3列）
• フォームの幅制限
• フッターのレイアウト変化（縦並び → 3列）

完成例から学ぶこと

この完成例は、企業サイトの典型的な構成である。ナビゲーション、ヒーロー、サービス紹介、お問い合わせ、フッターという流れは、多くのWebサイトで共通している。このパターンを習得すれば、様々なサイトを構築できる。

---

演習

この章で学んだ内容を確認するため、以下の演習問題に取り組んでください。

演習問題は、docs/src/questions/frontend/responsive_design/フォルダにあります：

1. w1.mdx: HTML/CSS/Bootstrapを組み合わせて使える
2. w2.mdx: レスポンシブなWebページを作成できる
3. k1.mdx: 適切なBootstrapコンポーネントを選択できる
4. w3.mdx: モバイルファーストの設計ができる
5. w4.mdx: グリッドシステムとメディアクエリを組み合わせて使える
6. w5.mdx: 実践的なレイアウトパターンを実装できる

---

まとめ

この章では、 レスポンシブデザイン総合演習 について学んだ。

🎯 達成できたこと

• ✅ HTML、CSS、Bootstrapを組み合わせて使えるようになった
• ✅ レスポンシブなWebページを作成できるようになった
• ✅ 適切なBootstrapコンポーネントを選択できるようになった
• ✅ モバイルファーストの設計ができるようになった
• ✅ グリッドシステムとメディアクエリを組み合わせて使えるようになった
• ✅ 実践的なレイアウトパターンを実装できるようになった

📚 学んだ内容

• レスポンシブデザインは 画面サイズに応じてレイアウトが変わる デザイン手法
• モバイルファースト で設計することで、シンプルで効率的なサイトになる
• Bootstrapのグリッドシステムとコンポーネントを組み合わせることで、効率的にレスポンシブサイトを作れる
• ヘッダー、ヒーロー、カードグリッド、フォーム、フッターなどの 実践的なレイアウトパターン を習得した

🚀 次のステップ

これで、 HTML/CSS/Bootstrap の基礎から実践までを学び終えた。

次は、 実習 でこれまで学んだ内容を総合的に活用して、実際のWebページを作成する。 実習の指示は口頭で伝えられる。

---

💡 よくある質問

Q1: スマートフォンで確認する方法は？

A: ブラウザの 開発者ツール を使う：

1. ブラウザで右クリック → 「検証」または「開発者ツール」を選択
2. デバイスツールバーを開く（スマートフォンアイコン）
3. デバイスを選択（iPhone、Android、タブレットなど）

これで、スマートフォンでの表示を確認できる。

Q2: モバイルファーストは必須か？

A: 必須ではないが、強く推奨される。

理由：

• Webサイトの閲覧の半数以上がスマートフォン
• モバイルファーストで設計すると、シンプルで保守しやすいコードになる

ただし、管理画面など、PCでしか使わないシステムの場合は、PC優先で設計しても良い。

Q3: Bootstrapのテーマをカスタマイズできるのか？

A: できる。方法は2つ：

1. CSS変数を上書き：

   :root {
     --bs-primary: #ff5733;  /* プライマリカラーを変更 */
   }

2. Sassを使う（上級者向け）：

   • Bootstrapのソースファイルをダウンロード
   • Sass変数をカスタマイズ
   • コンパイル

初学者は、方法1（CSS変数の上書き）で十分である。

Q4: viewportメタタグは何をしているのか？

A: スマートフォンでの表示を最適化している：

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

• width=device-width：画面幅をデバイスの幅に設定
• initial-scale=1.0：初期ズーム倍率を1倍に設定

このタグがないと：

• スマートフォンでPCサイトのように縮小表示される
• テキストが小さすぎて読めない

レスポンシブサイトでは 必須 のタグである。

Q5: Bootstrapを使わずにレスポンシブデザインはできるのか？

A: できる。

CSSのFlexboxやGrid、メディアクエリを使えば、Bootstrapなしでもレスポンシブデザインは実現できる。

Bootstrapを使う利点：

• 早く作れる
• ドキュメントが充実している
• ブラウザ互換性を気にしなくて良い

自前CSSを使う利点：

• 細かいカスタマイズがしやすい
• ファイルサイズが小さくなる

プロジェクトの性質に応じて、使い分けると良い。

Q6: グリッドシステムは12列固定なのか？

A: Bootstrapは12列固定だが、Sassを使えば変更できる。

ただし、12列で十分なケースがほとんどであり、初学者は変更する必要はない。

Q7: レスポンシブ画像はどうやって作るのか？

A: img-fluidクラスを使う：

<img src="image.jpg" class="img-fluid" alt="説明">

これで、画像が親要素の幅に収まるように自動調整される。

または、CSSで：

img {
  max-width: 100%;
  height: auto;
}

Q8: カラムの順序をスマートフォンとPCで変えられるのか？

A: できる。order-*クラスを使う：

<div class="row">
  <div class="col-12 order-2 order-md-1">
    スマートフォンでは2番目、PCでは1番目
  </div>
  <div class="col-12 order-1 order-md-2">
    スマートフォンでは1番目、PCでは2番目
  </div>
</div>

• order-1、order-2で順序を指定
• order-md-1で、タブレット以上での順序を指定