ホーム > ホームページの作り方 > PC・スマホ対応のレスポンシブデザインにする

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ファイル)


次のお話

「ホームページ作成講座」に関連するオススメ記事

フリー漫画素材

無料で使える漫画素材です

ホームページの作り方

初心者向けHP作成講座

同人サークル専用HP

ホームページ作ります!

Copyright (C) 牛屋へ.com, All Rights Reserved.