★meta要素でビューポートを指定する
meta要素でビューポートを指定する
パソコン向けサイトをスマートフォンで表示すると、文字などが小さすぎて閲覧しづらくなります。 この問題は、ビューポートを指定することで回避できます。
ビューポート（viewport）とは、表示サイズのことです。 ビューポートは、meta要素で値を指定することで変更できます。
index.htmlに以下の記述を追加してください。
HTMLソース（index.html）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="base.css">
<title>ウェブサンプル株式会社</title>
</head>
<body>
<div id="pagebody">
<!-- ヘッダ -->
<div id="header">
<h1><a href="index.html"><img src="images/logo.png" alt="ウェブサンプル株式会社"></a></h1>
</div>
<!-- メインメニュー -->
<ul id="menu">
<li><a href="index.html">ホーム</a></li>
<li><a href="product.html">製品紹介</a></li>
<li><a href="profile.html">会社概要</a></li>
<li><a href="contact.html">お問合せ</a></li>
</ul>
<!-- ヘッダ画像 -->
<div id="img_index">
<img src="./images/img_index.png" alt="あしたをみつめるウェブサンプル株式会社">
</div>
<!-- サブメニュー（左カラム） -->
<div id="submenu">
<h2>新着情報</h2>
<ul>
<li><a href="#info0001">新商品のご案内</a></li>
<li><a href="#info0002">展示会への出展</a></li>
<li><a href="#info0003">環境への取り組み</a></li>
</ul>
</div>
<!-- インフォメーション（右カラム） -->
<div id="info">
<h3 id="info0001">新商品のご案内</h3>
<p>
<img src="images/index0001.png" alt="新商品のイメージ画像" class="infoimg_index">
あいうえおかきくけこさしすせそ（中略）
</p>
<hr>
<h3 id="info0002">展示会への出展</h3>
<p>
<img src="images/index0002.png" alt="展示会への出展のイメージ画像" class="infoimg_index">
あいうえおかきくけこさしすせそ（中略）
</p>
<hr>
<h3 id="info0003">環境への取り組み</h3>
<p>
<img src="images/index0003.png" alt="環境への取り組みのイメージ画像" class="infoimg_index">
あいうえおかきくけこさしすせそ（中略）
</p>
<hr>
</div>
<!-- フッタ -->
<div id="footer"><small>Copyright (c) ウェブサンプル株式会社 All Rights Reserved.</small></div>
</div>
</body>
</html>
今回追加したHTMLソースを確認
上記HTMLソースでは、meta要素のnameの属性の値にviewportを指定して、content属性の値に横幅や倍率を指定しています。 この変更を保存したファイルをウェブサーバーにアップロードして、それをスマートフォンで表示させると、以下のような画面となります。
スマートフォン 縦位置
スマートフォン 横位置
meta要素のcontent属性では、width=device-width, initial-scale=1, maximum-scale=1とカンマ区切りで３つの値を指定しています。 以下にそれぞれの値を詳しく見ていきましょう。
ビューポートの横幅
width=device-widthは、横幅がデバイスの横幅となるように指定しています。 ピクセル値で指定しても良いのですが、スマートフォンなどのデバイスはそれぞれモニタサイズが異なるので、 そのデバイスの横幅になるように指定しておけば、おおむねすべてのデバイスで原寸大でウェブページが表示されるようになります。
ビューポートの初期の表示倍率
initial-scale=1は、初期の表示倍率を指定しています。 値に1を指定したので1倍、つまり、そのままの倍率で表示されることになります。
ビューポートの最大の表示倍率
maximum-scale=1は、最大の表示倍率を指定しています。これは、ユーザーの操作でどこまで拡大表示を可能にさせるかということです。 値に1を指定したということは1倍を最大倍率にする、つまり、ユーザーに拡大表示操作をさせないように指定しています。
iPhoneなどのデバイスでは、横に倒すと画面も回転して横向きになりますが、 この際、maximum-scale=1にしておけば、文字のサイズはそのままに一行当たりの文字数が増える表示になります。
meta要素でビューポートの指定をしたことで、ひとまず等倍で表示させられるようになりました。 しかし、このままの状態ではウェブページがやたらと大きく表示されてしまうので、以前の画面とどちらが見やすいか現時点では何とも言えません。
この状態からスマートフォンで見やすくなるようにスタイリングを調整していきますが、 次回は、様々なビューポート指定を試して、もう少しだけビューポートについての理解を深めます。
まとめ
- ビューポート（viewport）は、meta要素で値を指定できる
- meta要素のnameの属性の値にviewportを指定して、content属性の値に横幅や倍率を指定する
- スマートフォンなどのデバイスで、ウェブページが原寸大で表示されるようにビューポートを指定する
| <前へ | 目次へ | 次へ> |
Sponsors
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる！【A8.net】
