既存WEBサイトをレスポンシブ対応にする１
私が勉強がてら作成/管理させていただいているHPがあります。
ピアノ教室のホームページです。
作成したのはもう3年近く前、まずは早く公開をということで私の手持ちのテンプレートと無料画像で作成しました。
このサイトはレスポンシブ対応になっていないので、スマホで見ても図のような形になります。
最近はスマホからの閲覧が主流なので、このサイトを見てきてくれた人のほとんどが見づらい状態に。さらに、レスポンシブ対応になっていないものはgoogle検索に不利になるとのうわさを聞き、この辺で思い切ってレスポンシブ対応にしようと思いました。
完成系のイメージは以下の感じ
レスポンシブ対応にしたい箇所
改良していくたびに、色々と対応項目が増えるかもしれませんが、現時点では以下を対応していきます。
- メニューを、一定px以下での閲覧の場合、プルダウン形式にする
- タイトル画像を、一定px以下での閲覧の場合、小さい画像にする
今回は、既にパソコンからの閲覧向けに作られているサイトなので、〇〇px以下の場合についてをcssでレスポンシブ対応にしていきます。
まずはレスポンシブ対応にしやすいよう、サイトの基本構造を変えます。
- メニューバーを最上部に
- 左サイドの画像を削除
では、トップページ（index.html）をいじっていきます。
左サイドの画像を削除
左サイドとメイン部分でdivで分けていたので、左サイドを削除し右側のメイン部の幅を広げました。
floatなどの若干の調整を経て、以下のように改版できました。
メニューを削除
メニューは、レスポンシブ対応のキモです。
そして少々面倒なので、まずはメニューを削除するだけにとどめておきます。
次回
メニューをヘッダー上部に作成します。
閲覧ブラウザの幅が一定以下の場合は、メニューをトグルボタンで表示させます。
ブログランキングに参加しています。
