PC・スマホ対応のレスポンシブデザインにする
前回スマートフォンサイトのCSSを作成しましたので、今度は画面の幅でCSSが切り替わる設定を行います。ちなみに同じHTMLで、スマホ・PCの両方を見れるコーディング方法をレスポンシブデザインと呼びます。
一昔前は、PCサイトとスマートフォンサイトと二種類のホームページを用意して、デバイスで切り替えていましたが、メンテナンス性の良さからか、レスポンシブが主流になってきました。
昔は私もアンチレスポンシブ派だったんですけどねー・・時代の流れですか・・・。
ともあれ、ちょっと面倒ですが、今まで作ってきた8つ「HTML」全てのhead内に、下記二文を追加してください。（最初に記述しておけばよかった・・・）
HTML（index.html～contact.html）
|
1 2 3 |
<meta name="viewport" content="width=device-width,initial-scale=1.0" /> <!--[if (gte IE 6)&(lte IE 8)]><link rel="stylesheet" type="text/css" media="all" href="ie_style.css" /> <![endif]--> |
これはviewportといって、画面幅CSSを切り替える際に、必要なコードになります。
もう一つは後ほど説明します。
次に、前回作成したスマホ用のstyle.cssを下記内容でくくります。
CSS（style.css）
|
1 2 3 4 5 |
/*SPのCSS はじめ*/ @media screen and (max-width:640px) { スマートフォンサイトのCSS } /*SPのCSS おわり*/ |
その作業がおわったら、バックアップをとっておいたpc_style.cssの中身をコピーしてstyle.css内に下記内容でくくります。
CSS（style.css）
|
1 2 3 4 5 |
/*PCのCSS はじめ*/ @media screen and (min-width:640px) { PCサイトのCSS } /*PCのCSS おわり*/ |
画面が640px以上だとPCサイトのCSSを、それ以下ならスマホサイトのCSSを読み込んでねって内容になっています。
この640pxってのはスマホの最低幅320pxを2倍にした数字になります。
スマートフォンは基本、画面をきれいに見せるために、倍の解像度で表示させるようになっています。（ちなみにこれをRetenaといいます）
ブラウザの横幅を伸ばしたり縮めたりしてみてください。
一定の幅でPCとスマホのレイアウトが切り替わったら成功です。
これで、コーディング作業は終了ー・・・と思いきや、実は最後にもうひと手間あります。
実は先ほどCSSに記載した「メディアクエリ」は、古いブラウザに対応していません。
このままIE8でみると、レイアウトがぐっちゃぐちゃになります。
そこで、さかのぼってIE8でも見れるように、するのがさっきのもう一つのコードです。
|
1 2 |
<!--[if (gte IE 6)&(lte IE 8)]><link rel="stylesheet" type="text/css" media="all" href="ie_style.css" /> <![endif]--> |
IE8ではレスポンシブは使えないので、せめてPCサイトが見れるよう、別にPCサイトだけのCSSを読み込ませます。
ちょうどバックアップ用にpc_style.cssがあるので、これを「ie_style.css」に名前を変更します。
これでやっと、公開するデータが全てそろいました。
次はいよいよホームページの公開方法「アップロード」の仕方を説明します。
＞＞今回作ったページ（レスポンシブデザイン）
＞＞サンプルデータをダウンロード（zipファイル）
- 次のお話
- アップロードしてホームページを公開する
