PCでもスマホでも見られるホームページの作り方

PCでもスマホでも見られるホームページの作り方


画面解像度で表示するデザインを切り替える

近年、ホームページによってはアクセスログを分析すると、半分以上はスマートフォンからのアクセスということもあるようです。中高生から大学生をターゲットにしたサイトであれば、半分どころではなくほとんどがスマホからのアクセスかもしれません。ただ、それでもPCからアクセスしてくる人はゼロではないので、今、ウェブサイトを作るのであればデザイン的にPCとスマホのどちらにも対応しておくべきでしょう。では、どのようにして両方に対応すればいいのかというと、近年、よく用いられているのがアクセス端末の画面解像度を分析し、それによってスタイルシートでの指定を切り替えるというやり方です。たとえば、一つのスタイルシートの中に解像度が幅768px以下の端末がアクセスしてきた場合の設定と、それ以上の端末がアクセスしてきた場合の設定を書いておき、スマホがアクセスしてきたら前者の設定で表示させるのです。

レスポンシブデザインで作れば効率がいい

端末の横幅をチェックしてデザインを可変させるのは「レスポンシブデザイン」と呼ばれており、端末のユーザーエージェント情報をPHPやmod_rewriteでチェックしてデザインを切り替えるやり方と比べると設定が簡単というメリットがあります。ただ、スタイルシートでの設定よりも高解像度のスマホがアクセスしてきた場合はPC用のデザインになってしまうので、スマホからのアクセスは絶対にスマホ用のデザインを表示させるというのであれば、ユーザーエージェントで切り替えた方が確実です。とはいえ、レスポンシブデザインで作るなら用意するスタイルシートは一つでよく、効率のいいホームページ作成が可能になります。

ホームページ制作は業者に依頼して作ってもらう事が出来ますが、自分で作るのなら勉強する必要があります。