★スマートフォンでPCサイトを表示する

スマートフォンでPCサイトを表示する

第23章では、ウェブサイトをパソコンだけではなく、スマートフォンでも閲覧しやすいようにスタイル指定していきます。
まずは、制作してきたサンプルサイトが、スマートフォンではどのように表示されるのか確認してみましょう。

これまでに制作してきたサンプルサイトは、パソコンで閲覧される場合のみを想定してきました。
このサンプルサイトをスマートフォンで表示させると、以下のような画面となります。

スマートフォン 縦位置

スマートフォン 横位置

上図は、iPhone 4Sでサンプルサイトを開いた場合の画面です。
画面には、パソコン向けにデザインされたウェブページがそのまま表示されています。
スマートフォンの画面はパソコンのモニタに比べると小さいため、表示される文字が小さく、大変読みづらい状態になってしまっています。

パソコンだけを意識して制作してきたウェブサイトが、スマートフォン上でこのような表示になるのは、ビューポート（viewport）と呼ばれる表示サイズの設定が原因です。

iPhoneではビューポートが980×1470ピクセルに初期設定されており、横幅980ピクセルのものを画面に合わせて表示するようになっています。
サンプルサイトは横幅を1000ピクセルにして制作しているため、iPhoneの画面全面にほぼピッタリと収まって表示されています。

よく目を凝らせば読めなくもないですが、やはり文字などが小さすぎて閲覧しづらくなっています。
これを回避するには、ビューポート（viewport）を変更してやる必要があります。
次回、ビューポートを変更していきましょう。

スマートフォンをお持ちでない場合

スマートフォンをお持ちでない場合には、表示確認が出来ないと思います。
また、お持ちの場合にも、スマートフォンで確認するには、作成したウェブサイトをサーバーへアップロードして、インターネット経由で表示させる必要があります。
このチュートリアルでは、まだサーバーへのファイルのアップロード方法やウェブサイトの公開方法の解説をしていないので、現時点ではスマートフォンでの表示確認が出来ないかもしれません。

しかし、そのような場合にもぜひ読み進めていただき、記載されている通りに入力して制作を進めることをお勧めします。
スマートフォンが手元に無くて表示確認が出来なくても、サンプルとして掲載されている画面で、だいたいどんな表示結果になるのか把握しながら、HTMLソースとCSSソースをそのまま追加していけば制作を進めることができます。
正しく制作できているのかどうか分からず不安かもしれませんが、あとで友人・知人にお願いしてスマートフォンでの表示を確認させてもらえば良いでしょう。

尚、この後に解説する「メディアクエリ」の指定をHTMLソースに追加した後からは、パソコン上であってもブラウザの横幅を小さく（今回の作例の場合には800ピクセル以下に）リサイズすることで、
ある程度どんな表示になるのか確認できるようになります。