Viewportメタタグ

HTMLにおいて、viewport metaタグは、さまざまなデバイス、特にモバイルデバイス上でのウェブページのレイアウトとスケーリングを制御するために使用される特別なタグです。これはHTMLドキュメントの<head>セクション内に配置され、ブラウザに対してページのレンダリング方法に関する指示を提供します。viewport metaタグは、さまざまな画面サイズや解像度に適応するレスポンシブウェブデザインを作成するために不可欠です。

viewportメタタグを使用するための基本構文は以下の通りです。

<meta name="viewport" content="name=value, name=value">

• <meta>: HTMLドキュメントに関するメタデータを定義するために使用されるHTMLタグです。
• name="viewport": このメタタグがビューポートの設定を制御するために使用されることを指定します。
• content: ビューポートの設定を、カンマ区切りのname=valueペアのリストとして提供する属性です。

content 属性で使用される一般的な name=value ペアには、次のようなものがあります：

• width=device-width: ビューポートの幅をデバイスの画面の幅に設定します。

• initial-scale=1.0: ページが最初に読み込まれたときの初期ズームレベルを設定します。1.0 という値はズームなしを意味します。

• maximum-scale=1.0: 許可される最大ズームレベルを設定します。
• minimum-scale=1.0: 許可される最小ズームレベルを設定します。

HTMLドキュメントでviewportメタタグを使用する方法の例を次に示します。

<!DOCTYPE html>
<html>
<head>
    <title>Viewport Meta Tag</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <h1>Responsive Web Page</h1>
    <p>This page uses the viewport meta tag to adapt to different screen sizes.</p>
</body>
</html>

この例では、viewportメタタグは width=device-width, initial-scale=1.0 に設定されています。これにより、ブラウザに対してビューポートの幅をデバイスの幅に合わせ、初期ズームレベルを1.0（ズームなし）に設定するように指示します。