ホームページをスマホに対応させる

スマートフォンの急速な普及に合わせて、本サイトもスマホ対応に着手しました。スマホ対応には大きく2通りの方法があります。
一つはPCサイトとは全く別にスマホ専用のページを用意する方法。
もう一つはブラウザの横幅に応じてデザインが切り替わるレスポンシブデザイン。
今回は後者のレスポンシブデザインを採用しました。

レスポンシブデザインの特徴はブラウザの横幅に応じて、見た目が切り替わる点にあります。試しに本サイトを表示しているブラウザの横幅を狭めてみてください。



横幅が480px以下になると、自動的にスマホ用にデザインへと切り替わります。
その仕組みは思いのほか単純です。HTMLファイルのheadに

<meta name="viewport" content="width=device-width">
<link href="mobile.css" rel="stylesheet" type="text/css" media="(max-width:480px)">
<link href="pc.css" rel="stylesheet" type="text/css" media="(min-width:481px)">

と記述。
mobile.cssにはスマホ用のデザインを、pc.cssにはPC用のデザインを入力していきます。

街中に出ればスマホがいかに普及しているかが良く分かります。特に若年層に訴求するにはスマホ対応は必須とも言えるでしょう。PCがメインのユーザーはついついPCで閲覧してしまいますが、それと同じようにスマホに慣れた人たちは目も前にPCがあってもスマホで検索・閲覧しようとするものです。
さらにスマホなら、いつでも相手にホームページを見せることが出来ます。
「日曜日はここに通っているの。」
とスマホを取り出し、Webサイトを見せることも出来るのです。伝道という意味からも、スマホ対応はなるべく早めに着手されることをおすすめします。