完璧なレスポンシブを目指すならmeta viewportも理解しよう

HTML/CSS

レスポンシブ対応と聞くと、@mediaクエリが真っ先に思い浮かぶ方は多いと思います。
間違えではありませんが、@mediaクエリよりもmeta viewportの方がレスポンシブ対応の重要な役割を果たしています。
もはやmeta viewportが無いと完璧なレスポンシブ対応にはならないので、必ず覚える必要があります。

しかし近年のWEB制作はテンプレートを使用するものが多く、それらには当たり前の様にmeta viewportの記載がされているので、その重要性に気づけていない人が多い様です。

今回の記事では、レスポンシブ対応で影が薄くなりがちなmeta viewport(メタ ビューポート)についてを紹介します。

meta viewportとは?

meta viewportは、スマホやタブレットなどのモバイル端末で最適なWeb表示させるために必要なHTMLタグです。
Googleが推奨するレスポンシブWebデザインではmeta viewportの使用があるので、
現在のWEBサイトでは、ほぼ必ず入れなくてはいけないHTMLタグとなっています。

meta viewportの基本的な書き方は以下です。(Google推奨の記述。実際はこの記述だけ覚えておけば大丈夫です。)

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

<meta name="viewport" content="width=device-width, initial-scale=1.0″>の記述をheadタグの任意の場所に入れて下さい。(大抵の場合はタイトルタグの前後くらいに設置されています。)

次で記述の解説をします。

meta viewportの記述解説

初めのmeta name="viewport"でviewport(表示領域)に関しての宣言を開始します。

content="width=device-width, initial-scale=1.0″の部分はそれぞれの属性値です。

content="width=device-widthでは、content(コンテンツ)のwidth=device-width(幅はデバイス幅と同じ)ですよと言う意味です。

要するに、iPhone端末で表示するときはiPhone端末の表示領域に最適化された表示がされます。iPadで表示したらそれに最適化された表示になります。

initial-scale=1.0の記述では、初期のズーム倍率を示しています。1.0ならば1倍なので最も標準的な見た目をします。
反対に2.0、3.0と数値を上げれば拡大表示され、テキストや要素が大きく表示されます。

他にも「user-scalable=no」「user-scalable=yes」を追加する事で、ユーザーに拡大表示を許すか否かを設定できます。
(通常はこの記述はしなくても良い。この部分はユーザーに任されば良いので。)

完璧なレスポンシブを目指すなら

完璧なレスポンシブを目指すなら今回紹介したmeta viewportの記述が必須です。

meta viewportの記述をした上で、細かいレスポンシブ調整をCSS3のmedia query(メディアクエリ)で調整する事で完璧に近い形になります。

media query(メディアクエリ)に関しては以下の記事で紹介しているので合わせてどうぞ。


以上が「完璧なレスポンシブを目指すならmeta viewportも理解しよう」でした。

meta viewportとmedia queryをマスターしてスマホファーストなWEBデザインを目指しましょう。

HTML/CSSHTML,WEB

Posted by KT