今回はレスポンシブデザイン、meta viewportを設定しよう!
の解説になります!
こんな方に読んでほしい
- レスポンシブデザインを学び始めた方へ
- 今回はviewport(ビューポート)について解説しております。
レスポンシブデザインとは、表示領域の幅によって見え方が変わるデザイン(Webサイトの見た目)のことを示します。
レスポンシブデザインに必須になってくるのが、meta viewport
になります。
viewportについて
viewport(ビューポート)とは、「表示領域」のことを示します。
画面サイズ(Webページ)の横幅がviewportになります。
よく、PCサイトをスマートフォンで確認した際に、文字やサイト自体が小さく見えたことはありませんか。
viewportを設定していないと、コンテンツの余白や横スクロール、文字のサイズが小さくなるといった問題がでてきます。
問題を解決してくれるのが、viewportになります。
viewportを設定することにより、画面幅(表示領域)いっぱいにコンテンツや本文を合わせてくれます。
設定は、head〜/head
の中にメタ情報として設定します。
書き方は以下のようになります。
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>SHU BLOG</title>
</head>
<body>
</body>
</html>
注意!
viewportを設定しただけでは、レスポンシブデザインにはなりません。
表示領域が確保でき、スマートフォン、タブレットでページが見やすいように拡大されてる「だけ」になります。
次に必須になってくるのが、スマートフォン用に向けたCSSを設定してあげる必要があります。
※スマートフォン用に向けたCSSは次回解説いたします。
viewportについての解説
上記では、設定場所について解説しました。name="viewport"
は、「表示領域」の宣言になります。
次に、content=""
の中身を解説していきたいとおもいます。
width(横幅)について
Viewportの横幅をピクセル単位で指定が可能になります。
初期値980pxになります。(※指定範囲は200px〜10000pxとされているようです。)
device-width
とは、自動的にデバイスの表示幅に合わせてくれます。
initial-scale(初期倍率)について
ページが表示されたときの倍率の設定になります。
指定していない場合は、「initial-scale=1」と自動的に設定されます。
基本的は上記の設定で問題ありませんが、その他にも設定できる値があるので解説していきます。
height(縦幅)について
設定する頻度はほとんどありませんが、縦幅の設定もすることも可能です。
widthと同様にピクセル単位で指定が可能になります。(※指定範囲は200px〜10000pxとされているようです。)
device-heightも指定可能です。
minimum-scale(最小倍率)について
ユーザーがズームできる最小倍率になります。
初期値0.25になります。(※指定範囲は20〜10の数値とされているようです。)
maximum-scale(最大倍率)について
ユーザーがズームできる最大倍率になります。
初期値1.6になります。(※指定範囲は0〜10の数値とされているようです。)
user-scalableについて
ページを閲覧しているユーザーのズームを「yes、no」で設定します。
初期値はyesになり、ズーム操作可能になっております。
iOS10からは非対応になっております。
まとめ
今回はこれで以上です。
次回は「スマートフォン用に向けたCSS」になります。
- POINT
- レスポンシブデザインとは、表示領域の幅によって見え方が変わるデザインのことを示します。
- viewportは、表示領域のことを示します。
- 設定は、head〜/headは、の中にメタ情報として設定します。
-
meta name="viewport" content="width=device-width,initial-scale=1.0"
を設定しましょう。 -
device-width
とは、自動的にデバイスの表示幅に合わせてくれます。 -
initial-scale
とは、ページが表示されたときの倍率の設定になります。
スポンサーリンク
SHU
1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。
最新記事
関連記事