第6回:メディアクエリによるレスポンシブデザインの応用

以前の第3回ではレスポンシブデザインとメディアクエリの基礎について学びました。
今回はその応用編として、より高度なメディアクエリの使用方法と、実際のカフェサイトでの適用例について詳しく解説します。

目次

メディアクエリの復習

まずはメディアクエリの基本を簡単に復習しましょう。
メディアクエリはCSSで異なるデバイスや画面サイズに応じたスタイルを適用するための技術です。
下記の例では画面幅が600px以下の場合に.containerクラスの背景色がライトブルーになります。

@media (max-width: 600px) {
  .container {
    background-color: lightblue;
  }
}

ブレイクポイントの設計

レスポンシブデザインを実現するためには、適切なブレイクポイントの設計が重要です。
ブレイクポイントとは画面幅が特定の値を超えたときにスタイルを変更するポイントのことです。

以下は使用されることが多いブレイクポイントの例です。

デバイスタイプ最大幅
モバイル600px
タブレット768px
デスクトップ1024px
ブレイクポイントの例

カフェサイトへの適用例

カフェサイトのレスポンシブデザインをさらに向上させるためのメディアクエリの応用例を紹介します。

/* 共通スタイル */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

header {
  background-color: #333;
  color: #fff;
  padding: 10px 0;
}

nav {
  display: flex;
  justify-content: center;
}

nav a {
  color: #fff;
  margin: 0 15px;
  text-decoration: none;
}

.menu-container {
  display: grid;
  gap: 20px;
  padding: 20px;
}

.menu-item {
  background-color: #f4f4f4;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
}

footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 10px 0;
}

/* メディアクエリ */
@media (max-width: 600px) {
  .menu-container {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 601px) and (max-width: 1024px) {
  .menu-container {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1025px) {
  .menu-container {
    grid-template-columns: repeat(3, 1fr);
  }
}

ここではメニューアイテムのレイアウトを画面サイズに応じて1列、2列、3列に変更しています。

HTMLの修正

カフェサイトのHTMLファイルを更新してGrid Layoutを適用します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>カフェサイト</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <h1>カフェへようこそ</h1>
    <nav>
      <a href="#">ホーム</a>
      <a href="#">メニュー</a>
      <a href="#">店舗情報</a>
      <a href="#">お問い合わせ</a>
    </nav>
  </header>
  
  <main>
    <section class="menu-container">
      <div class="menu-item">
        <h2>コーヒー</h2>
        <p>美味しいコーヒーを提供しています。</p>
      </div>
      <div class="menu-item">
        <h2>紅茶</h2>
        <p>厳選された紅茶をお楽しみください。</p>
      </div>
      <div class="menu-item">
        <h2>ケーキ</h2>
        <p>手作りのケーキをご用意しています。</p>
      </div>
      <div class="menu-item">
        <h2>サンドイッチ</h2>
        <p>新鮮な素材を使用したサンドイッチです。</p>
      </div>
    </section>
  </main>
  
  <footer>
    <p>© 2024 カフェサイト. All rights reserved.</p>
  </footer>
</body>
</html>

カフェへようこそ

© 2024 カフェサイト. All rights reserved.

プロジェクトの確認

index.htmlとstyle.cssを保存して、ブラウザ(google chromeやmicrosoft EDGEなど)でindex.htmlを開いてみましょう。
index.htmlをダブルクリックするとスムーズかと思います。

まずここまででカフェのWEBサイトが上記のように表示されることを確認してください。

まとめ

メディアクエリを使うことで、カフェサイトを様々なデバイスに対応させることができます。
適切なブレイクポイントを設計し、FlexboxやGrid Layoutと組み合わせることで、より高度なレスポンシブデザインを実現できます。

次回はカフェサイトに動きと視覚的な魅力を加えるためのCSSアニメーションについて学びます。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次