HTMLでWebサイトを作成した表示をスマホで確認すると、全体的にコンテンツが小さくて見づらい。Webサイトを小さいスマホ画面で見やすく表示するためのレスポンシブ化が不足してることに気づく。
Webサイトをレスポンシブ化するためには、メディアクエリでブレイクポイントを決めてスマホ用のレイアウトに変えるだけではなく、HTMLでviewport(ビューポート)を記述して設定しておくことが必要だった。
HTMLのviewportとは何か？どのように設定すればいいのかを覚えておこうと思います。
viewportとは何か？HTMLで設定が必要なケース
viewport(ビューポート)とは、Webサイトのページが表示される画面の領域のことを言います。使用してるPCやスマホでどこかのWebサイトを開いて画面に表示したとき視野に入った領域を言います。
PC画面で表示させたHTMLページの場合は上の画像のようにPC画面の表示領域内に合ったサイズで表示できます。そして表示領域に入りきらないコンテンツはスクロールして表示することができます。
PC表示だけ見た場合は、特にviewportの設定が必要なケースなのか判断できません。
スマホ表示でHTMLページを表示するとviewportが必要だと思えます。
PC画面の幅をスマホ画面全体を表示領域とする小さな画面にブラウザがページ表示しようとするので表示全体が縮小してしまうからです。
このときviewportをHTMLのメタタグで設定することによって仮装的なビューポートウィンドウの画面領域を表示できます。
仮装的なビューポートウィンドウを表示することで、スマホ画面とPC画面のどちらでレンダリングするかを問わず、それぞれWebサイトのページ表示してる端末の画面サイズに合わせてページを表示することができます。
HTMLでviewportを設定する適切な書き方
HTMLでviewportを設定する場合は、metaタグでviewportの設定をすることによって、ブラウザがビューポートにレンダリングしてくれるようになります。
HTMLでviewportを設定する一番適切な書き方は、metaタグに name属性を書き、name属性の値でviewportの指定をします。
そしてcontent属性を書きcontentのプロパティとしてwidth=device-width、プロパティの区切りにカンマを使用してinitial-scale=1.0と以下のmeta要素のような書き方をします。
<meta name="viewport" content="width=device-width, initial-scale=1">
viewportを指定したメタ要素はHTMLファイルの<head>と</head>の間に記述します。
HTMLファイルのheadに記述するviewport指定の書き方は、上記のHTMLの書き方がWebサイトをスマホ画面で表示するときに一番適切でした。
適切な理由
content=”width=device-width”
viewportの設定で使用するcontentのプロパティの記述「width=device-width」は、Webサイトを訪問するスマホユーザーの端末ごとのサイズに応じた表示ができるのでレスポンシブ化することに適してます。
initial-scale=1
initial-scaleは初期の表示倍率を指定するときに書きます。指定値に1を指定することで表示する画面領域が1倍で表示できるため、小さいスマホ画面でも見やすいコンテンツにできます。
上の画像のようにmeta要素でHTMLにビューポート設定することで、かなりスマホ画面の表示で見やすくなりました。
viewportのプロパティの役割を一つずつ覚える
<meta name="viewport" content="width=device-width, initial-scale=1">
上記のviewport記述セットと、それぞれのWebサイトのメディアクエリの使用で適切なレスポンシブなWebサイト構築が可能ですが、HTMLでviewportを設定するときにメタ要素の中に記述できるプロパティの種類がいくつかあります。
- device-widthもしくはwidth=○○px
- initial-scale
- maximum-scale
- minimum-scale
- user-scalable
それぞれに役割があって、ページのサイズとかスケーリングの制御をしてブラウザに指示を与えることができます。
viewportのプロパティはどんな役割を果たすのか一つずつ覚えておこうと思います。
device-widthとかwidth=○○で幅指定
viewportを記述するcontentのプロパティにwidth=device-widthを記述すると拡大率100%で各端末サイズに適した幅指定ができます。
device-widthで幅指定するのがベストかと思いますが、width=○○で幅をピクセル指定にすることもできます。ピクセル数は200～10000の範囲で幅指定できて、初期値は980です。
例えばcontent=”width=480″にすると480pxのビューポートウィンドウができるという感じです。
しかし画面よりviewport幅が大きいと、はみ出してしまうことがあり横方向へのスクロールが発生することがあります。
横方向へのスクロールするコンテンツを意図して作成してるなら別ですが、viewportの設定によって発生した意図しない横スクロールは避けたいですね。
それぞれのページの幅指定でも変わるのかもしれませんが、やはりデバイスを本来の向きで使ったときの幅に固定することもできるdevice-widthで幅指定するのがベストかと思えます。
viewportの初期表示倍率の記述
viewport の幅を拡大や縮小をできるようにして、ブラウザウィンドウの幅に合うように初期の表示倍率を指定するviewportのプロパティが initial-scale です。
簡単に言うと初めてその画面を開いた時に表示されるデフォルトの拡大率です。
上の画像はinitial-scale=1
initial-scaleの値に1を指定すると1倍になる。
そしてinitial-scale=0.5にした場合の画面表示を見ると、初期に表示した拡大倍率が0.5倍になり、initial-scale=1と比べると表示は小さく見える。
拡大率の数値なのでinitial-scale=1.5とか数値を増やすと(上の画像)画面幅におさまらなくなり横スクロールが発生したりコンテンツが大きくなりすぎたりすることもあります。
またinitial-scale=1の場合は、自動的にwidth=device-widthに決定されます。逆にinitial-scale=1を使わずdevice-widthだけでもinitial-scale=1になります。
maximum-scaleとminimum-scale
maximum-scale
maximum-scaleは最大の拡大倍率を指定するviewportのプロパティです。
0より大きく10未満の値を指定できます。初期値は1.6。
maximum-scaleに拡大倍率をいくつか指定して最大までズームして見ると違いを覚えやすくなります。
下画像はmaximum-scale=2で最大までズームしたクマさん
次にmaximum-scale=10にして最大までズームしたクマさん
maximum-scale=10の場合、もうクマさんがぼやけるくらいズームできます。
またviewportの記述でinitial-scale=1, maximum-scale=1と指定すると、画面をズームすることができなくなるので記述するときは注意が必要です。
ユーザビリティを考慮したviewportの設定をしたい場合はズームできるようにしておきたいのでmaximum-scale=1をビューポート設定で使うときは気をつけたい。
minimum-scale
minimum-scaleは最小縮小倍率を指定するviewportのプロパティです。
0より大きく10未満の値を指定することができて、初期値は0.25です。
例えばmaximum-scaleの初期値1.6とminimum-scaleの初期値0.25なら最大1.6倍と最小0.25倍の範囲で拡大縮小が可能ということですね。
<meta name="viewport" content="minimum-scale=0.25 , maximum-scale=1.6">
viewportで設定するmaximum-scaleとminimum-scaleは正直、理解があまり出来なくて覚えきれていないです(特にminimum-scale)
個人的になりますが、maximum-scaleとminimum-scaleをviewportの設定に加えることで表示がおかしくなるなら、無難にcontent=”width=device-width, initial-scale=1.0”だけを使おうということに落ち着いてます。
ズーム操作を可能にするかしないか
user-scalableはズーム操作を可能にするかしないかをコントロール出来ます。
- user-scalable=yesでズーム操作可能。初期値もyesになってます。
- user-scalable=noにするとズーム操作は出来なくなります。
私もそうですが、けっこう表示をズームしてみることがあります。例えばちょっとこの文字ぼやけて読みづらいなって場合や、細かいコンテンツ部分を確認したい場合とか。
viewportをHTMLで記述するときuser-scalable=noを加えてズーム機能が動作しないがために、画面に顔をくっつけて見るようになってしまうくらいならズーム操作できるuser-scalable=yesがとても親切だと思えます。
まとめ
HTMLの「viewport」とは設定をどのようにすればいいのか覚えてみた限り、Webサイトのレスポンシブ化には必ず必要なことだと思えました。
Webサイトによっては、width=device-widthとinitial-scale=1.0以外のviewportのプロパティを使い分ける必要があるかもしれません。レスポンシブ化するWebサイトをスマホ画面のとき、どのように表示したいかで違いが出ると思うからです。
そんなときには、今回紹介したviewportの設定に使用するプロパティを思い出してレスポンシブ化するビューポート表示領域のコントロールに役立ててください。
