レスポンシブWebデザインに必須!HTMLビューポートメタタグの基本と属性まとめ
HTMLのビューポート(viewport)メタタグは、レスポンシブWebサイトを作成する際に欠かせない要素です。このタグを設定することで、Webページがデバイスのビューポート(表示領域)の幅に合わせて自動的に調整され、スマートフォンやタブレットでも最適な表示を実現できます。
ビューポートメタタグの構文
基本的な記述方法は以下の通りです。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
ビューポートメタタグの主な属性
| 属性 | 説明 |
|---|---|
| width | デバイスの仮想ビューポートの幅を指定します。 |
| height | デバイスの仮想ビューポートの高さを指定します。 |
| initial-scale | ページが最初に読み込まれたときのズームレベルを指定します。 |
| minimum-scale | ユーザーがページを縮小できる最小のズームレベルを指定します。 |
| maximum-scale | ユーザーがページを拡大できる最大のズームレベルを指定します。 |
| user-scalable | ユーザーによるズームイン・ズームアウト操作を許可するかどうかを指定します。 |
実装例
それでは、HTMLビューポートメタタグを使用した具体的なコード例を見てみましょう。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
color: #000;
height: 100vh;
background-color: #FBAB7E;
background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
text-align: center;
padding: 20px;
}
</style>
</head>
<body>
<h1>HTML Viewport meta tag Demo</h1>
<p>
This is a paragraph with some dummy text.
This is a paragraph with some dummy text.
This is a paragraph with some dummy text.
This is a paragraph with some dummy text.
</p>
<p>
This is another paragraph with some dummy text.
This is another paragraph with some dummy text.
This is another paragraph with some dummy text.
This is another paragraph with some dummy text.
This is another paragraph with some dummy text.
This is another paragraph with some dummy text.
</p>
</body>
</html>出力結果
次に、ブラウザウィンドウのサイズを変更してみましょう。画面幅が狭くなると、ページがどのように小さいデバイス向けに表示されるかを確認できます。
-
HTML DOM スタイルの overflow プロパティとは？使い方と設定値を解説
HTML ドキュメント内の要素に対して、overflow CSS プロパティの値を取得・変更するには、DOM のスタイルオブジェクトが持つ overflow プロパティを使用します。このプロパティを使うことで、JavaScript から動的に要素のはみ出しコンテンツの表示方法を制御できます。構文（シンタックス）overflow プロパティの基本的な構文は以下のとおりです。overflow の値を取得する場合object.style.overflowoverflow の値を変更する場合object.style.overflow = value設定できる値overflow プロパティには、以下の値
-
HTMLの<meta>タグとは？メタデータの設定方法と主な属性を解説
HTMLの<meta>タグとはHTMLの<meta>要素は、ページの説明文（description）、キーワード、文書の作者名などのメタデータ（メタ情報）を記述するために使用します。メタデータはページ上には表示されませんが、検索エンジンやWebブラウザなどがページの内容を理解するために利用されます。<meta>タグは<head>要素内に記述する空要素で、終了タグは不要です。viewportの設定方法また、<meta>タグではviewport（ビューポート）を設定することも可能です。これにより、スマートフォンやタブレットなど、各デバイス