運用型広告
Google・Yahoo!のリスティング広告はもちろん、Facebook・Instagram・LINE・XなどのSNS広告も運用が可能です。
Web制作
レスポンシブの要「viewport」の意味を理解しよう！
ページをレスポンシブ対応させる時HTMLに
<meta name="viewport" content="width=device-width, initial-scale=1.0">をコピペしている方が多いと思いますが
このコードの構造について今回深堀りしていきます！
目次
そもそもviewportとは
viewportとは「表示領域」のこと、
PCではブラウザウィンドウの表示領域のことになります。
そしてブラウザはこのviewportにレンダリングを行います。
・viewportで設定できる主な要素
width（横幅）
Viewportの横幅をピクセル単位で指定します。
ちなみに初期値が設定されており960pxです。
冒頭の「width=device-width」は
viewportの幅を
「実際の解像度ではなく端末やブラウザに合わせた値を返す」と設定するため
メディアクエリでのブレイクポイントの切り替えをを可能にしています。
height（縦幅）
使用する頻度は少ないですが同じく縦幅についても指定可能です。
initial-scale (初期倍率)
ページが表示された最初の倍率を指定します。
width=device-widthを指定していると
「initial-scale=1」が自動的に設定されます。
maximum-scale（最大倍率）minimum-scale（最小倍率）
それぞれ最大拡大倍率と最小縮小倍率の指定になります。
user-scalable （ズーム操作の可否）
ページを閲覧しているユーザーのズームの可否を指定します。
初期値は「user-scalable=yes」でズームが許可されている状態です。
・まとめ
<meta name="viewport" content="width=device-width, initial-scale=1.0">とは
「ブラウザがレンダリングを行う表示領域を端末やブラウザに合わせた値とし」
「初期倍率を1と設定している」
状態の事になります。
これは必要最低限のviewport設定で
最近はスマートフォンごとに機種独自の画面仕様があったりと
上記のタグだけでは不十分な場合も。
そんなケースについても今後紹介できればと思います！
Request Materials資料請求
Webマーケティングにおけるパフォーマンス改善のための資料がダウンロードできます。
- ● web広告の改善事例が知りたい方
- ● 現在お願いしている代理店との比較をしたい方
- ● サービスの全体像・料金を知りたい方