スマートフォンで見るためのレスポンシブルデザインを1時間半で作成
先日宣言したとおり、スマートフォン対応のレスポンシブルデザインに変更仕様と考えましたが、
どうせやるなら、何か際立ったことをしたいということで…
- 現在のHTMLをほぼ触らない（クラス等を追加しない）。
- BootStrapなど外部ファイルに頼らない。
- 画像は全て使いまわし。
- 3時間以内で制作。
上記四つの項目で制作を開始。
結論
<head></head>の中の<meta name="viewport" content="width=device-width, initial-scale=1">だけは追記が必要です。
それ以外はcssの中のレイアウトの項目の殆どを
@media only screen and (min-width: 940px)
の中に移してやって、新たにスマートフォン用に
@media only screen and (max-width: 480px)
タブレット用に
@media only screen and (min-width: 480px)
を作って、Width 100％等の設定をしてやるだけでほぼ完了。
レイアウトがシンプルなので、スマホとタブレットはグローバルナビのレイアウトのみ変更しています。
かかった時間は1時間半程度。実際にこのブログを書きながら何箇所か修正した時間を合わせても2時間もかかりません。
レスポンシブルデザインは、「Media Queries」さえ使えれば、短時間での簡易対応が可能なため、今後もどんどん使用すべきノウハウであると実感します。
