スマートフォンでPCサイトを表示する－ウェブ制作チュートリアル

トップページ > ウェブ制作チュートリアル > スマートフォンでPCサイトを表示する

第23章　スマートフォンへの対応

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

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

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

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

スマートフォン縦位置

スマートフォン横位置

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

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

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

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

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

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

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

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

まとめ

制作してきたサンプルサイトが、スマートフォンではどのように表示されるのか確認する
パソコン向けに作られたウェブページは、スマートフォンでは小さく表示されがちでそのままでは見づらい
スマートフォンなどのデバイスでは、ビューポートと呼ばれる表示設定でウェブサイトの表示サイズが決まる

<前へ

目次へ

次へ>