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

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

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

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

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

スマートフォン 縦位置
スマートフォン 横位置

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

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

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

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

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

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

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

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

まとめ
  1. 制作してきたサンプルサイトが、スマートフォンではどのように表示されるのか確認する
  2. パソコン向けに作られたウェブページは、スマートフォンでは小さく表示されがちでそのままでは見づらい
  3. スマートフォンなどのデバイスでは、ビューポートと呼ばれる表示設定でウェブサイトの表示サイズが決まる
<前へ 目次へ 次へ>
▲ページ先頭へ
トップページ  > ウェブ制作チュートリアル  > スマートフォンでPCサイトを表示する
PR
MuuMuu Domain!
ドメイン取るならお名前.com
さくらのレンタルサーバ
ロリポップ!レンタルサーバー
HTMLクイックリファレンスについて
© HTMQ