SHU BLOG

BLOG NEWS ブログ

TITLE

レスポンシブデザイン、viewportを設定しよう!

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!笑

シュウ
シュウ
今回はレスポンシブデザイン、meta viewportを設定しよう!
の解説になります!

こんな方に読んでほしい

  • レスポンシブデザインを学び始めた方へ
  • 今回はviewport(ビューポート)について解説しております。

レスポンシブデザインとは、表示領域の幅によって見え方が変わるデザイン(Webサイトの見た目)のことを示します。
レスポンシブデザインに必須になってくるのが、meta viewportになります。

viewportについて

viewportについて

viewport(ビューポート)とは、「表示領域」のことを示します。
画面サイズ(Webページ)の横幅がviewportになります。

表示領域について

よく、PCサイトをスマートフォンで確認した際に、文字やサイト自体が小さく見えたことはありませんか。
viewportを設定していないと、コンテンツの余白や横スクロール、文字のサイズが小さくなるといった問題がでてきます。

問題を解決してくれるのが、viewportになります。
viewportを設定することにより、画面幅(表示領域)いっぱいにコンテンツや本文を合わせてくれます。

設定は、head〜/headの中にメタ情報として設定します。
書き方は以下のようになります。

viewportの設定方法

<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についての解説

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に関する様々な情報を発信しています。

最新記事

関連記事

オススメ記事

月別アーカイブ

page_top