viewportメタタグ
viewportメタタグを追加し、モバイルデバイスでレスポンシブレイアウトを正しく動作させるために必要な理由を理解します。
「viewportメタタグ」はCoddyKit上の無料Frontend Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。
Viewportメタタグが必要な理由
viewportメタタグがない場合、モバイルブラウザはページをデスクトップ幅（多くの場合980px）でレンダリングし、画面に収まるように縮小表示します。その結果、文字が小さくなり、レイアウトも崩れます。このメタタグによって、ブラウザはデバイスの実際の幅を使用するようになります。
タグ
すべてのページの<head>内にこれを追加してください。レスポンシブデザインを正しく機能させるために必須です。
<meta name="viewport" content="width=device-width, initial-scale=1.0">width=device-width
width=device-widthは、viewportの幅をデバイスの画面幅（CSSピクセル単位）に設定します。幅390pxのiPhone 14では、viewportは980pxではなく390pxになります。
initial-scale=1.0
initial-scale=1.0は、ページの初回読み込み時のズーム倍率を1に設定します。これがないと、一部のブラウザではズーム倍率が適用される場合があります。device-widthと組み合わせることで、CSSピクセルとデバイスピクセルが1対1になる実際の比率を使用できます。
CSSピクセルと物理ピクセル
高DPI（Retina）画面のデバイスピクセル比（DPR）は1より大きくなります。幅390pxのiPhone 14には1170個の物理ピクセルがあります（DPR = 3）。CSSピクセルは物理ピクセルを抽象化するため、DPRに関係なくCSSはCSSピクセル単位で機能します。
user-scalable=noを使用しない
ピンチ操作によるズームを無効にするために、user-scalable=noを追加する開発者もいますが、これは避けてください。視覚障害のあるユーザーがコンテンツを読むために拡大することを妨げ、WCAG達成基準1.4.4にも違反します。
viewport単位：vwとvh
1vwはviewport幅の1%です。1vhはviewport高の1%です。100vwと100vhはviewport全体を埋めます。ヒーローセクションや全画面レイアウトに使用してください。
.hero {
width: 100vw;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}dvh — 動的viewport高
モバイルでは、100vhにブラウザのUI（アドレスバー）も含まれるため、コンテンツが切れてしまうことがあります。新しい100dvh（動的viewport高）は、表示中のブラウザUIに合わせて調整されます。フォールバックと併用してください。
.full-screen {
min-height: 100vh; /* fallback */
min-height: 100dvh; /* modern browsers */
}DevToolsのviewport
Chrome DevToolsでデバイスアイコンをクリックするとDevice Modeに入り、さまざまなviewportサイズでページがどのように表示されるかを正確に確認できます。ルーラーにはCSSピクセルが表示されます。
content属性のバリエーション
initial-scale、minimum-scale、maximum-scaleも設定できます。適切な値に保ってください。user-scalable=noを指定せずにminimum-scale=1を設定すれば、ズームは引き続き可能であり、アクセシビリティの観点でも適切です。
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">viewportとメディアクエリ
メディアクエリはviewport幅（物理ピクセルではなくCSSピクセルの値）を使用します。viewportが390pxの場合、@media (max-width: 768px)が適用されます。viewportメタタグによって、モバイルでもこれらのブレークポイントが正しく機能します。
クイックチェック
viewportメタタグにおけるwidth=device-widthの目的は何でしょうか。
復習：Viewportメタタグ
必ずを
内に含めてください。ユーザーによる拡大縮小を無効にしないでください。viewportに応じたサイズ設定にはvw/vhを使用してください。dvhはモバイルブラウザのUIに関する問題を解決します。この1つのタグによって、レスポンシブCSS全体がモバイルで機能するようになります。よくある質問
「viewportメタタグ」レッスンは無料ですか？
はい。「viewportメタタグ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。
「viewportメタタグ」で何を学びますか？
viewportメタタグを追加し、モバイルデバイスでレスポンシブレイアウトを正しく動作させるために必要な理由を理解します。 ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Frontend Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「viewportメタタグ」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このFrontend Academyレッスンでコードを書いて実行できますか？
はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。