ITコース CSS基礎 033_レスポンシブレイアウト

レスポンシブレイアウト

レスポンシブレイアウトは、異なる画面サイズやデバイスに適応できるウェブデザイン手法です。レスポンシブレイアウトを使用することで、デスクトップパソコン、タブレット、スマートフォンなど、異なるデバイスでウェブページが良好な表示効果を維持できます。

メディアクエリ

CSSのメディアクエリを使用すると、デバイスの特徴（画面幅、高さ、デバイスタイプなど）に基づいて異なるスタイルを適用できます。これにより、異なる画面サイズに対して異なるレイアウトを定義できます。

例：

1
/* PC */
2
@media (min-width: 992px) {
3
    * {
4
        background: yellow
5
    }
6
}
7
/* タブレット */
8
@media (min-width: 768px) and (max-width: 992px) {
9
    * {
10
        background: red
11
    }
12
}
13
/* 一般的なスマートフォン */
14
@media (min-width: 576px) and (max-width: 768px) {
15
    * {
16
        background: green
17
    }
18
}
19
/* 小画面デバイス */
20
@media (max-width: 576px) {
21
    * {
22
       background: blue
23
    }
24
}

効果：

レスポンシブ画像

max-width: 100%; を使用して、小さな画面で画像やメディア要素がコンテナを超えないようにします。 例：

1
    img {
2
      max-width: 100%; /* 画像の最大幅は包含要素の100% */
3
      height: auto;    /* アスペクト比を維持し、画像の変形を防ぐ */
4
    }
5

6
    /* 小さな画面で画像サイズを調整 */
7
    @media screen and (max-width: 600px) {
8
      img {
9
        max-width: 50%; /* 画像の最大幅は包含要素の50% */
10
      }
11
    }

1
    <img src="zhaojian.jpg" alt="Responsive Image">

効果：

ビューポート設定

<meta> タグを使用してビューポートを設定し、モバイルデバイスでページが正しくスケーリングされるようにします。

例：

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

このメタタグは、モバイルブラウザに対して、ビューポート幅をデバイスの幅に設定し、ドキュメントを予定サイズの100%に拡大し、モバイル最適化されたサイズでドキュメントを表示するよう指示します。

ビューポートメタタグと一緒に、他のいくつかの設定を使用できますが、一般的に上記の行が使用したいものです。

• initial-scale：ページの初期ズームを設定します。ここでは1に設定しています。
• height：ビューポートに特定の高さを設定します。
• minimum-scale：最小ズームレベルを設定します。
• maximum-scale：最大ズームレベルを設定します。
• user-scalable：noに設定するとズームを防止します。

minimum-scale、maximum-scaleの使用を避け、特にuser-scalableをnoに設定することは避けてください。これにより、ユーザーが自由にズームイン・ズームアウトできることが保証されます。