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