既存WEBサイトをレスポンシブ対応にする1

HTML/css(レスポンシブ対応)HTML, トグル, メニュー, レスポンシブ対応

私が勉強がてら作成/管理させていただいているHPがあります。

ピアノ教室のホームページです。

作成したのはもう3年近く前、まずは早く公開をということで私の手持ちのテンプレートと無料画像で作成しました。

このサイトはレスポンシブ対応になっていないので、スマホで見ても図のような形になります。

最近はスマホからの閲覧が主流なので、このサイトを見てきてくれた人のほとんどが見づらい状態に。さらに、レスポンシブ対応になっていないものはgoogle検索に不利になるとのうわさを聞き、この辺で思い切ってレスポンシブ対応にしようと思いました。

完成系のイメージは以下の感じ

レスポンシブ対応にしたい箇所

改良していくたびに、色々と対応項目が増えるかもしれませんが、現時点では以下を対応していきます。

  • メニューを、一定px以下での閲覧の場合、プルダウン形式にする
  • タイトル画像を、一定px以下での閲覧の場合、小さい画像にする

今回は、既にパソコンからの閲覧向けに作られているサイトなので、〇〇px以下の場合についてをcssでレスポンシブ対応にしていきます。

まずはレスポンシブ対応にしやすいよう、サイトの基本構造を変えます。

  • メニューバーを最上部に
  • 左サイドの画像を削除

では、トップページ(index.html)をいじっていきます。

左サイドの画像を削除

左サイドとメイン部分でdivで分けていたので、左サイドを削除し右側のメイン部の幅を広げました。

floatなどの若干の調整を経て、以下のように改版できました。

メニューを削除

メニューは、レスポンシブ対応のキモです。

そして少々面倒なので、まずはメニューを削除するだけにとどめておきます。

次回

メニューをヘッダー上部に作成します。

閲覧ブラウザの幅が一定以下の場合は、メニューをトグルボタンで表示させます。

ブログランキングに参加しています。