メディアクエリを使用したレスポンシブ Web デザイン

レクチャー 6: メディア クエリを使用したレスポンシブ Web デザイン

この講義では、デスクトップからスマートフォンまで、あらゆるデバイスで見栄えの良い Web サイトを作成するための重要なスキルであるレスポンシブ Web デザインについて詳しく説明します。レスポンシブ デザインの鍵は、メディア クエリを使用することです。メディア クエリを使用すると、画面サイズやデバイスの特性に基づいてさまざまなスタイルを適用できます。

---

レスポンシブ Web デザインを理解する

レスポンシブ Web デザインにより、Web サイトがさまざまな画面サイズに適応し、使用しているデバイスに関係なく、ユーザーに最適な表示エクスペリエンスが提供されます。このアプローチにより、モバイル サイトとデスクトップ サイトを別々に作成する必要がなくなり、デザイン プロセスが合理化されます。

1.レスポンシブ デザインが重要な理由

• ユーザー エクスペリエンス: どのデバイスでもコンテンツにアクセスし、簡単にナビゲートできるようにすることで、使いやすさが向上します。
• SEO: Google およびその他の検索エンジンは、検索ランキングでモバイル フレンドリーな Web サイトを優先します。
• コスト効率: すべてのプラットフォームで機能する単一のサイトを維持することで、時間とリソースを節約します。

メディア クエリの概要

メディア クエリはレスポンシブ デザインのバックボーンです。これにより、画面幅が特定のしきい値を下回った場合など、特定の条件が満たされた場合にのみ CSS ルールを適用できます。

1.基本的な構文

メディア クエリは、メディア タイプと、画面幅などの条件をチェックする 1 つ以上の式で構成されます。

• 例:

  @media screen and (max-width: 768px) {
    body {
      background-color: lightblue;
    }
  }

このメディア クエリは、幅 768 ピクセル以下の画面で背景色を水色に変更します。

2.メディアクエリの結合

複数の条件を組み合わせて、特定のシナリオをターゲットにすることができます。

• 例:

  @media screen and (min-width: 600px) and (max-width: 1200px) {
    .container {
      padding: 20px;
    }
  }

これは幅 600 ピクセルから 1200 ピクセルまでの画面をターゲットにしており、パディングを .container クラスに適用します。

3.一般的なブレークポイント

ブレークポイントは、画面サイズに基づいて Web サイトのレイアウトが変更されるポイントです。

• 一般的なブレークポイント:
  • 320px: 小型デバイス (ポートレートモードのスマートフォン)
  • 768px: タブレット
  • 1024px: 横向きモードの小型デスクトップまたはタブレット
  • 1200px: 大きなデスクトップ

レスポンシブ レイアウトの作成

画面サイズに基づいて調整されるシンプルなレスポンシブ レイアウトを作成してみましょう。

HTML:

<div class="container">
  <header>Header</header>
  <nav>Navigation</nav>
  <main>Main Content</main>
  <aside>Sidebar</aside>
  <footer>Footer</footer>
</div>

CSS:

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-gap: 10px;
}

header, nav, main, aside, footer {
  padding: 20px;
  background-color: #f4f4f4;
  border: 1px solid #ddd;
}

/* Media Query for Tablets and Smaller Devices */
@media screen and (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
  }

  nav, aside {
    display: none; /* Hide navigation and sidebar on smaller screens */
  }
}

この例では:

• レイアウトは CSS グリッドを使用して、メイン コンテンツの横にサイドバーを備えた、大きな画面上で 2 列のレイアウトを作成します。
• 768 ピクセルのメディア クエリを使用して単一列レイアウトに切り替え、小さい画面ではナビゲーションとサイドバーを非表示にします。

レスポンシブ画像

レスポンシブなレイアウトに加えて、画像がさまざまなデバイス上で適切に拡大縮小されることも確認する必要があります。画像をレスポンシブにするには、max-width プロパティを使用します。

• 例:

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

これにより、画像がコンテナの幅を超えることがなくなり、アスペクト比が維持されます。

練習演習

1. CSS グリッドを使用して複数列レイアウトの Web ページを作成します。
2. メディア クエリを使用して、さまざまな画面サイズに合わせてレイアウトを調整します (要素の非表示や列番号の変更など)。
3. max-width プロパティを適用して、ページ上のすべての画像が応答するようにしてください。

---

次のステップ: 次の講義では、CSS トランジションとアニメーション について説明します。Web サイトに動的な効果を追加して、Web サイトをよりインタラクティブにする方法を学びます。そして魅力的です。乞うご期待!

---

LinkedIn でフォローしてください -

リドイ・ハサン

以上がメディアクエリを使用したレスポンシブ Web デザインの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。