前回スマートフォンサイトの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ではレスポンシブは使えないので、せめてPCサイトが見れるよう、別にPCサイトだけのCSSを読み込ませます。
ちょうどバックアップ用にpc_style.cssがあるので、これを「ie_style.css」に名前を変更します。
これでやっと、公開するデータが全てそろいました。
次はいよいよホームページの公開方法「アップロード」の仕方を説明します。
>>今回作ったページ(レスポンシブデザイン)
>>サンプルデータをダウンロード(zipファイル)