携帯・スマートフォンサイト作成入門スマートフォン用ページが自動縮小されないようにするホームページ作成/携帯・スマートフォンサイト作成入門スマートフォン用ページが自動縮小されないようにするスマートフォン用にウェブページを作っても、コンテンツが多ければ自動的に縮小されて表示されます。これは、PC用ウェブサイトをうまく閲覧するためには必要な機能ですが、スマートフォン用にデザインしたページの表示では少々困ります。そこで、自動縮小を防ぐ「viewport」の記述を使ってみましょう。文宏ホームページ作成ガイドPC用サイトは縮小されて表示されるスマートフォンを使って「PC向けに作られたウェブページ」を閲覧すると、たいてい全体が縮小されて表示されます。これはスマートフォン向けにページを作った場合でも同様で、コンテンツが多くなると自動的に縮小されて表示されます。下図は、前記事「スマートフォンで押しやすいボタン型リンクを作るCSS」で紹介したサンプルページです。スマートフォンで表示させれば、左側のように見えるはずです。これは、HTML内に「自動縮小を防ぐ対策」を記述しているからです。それがなければ、右側のように縮小されて表示されてしまいます。自動縮小を防いだ例(左側)と、何も指定しなかった例(右側)この機能は、PC向けに作られたウェブサイトをうまく閲覧するためには便利です。スマートフォンの画面解像度はPC用よりも低いので、実寸サイズでPC向けページを表示すると、横スクロールがたくさん必要になったり、レイアウトが崩れたりする可能性があります。それを防ぐため、「表示領域の横幅がもっと広い場合」を想定して描画した後、実際の画面サイズに合うまで縮小して表示しています。閲覧者は、縮小表示された画面を、必要に応じて拡大して操作する自動縮小を制御するmeta要素「viewport」この自動縮小機能は、PC向けページの表示には便利でも、スマートフォン向けにデザインされたページの表示には困ります。低い解像度でもうまく閲覧できるようにレイアウトを工夫しているのに、それが無駄になってしまうわけですから。meta要素で1行加えるだけそのために、「viewport」という「自動縮小を制御する方法」が用意されています。これを使うと、自動縮小を無効にしたり、(描画の仮想サイズを指定することで)縮小の度合いを指定したりできます。HTML中にmeta要素を使って1行を記述するだけなので、とても簡単です。スマートフォン向けのウェブページを作る際には、このviewportの指定を必ず記述するようにしておくと良いでしょう。今回は、この自動縮小を制御するviewportの記述方法についてご紹介致します。それでは、自動縮小を制御するための具体的な記述方法を見てみましょう。About公式SNS日々の生活や仕事を楽しむための情報を毎日お届けします。