ホームページをスマホ対応(レスポンシブ)にする最も簡単な方法

WordPressではなくHTMLのみで構築されたサイトをスマートホンやタブレットに対応させる（レスポンシブにする）ことは一苦労です。

一応、有料でホームページをスマホ＆タブレット表示に対応させるサービスを提供しているところもありますが、年数万円～数十万円の費用がかかってしまいます。 個人運営のサイトさんにとっては痛い出費になりますね；

そこで今回、私がこのサイトをスマホ表示に対応させる際に用いた、最も簡単（と思われる）でお金もかからない手法について解説したいと思います！

デバイスごとに読み込むCSSを切り替える

PC＆スマホごとに表示を変化させる方法、それは・・・

デバイスごとに読み込むCSSを切り替える

という方法です。

各デバイスごとに異なるCSSを用意することで、それぞれのデバイスに適切なスタイルでサイトを表示したり、デバイスごとに表示が必要・不必要な部分を切り替えたりすることができます。

デバイスの横幅に応じてCSSを切り替える

まずサイトのすべてのページの＜head＞＜/head＞内に記述されているCSS読み込み行を、以下の様に変更してください。

解説：

"max-device-width:480px" と "min-device-width:481px" の部分でデバイスの横幅に応じて読み込むCSSを切り替えます。

現在市販されているスマホの横幅は、一番大きなものでも480pxいくかいかないかくらいです。なのでデバイスの横幅が480px以下の場合は上のCSSを、481px以上の場合は下のCSSを読み込むようにします。

各CSSごとに要素のサイズを変更する

スマホ用のCSSで、画像などの要素のサイズを指定する際に気を付けることは、できるだけ%でサイズを指定するということです。

例えばiphone6で横幅いっぱいに画像を表示したい際は、画像の横幅を320pxあたりに指定します。しかしそれだと、iphone5s以前のサイズ（300px付近）のデバイスで見た際に画像が画面からはみ出してしまします。これではレスポンシブ対応とは言えません。

なのでこういった場合は、例えば要素に width="100%" height="auto" のように指定することで、要素がデバイスの横幅に応じて自動的にサイズを 変更するようにしましょう。

デバイスごとに要素の表示・非表示を切り替える

また、PCでは表示したいがスマホでは表示したくない要素（例えばサイドバーなど）の表示・非表示を切り替える際には、display:none;を要素に適用します。

例えばPCではサイドバーを表示したいがスマホでは表示したくない場合、以下のようなclass属性を付与したdivでサイドバーを囲みます。

＜div class="smart_none"＞

（サイドバー部分）

＜/div＞

そして、スマホ用のCSSのみに以下のようなCSS行を追加します。

.smart_none{display:none;}

するとスマホの方ではサイドバーは表示されなくなります。この方法を用いてPCとスマホとで表示・非表示の部分を切り替えていきます。

意外なほど簡単にスマホ対応サイトが完成する

スマホの普及が進む昨今、ホームページのスマホ対応はSEOにも関わってくるようになり、もはや対応しているのが当たり前となりました。

非レスポンシブサイトをレスポンシブに対応させるとなると尻込みしがちな方が多い印象ですが、以上で解説した手順でCSSとHTMLに手を加えていくだけで、意外にあっさりとスマホ対応サイトは完成します。

実際に当サイトも上記の手順ですべてのページをスマホ対応しました。かかった日数は3日ほどだったと思います。

みなさんもこの際是非、ご自身のサイトをレスポンシブ化し、集客upを図ってみてください！(´∀｀)ノ