Articles
CSS入門
ビューポートとレスポンシブデザイン

ビューポートとレスポンシブデザイン

この記事ではビューポートとレスポンシブデザインについて説明します。

<meta>タグを使ったビューポートの設定方法とその重要性について学びます。

YouTube Video

プレビュー用のHTML

css-responsive-viewport.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>CSS Properties Example</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-responsive-viewport.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>CSS Properties For Responsive Design</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>Viewport Properties</h2>
20        </header>
21        <article>
22            <h3>Viewport Example</h3>
23            <section>
24                <header><h4>HTML</h4></header>
25                <pre>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;</pre>
26            </section>
27        </article>
28        <article>
29            <h3>width</h3>
30            <section>
31                <header><h4>HTML</h4></header>
32                <pre>&lt;meta name="viewport" content="width=device-width"&gt;</pre>
33            </section>
34        </article>
35        <article>
36            <h3>height</h3>
37            <section>
38                <header><h4>HTML</h4></header>
39                <pre>&lt;meta name="viewport" content="height=device-height"&gt;</pre>
40            </section>
41        </article>
42        <article>
43            <h3>initial-scale</h3>
44            <section>
45                <header><h4>HTML</h4></header>
46                <pre>&lt;meta name="viewport" content="initial-scale=1.0"&gt;</pre>
47            </section>
48        </article>
49        <article>
50            <h3>minimum-scale</h3>
51            <section>
52                <header><h4>HTML</h4></header>
53                <pre>&lt;meta name="viewport" content="minimum-scale=0.5"&gt;</pre>
54            </section>
55        </article>
56        <article>
57            <h3>maximum-scale</h3>
58            <section>
59                <header><h4>HTML</h4></header>
60                <pre>&lt;meta name="viewport" content="maximum-scale=2.0"&gt;</pre>
61            </section>
62        </article>
63        <article>
64            <h3>user-scalable</h3>
65            <section>
66                <header><h4>HTML</h4></header>
67                <pre>&lt;meta name="viewport" content="user-scalable=no"&gt;</pre>
68            </section>
69        </article>
70        <article>
71            <h3>Viewport Common Examples 1</h3>
72            <section>
73                <header><h4>HTML</h4></header>
74                <pre>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;</pre>
75            </section>
76        </article>
77        <article>
78            <h3>Viewport Common Examples 2</h3>
79            <section>
80                <header><h4>HTML</h4></header>
81<pre>
82&lt;meta name="viewport"
83      content="width=device-width, initial-scale=1.0, user-scalable=no"&gt;
84</pre>
85            </section>
86        </article>
87        <article>
88            <h3>Viewport Common Examples 3</h3>
89            <section>
90                <header><h4>HTML</h4></header>
91                <pre>&lt;meta name="viewport" content="width=1024, initial-scale=1.0"&gt;</pre>
92            </section>
93        </article>
94    </main>
95</body>
96</html>

HTML内でのviewportの設定について

viewportの設定は、ウェブページを表示するデバイスの表示領域（ビューポート）に関する情報を制御するために使用されます。特に、モバイルデバイスでウェブページの表示を調整するために重要な役割を果たします。

ビューポート（Viewport）とは

ビューポートとは、ユーザーがウェブページを閲覧しているブラウザウィンドウやデバイスの表示領域を指します。デスクトップではブラウザのウィンドウサイズがビューポートとなり、スマートフォンやタブレットなどのモバイルデバイスではそのデバイスの画面サイズがビューポートになります。

ビューポートの指定

ビューポートを制御するためには、HTMLの<meta>タグを使ってビューポートの設定を行います。この設定により、ページが異なるデバイスでどのように表示されるかを指定できます。

基本構文 

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

このコードは、ビューポートの幅をデバイスの幅に合わせ、ページの最初の表示倍率（ズームレベル）を1.0（100%の表示）に設定します。

viewport の主なプロパティ

viewportのcontent属性で指定できるプロパティには、主に次のものがあります。

  1. width

    • widthにはビューポートの幅を指定します。device-widthと設定することで、デバイスの物理的な幅（ピクセル単位）にビューポートを合わせます。
    • 例: width=device-width

  2. height

    • heightにはビューポートの高さを指定しますが、一般的には幅のみを設定することが多く、高さはあまり指定されません。device-heightと設定することで、デバイスの物理的な高さ（ピクセル単位）にビューポートを合わせます。
    • 例: height=device-height

  3. initial-scale

    • initial-scaleにはページの初期ズームレベルを指定します。1.0は、デバイスの100%ズームレベルを意味します。
    • 例: initial-scale=1.0

  4. minimum-scale

    • minimum-scaleにはズームアウトできる最小倍率を指定します。0.5と設定すると、50%までズームアウトできます。
    • 例: minimum-scale=0.5

  5. maximum-scale

    • maximum-scaleにはズームインできる最大倍率を指定します。2.0と設定すると、200%までズームインできます。
    • 例: maximum-scale=2.0

  6. user-scalable

    • user-scalableにはユーザーがページをズームできるかどうかを指定します。yesまたはnoで指定します。
    • 例: user-scalable=no とすると、ユーザーによるズームが無効になります。

よく使われる例

  1. 標準的なレスポンシブ設定
1<meta name="viewport" content="width=device-width, initial-scale=1.0">
  • この設定は、モバイルデバイスの画面幅に合わせてページを自動的に調整し、ページが100%のズームレベルで表示されるようにします。レスポンシブデザインの基本となる設定です。
  1. ズーム禁止
1<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  • この設定は、ユーザーによるズームを禁止します。特定のデザインでズームが必要ない場合や、ズーム操作がデザインの崩れを引き起こす場合に使われます。
  1. 固定ズームレベルとビューポート幅
1<meta name="viewport" content="width=1024, initial-scale=1.0">
  • この設定は、ビューポート幅を1024ピクセルに固定し、初期表示時にズームレベルを100%に設定します。デバイス幅にかかわらず、ページの幅を一定に保ちたい場合に使用されます。

viewport の役割

viewportの設定は、特にモバイルデバイスでの表示を最適化するために不可欠です。正しいビューポート設定を行うことで、以下のような問題を防ぐことができます。

  • ページの幅がデバイスの幅を超えてしまい、スクロールが必要になることを防ぎます。
  • テキストや画像が小さすぎて読みづらくなることを防ぎます。
  • ページ全体がズームアウトされて表示されるため、操作がしづらいことを防ぎます。

まとめ

  • viewportは、ウェブページを表示するデバイスの表示領域を制御するために使います。
  • 主にモバイルデバイスの表示に対応するために使用され、レスポンシブデザインにおいて重要な役割を果たします。
  • width=device-widthやinitial-scale=1.0などの設定は、標準的なレスポンシブウェブデザインにおいてよく使用されます。

viewport を適切に設定することで、モバイルユーザーに快適な閲覧体験を提供することができます。

YouTubeチャンネルでは、Visual Studio Codeを用いて上記の記事を見ながら確認できます。 ぜひYouTubeチャンネルもご覧ください。

YouTube Video

CSSにおけるレスポンシブデザインの概要