レスポンシブデザイン（スマホ対応）の基礎

レスポンシブデザイン（スマホ対応）の基礎を学ぼう

現在のWebサイトは スマホ・タブレット・PC など、さまざまなデバイスで表示されることを前提に設計する必要があります。
これを レスポンシブデザイン（Responsive Design） といい、画面サイズに応じて 自動的にデザインを調整 する方法を学びましょう！

1. レスポンシブデザインとは？

レスポンシブデザインとは、CSSを使って画面サイズに応じてレイアウトを変える技術 です。
例えば、以下のような違いを考慮します。

画面サイズ主な特徴
スマホ（～767px）1カラム、文字サイズ大きめ
タブレット（768px～1024px）2カラム、適度な余白
PC（1025px～）3カラム以上、横幅を広めに

レスポンシブデザインを実装するための代表的な方法は、メディアクエリ（Media Queries） を使用することです。

2. メディアクエリ（Media Queries）を使って画面サイズを調整

メディアクエリを使うと、画面サイズごとに異なるスタイルを適用 できます。

基本のメディアクエリ

/* PC用（デフォルト） */
body {
    font-size: 18px;
    background-color: #f8f8f8;
}

/* タブレット用 */
@media (max-width: 1024px) {
    body {
        font-size: 16px;
        background-color: #e0f7fa;
    }
}

/* スマホ用 */
@media (max-width: 767px) {
    body {
        font-size: 14px;
        background-color: #ffebee;
    }
}

📌 ポイント

  • max-width: 1024px … 画面幅が1024px以下のときに適用
  • max-width: 767px … 画面幅が767px以下のときに適用
  • スマホ → タブレット → PCの順番で デザインを調整 していく

3. フレキシブルなレイアウト（可変幅）を作る

レスポンシブデザインでは、固定幅（px） ではなく 可変幅（%・vw・emなど） を使うと柔軟なレイアウトを作れます。

可変幅の例

.container {
    width: 90%;  /* 画面サイズに応じて自動調整 */
    max-width: 1200px;  /* 最大幅を1200pxに */
    margin: 0 auto;  /* 中央配置 */
}

📌 ポイント

  • width: 90%; … 親要素の90%を使用
  • max-width: 1200px; … 最大1200pxに制限
  • margin: 0 auto; … 中央揃え

4. レスポンシブな画像とフォントサイズ

画像やフォントサイズも 画面サイズに応じて調整 すると、より快適なデザインになります。

レスポンシブな画像

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

📌 ポイント

  • max-width: 100%; で 画像の横幅を親要素の100%以下に制限
  • height: auto; で 縦横比を維持

5. Flexbox・Gridを使ったレスポンシブデザイン

Flexbox や CSS Grid を使うと、レスポンシブデザインを簡単に実装できます。

Flexboxを使ったレスポンシブなナビゲーション

<nav class="nav">
    <a href="#">ホーム</a>
    <a href="#">サービス</a>
    <a href="#">お問い合わせ</a>
</nav>

.nav {
    display: flex;
    justify-content: space-around;
    background-color: #007bff;
    padding: 10px;
}

.nav a {
    color: white;
    text-decoration: none;
    font-size: 18px;
}

/* スマホでは縦並びに変更 */
@media (max-width: 767px) {
    .nav {
        flex-direction: column;
        text-align: center;
    }
}

📌 ポイント

  • PCでは 横並び
  • スマホでは flex-direction: column; で 縦並びに変更

6. レスポンシブデザインの実践例（簡単なカードレイアウト）

以下のコードで、レスポンシブなカードデザイン を作成できます。

<div class="cards">
    <div class="card">カード1</div>
    <div class="card">カード2</div>
    <div class="card">カード3</div>
</div>

.cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

/* タブレット */
@media (max-width: 1024px) {
    .cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* スマホ */
@media (max-width: 767px) {
    .cards {
        grid-template-columns: repeat(1, 1fr);
    }
}

.card {
    background-color: #ffcc80;
    padding: 20px;
    text-align: center;
}

📌 ポイント

  • PCでは 3カラム
  • タブレットでは 2カラム
  • スマホでは 1カラム

7. まとめ

  • レスポンシブデザイン は 画面サイズに応じてデザインを調整
  • メディアクエリ を使って、スマホ・タブレット・PCごとにスタイルを変える
  • 可変幅（%・vw） を使うと、柔軟なレイアウトになる
  • Flexbox・Grid を活用すると、より簡単にレスポンシブデザインを実装できる

次回は、レスポンシブデザインをより快適にするテクニック（ブレイクポイント・モバイルファースト設計） を学びましょう！

補足情報（学習に役立つリンク）

ホーム
タイトルとURLをコピーしました