まだスマートフォンに対応していないwebマスターの皆さんへ、PCサイトを最速でレスポンシブウェブデザインに対応しようという内容で紹介していこうと思います。
普段私の場合、ゼロからレスポンシブウェブデザインを作るなら、モバイルファーストの手法で、スマートフォンサイトのデザインから作っていく方法をとっていますが、すでにPCサイトがあってスタイルシートもごちゃごちゃでモバイルファーストで対応するには時間がもったいない！事がよくあります。
また、PCからスマートフォンという流れのレスポンシブなら、古いIEへの対応も簡単です。古いIEはメディアクエリを読まないから、PC用に書いたスタイルシートが反映されます。
さて、進めましょう。
先にPCサイトを読み込みます！
流れとしては、PCサイトがある方が対象なので、すでにスタイルシートがあると思いますが、まず開いて頂き、最後にメディアクエリの条件分岐を行い、スマートフォン用のスタイルを書きます。
簡単でしょ？
さあ、順に作業していきましょう。
ヘッダーへの設定
IE対応のメタタグとビューポートを入れておきましょう。initial-scale=1はスマートフォンのピンチ操作やだぶるタップで拡大できるという意味です。あと、当然ですがスタイルシートも読み込みます。
CSSメディアクエリによる条件分岐を書きます
スタイルシートの一番下からはじめます。
@media screen and (max-width:767px){/*767px以下の記述 タブレットなど*/}
@media screen and (max-width:479px){/*479px以下の記述* 大きめのスマートフォンなど/}
条件分岐をどこで行うかのポイントは曖昧です。私の場合はiPadではPCデザインで見たいと思う方なので、iPad以下のサイズをスマートフォン用のデザインにしようと思います。
widthを100%にする
あとは、スタイルシートでwidthの部分を100%などに指定するだけで、スマートフォン対応になります。ポイントはPC用のスタイルを引き継ぐので、その辺を考慮して、変更するものだけを書いていきます。
- 相対指定にしますので、widthには％などを使用しましょう。
- コンテンツエリアのwidthにpaddingの設定がある場合paddingも%指定にして、widthから引くといいでしょう。
ex：padding:3%;width:94%;など。 - wrapper部分にoverflow:hiddenを入れるのもいいでしょう。はみ出した部分を隠してしまいます。はみ出したコンテンツがあると右や左にずれてスクロールしにくいですよね？
imgのwidth
下記コードに変更しましょう。スマートフォンの場合、imgの幅は自動的に最大サイズが表示されます。小さい画像は小さいままです。大きい画像は画面サイズの幅に最適化されます。
img {
max-width: 100%;
height: auto;
}
まとめ
難しいのはメニュー部分かと思います。かっこ良くするにはjQueryなどで対応するといいともいます。レスポンシブ対応プラグインを入れると楽に設定できます。
オリジナルのデザインにしたいなら、jQueryを頑張りましょう。window.load resizeなどで書きます。windowのwidthを取得して、条件分岐をします。スマホならメニュー部分のjsを実装するなど。
jQueryを使わなくても、縦のリストか２列のリストでもいいでしょう。
ソフトやサービスでスマートフォンサイトを作りたい方はこちらのページもご覧ください。
スマートフォンサイト作成ソフト
