レスポンシブ Web 開発の究極ガイド

導入

デザインを柔軟に保ち、どのデバイスでも見栄えを良くする方法を次に示します。 Web アプリケーションをレスポンシブにする際に考慮すべき重要な点を見てみましょう。

CSSユニット

CSS にはさまざまな単位が用意されているため、適切な単位を選択するのが難しい場合があります。

• px: ピクセルベースの単位は、画面サイズに関係なく同じままです。
• %: パーセンテージベースの単位は、親要素のサイズに相対的です。
• vw および vh: ビューポートの幅/高さベースの単位は、ビューポートの幅/高さに相対的です。
• dvw と dvh: 動的ビューポートの幅と高さの単位は vw と vh に似ていますが、ビューポート内の変更、つまりオンスクリーン キーボードが表示されるときに動的に調整されます。
• rem: ルート要素のフォント サイズに相対し、スケーリングの一貫したベースを提供します。
• em: 現在の要素のフォント サイズに相対し、コンポーネント内でのスケーリングに役立ちます。
• calc(): さまざまな単位で計算を実行できる関数。たとえば、calc(100% - 20px) は、相対単位と絶対単位を混在させるのに役立ちます。

CSS ユニットの完全なリスト (多くはめったに使用されませんが) については、この MDN Web ドキュメント ページを参照してください。

---

レスポンシブ画像

ウェブ上の画像の応答性を向上させる方法はいくつかあります。

幅と高さの使用: 自動

幅の最大制限と高さの最大値を自動に設定すると、画像のアスペクト比を変更せずに画像をレスポンシブにすることができます。

img {
    width: 100%; /* or any fixed width */
    height: auto; 
  }

画像を縮小する場合は、width の代わりに max-width を使用しますが、元のサイズより大きく拡大しないでください。

img 要素と srcset の使用

異なるビューポート サイズまたは解像度に対して、同じ画像の異なるバージョンが必要な場合はどうすればよいですか? タグに srcset 属性を指定すると、ブラウザはデバイスに最適な画像を自動的に選択できます。
異なるバージョンは同一のファイルを意味するのではなく、異なるデバイスに合わせて画像が調整 (サイズ変更、圧縮など) されたことを意味することに注意してください。

<img src="small.jpg" 
     srcset="small.jpg 600w, medium.jpg 1200w, large.jpg 2000w"
     sizes="(max-width: 600px) 100vw, 
            (min-width: 601px) and (max-width: 1200px) 75vw, 
            (min-width: 1201px) 50vw" 
     alt="Example Image">

• ビューポートの幅が 600px 以下の場合、ブラウザは幅 100vw の small.jpg を使用します。ブラウザは、フォールバック画像として small.jpg も使用します。
• ビューポートの幅が 601px ～ 1200px の場合、ブラウザは幅 75vw の Medium.jpg を使用します。
• ビューポート幅が 1200 ピクセルを超える場合、ブラウザは幅 50vw のlarge.jpg を使用します。

画像要素と srcset の使用

異なるビューポート サイズまたは解像度に異なる画像が必要な場合はどうすればよいですか? 要素に srcset 属性を指定すると、異なるビューポート サイズまたは解像度に応じて異なる画像を定義できます。

<picture>
  <source srcset="small.jpg" media="(max-width: 600px)">
  <source srcset="medium.jpg" media="(max-width: 1200px)">
  <img src="large.jpg" alt="Example image">
</picture>

この例では:

• ビューポートの幅が 600px 以下の場合、ブラウザは small.jpg を使用します。
• ビューポートの幅が 601px ～ 1200px の場合、ブラウザは Medium.jpg を使用します。
• ビューポート幅が 1200 ピクセルを超える場合、ブラウザはlarge.jpg を使用します。

---

レスポンシブタイポグラフィ

相対単位

html {
    font-size: 16px;
}
.parent {
    font-size: 2rem; /* 32px (2 * 16px) */
}
.child {
    font-size: 0.5em; /* 16px (0.5 * 32px) */
}

• em 単位は親要素のフォント サイズに相対します。上の例では、子クラスのフォント サイズは 16 ピクセルです。これは、親要素のフォント サイズ 32 ピクセルの半分であるためです。

