creatersnest

スマホサイトを作るときの適切なviewport設定方法


スマートフォンの普及によりWeb制作者にとって必須となっているスマートフォン
サイト。なるべく、手間をかけずに仕上げたいですよね。
今回は、 スマートフォンサイト制作に必須の知識であるviewport設定方法について
ご説明していきます。

 

viewportとは

viewportとは何でしょうか。

一言で表すと「表示領域」のことです。
つまり、各デバイスで表示されている領域をviewportと呼んでいます。

 

【viewport設定前の見え方 サンプル】
これでは、画像もテキストも小さくてよく見えませんね。

img_設定前

 

viewportを設定することによって、 各デバイスにフィットした形で表示できるよう
になります。

 

 

 

viewportの書き方

viewportはどのように記述すればよいのでしょうか。

 

viewportの基本構文はとても簡単です。
以下のように、HTMLファイルに記述します。

このメタタグを1行記述することで、viewportを設定することができます。
とても簡単ですね。

 

 viewport プロパティの種類

次に、viewportのプロパティについて見ていきましょう。

プロパティと各プロパティに指定可能な値は以下の6つです。

 

width:viewportの横幅を指定するプロパティ。
指定値:200~10000px,device-width(初期値:980px)
device-widthを指定した場合、そのデバイスの横幅に合わせて表示されます。

 

height:viewportの縦幅を指定するプロパティ。
指定値:233~10000px,device-height(初期値:自動)
device-heightを指定した場合、そのデバイスの縦幅に合わせて表示されます。
通常、あまり使用しないプロパティです。

 

initial-scale:viewportの倍率の初期値を指定するプロパティ。
指定値:minimum-scale~maximum-scaleの範囲
0.5は半分に、1.5は1.5倍に表示されます。

 

minimum-scale:ユーザーがズームできる最小倍率を指定するプロパティ。
指定値:0~10(初期値:0.25px)

 

maximum-scale:ユーザーがズームできる最大倍率を指定するプロパティ。
指定値:0~10(初期値:1.6px)

 

user-scalable:ユーザーのズーム操作を許可するかどうかを指定するプロパティ。
指定値:yes,no(初期値:yes)
yesは許可する、noは無効となります。

 

例として、以下のようなviewportを設定してみます。

<HTMLサンプル>

<表示結果>
viewportを設定した結果、デバイスに合わせて表示されるようになりました。

img_設定後

 

まとめ

いかがでしたでしょうか。
viewportはスマートフォンサイト制作ならではの設定です。
レスポンシブデザインを実現する手法の1つとして、ぜひ、取り入れていきたい技
術ですね。

 

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Next Article【Webデザイン初心者必見】簡単に複数のテキストレイヤーを整列させる方法