PC・スマホ対応のレスポンシブデザインにする

前回スマートフォンサイトのCSSを作成しましたので、今度は画面の幅でCSSが切り替わる設定を行います。

ちなみに同じHTMLで、スマホ・PCの両方を見れるコーディング方法をレスポンシブデザインと呼びます。

一昔前は、PCサイトとスマートフォンサイトと二種類のホームページを用意して、デバイスで切り替えていましたが、メンテナンス性の良さからか、レスポンシブが主流になってきました。

レスポンシブデザインのメリット

昔は私もアンチレスポンシブ派だったんですけどねー・・時代の流れですか・・・。

ともあれ、ちょっと面倒ですが、今まで作ってきた8つ「HTML」全てのhead内に、下記二文を追加してください。(最初に記述しておけばよかった・・・)


HTML(index.html~contact.html)


これはviewportといって、画面幅CSSを切り替える際に、必要なコードになります。

もう一つは後ほど説明します。

次に、前回作成したスマホ用のstyle.cssを下記内容でくくります。


CSS(style.css)


その作業がおわったら、バックアップをとっておいたpc_style.cssの中身をコピーしてstyle.css内に下記内容でくくります。


CSS(style.css)


画面が640px以上だとPCサイトのCSSを、それ以下ならスマホサイトのCSSを読み込んでねって内容になっています。

この640pxってのはスマホの最低幅320pxを2倍にした数字になります。

スマートフォンは基本、画面をきれいに見せるために、倍の解像度で表示させるようになっています。(ちなみにこれをRetenaといいます)

ブラウザの横幅を伸ばしたり縮めたりしてみてください。

一定の幅でPCとスマホのレイアウトが切り替わったら成功です。

レスポンシブデザインの確認方法

これで、コーディング作業は終了ー・・・と思いきや、実は最後にもうひと手間あります。

実は先ほどCSSに記載した「メディアクエリ」は、古いブラウザに対応していません。

このままIE8でみると、レイアウトがぐっちゃぐちゃになります。

IE8にメディアクエリは使えない

そこで、さかのぼってIE8でも見れるように、するのがさっきのもう一つのコードです。



IE8ではレスポンシブは使えないので、せめてPCサイトが見れるよう、別にPCサイトだけのCSSを読み込ませます。

ちょうどバックアップ用にpc_style.cssがあるので、これを「ie_style.css」に名前を変更します。

これでやっと、公開するデータが全てそろいました。

次はいよいよホームページの公開方法「アップロード」の仕方を説明します。


>>今回作ったページ(レスポンシブデザイン)

>>サンプルデータをダウンロード(zipファイル)
次のお話