• rem 単位は、ルート要素のフォント サイズ (html) に相対します。上の例では、親クラスのフォント サイズは 32 ピクセルです。これは、ルートのフォント サイズ 16 ピクセルの 2 倍であるためです。

ビューポートベースのユニット

h1 {
  font-size: 5vw;
}
h2 {
  font-size: 5vh;
}

• vw 単位はビューポートの幅に相対的です。
• vh 単位はビューポートの高さに相対的です。

クランプ機能

相対単位またはビューポートベースの単位を使用する必要があるが、最小値および最大値の範囲内である場合はどうすればよいですか?
たとえば、フォント サイズをビューポートの幅に相対的に設定したいとしますが、最小値は 12 ピクセル、最大値は 48 ピクセルにする必要があります。クランプ機能は、このようなシナリオに最適です。

h1 {
  font-size: clamp(12px, 3vw, 48px);
}

---

レスポンシブレイアウト

フレックスボックス

項目を主に 1 次元レイアウトで配置する必要がある場合はどうすればよいでしょうか? (行または列)

<div class="card-container">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
</div>

.card-container {
  display: flex; /* Enable flexbox layout */
  justify-content: space-around; /* Space evenly between and around cards */
}
.card {
  background-color: black;
  border: 1px solid white;
  color: white;
  text-align: center;
  padding: 20px;
}

Flexbox の詳細については、こちらをご覧ください

グリッド

主に 2 次元レイアウトで項目を配置する必要がある場合はどうすればよいでしょうか? (行と列)

<div class="card-container">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
  <div class="card">Card 4</div>
</div>

.card-container {
  display: grid; /* Enable grid layout */
  grid-template-columns: 1fr 1fr; /* Two equal columns */
  grid-template-rows: 1fr 1fr; /* Two equal rows */
  gap: 10px; /* Space between grid items */
  width: 100%; /* Full width of the container */
}
.card {
  background-color: black;
  border: 1px solid white;
  color: white;
  text-align: center;
  padding: 20px;
}

グリッドの詳細については、こちらをご覧ください

---

メディアクエリ

デバイスが特定の条件を満たしたときに特定のスタイルを適用したい場合はどうすればよいでしょうか?最も一般的に、これらの状態はデバイスの幅に関連しています。

<div class="card-container">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
</div>

.card-container {
  display: flex;
  flex-direction: column; /* Default: single-column layout */
}

/* Media query for tablet devices (min-width: 768px) */
@media (min-width: 768px) {
  .card-container {
    flex-direction: row; /* Change to two-column layout */
  }
  .card {
    flex: 1; /* Equal width for all cards */
  }
}

/* Media query for desktop devices (min-width: 1024px) */
@media (min-width: 1024px) {
  .card {
    flex: 25%; /* Each card takes 25% of the width */
  }
}

Media queries can also be used with other characteristics, such as height, orientation, aspect-ratio, resolution, pointer, prefers-color-scheme, and display-mode.

Viewport Meta Tag

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

This tag is responsible for giving instructions to the browser on how to control the page's dimensions and scaling. The width=device-width part sets the width of the page to follow the screen width and initial-scale=1.0, which controls the zoom level when the page is first loaded.

Responsive frameworks and component libraries

If you don't want to reinvent the wheel, there are many responsive frameworks available to save time and effort.

• Bootstrap: A widely used framework with pre-designed components for quick responsive site development.

• Tailwind CSS: A utility-first framework that enables fast custom design with utility classes.

• MUI: A React library based on Material Design, offering responsive pre-styled components.

• ShadCN: Focuses on modern, accessible, and customizable responsive components.

• Ant Design: A comprehensive design system by Alibaba for enterprise applications, featuring responsive components.

Designing with a Mobile-First Approach

A mobile-first approach means starting with the design for smaller screens, like smartphones, and then gradually adding more features for larger screens, like tablets and desktops. This way, we ensure that the basic experience works great on mobile, and then you build on that for bigger devices.

.card-container { /* default code is for mobile view */
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  padding: 20px;
  gap: 12px;
}

@media (min-width: 768px) { /* queries/cases are for larger views */
  .card-container {
    flex-direction: row;
    gap: 18px;
  }
}

以上がレスポンシブ Web 開発の究極ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。