既存サイトのレスポンシブデザイン対応にあたってのメモ

  • このエントリーをはてなブックマークに追加

レスポンシブデザインが主流になりつつあるが、既存の非レスポンシブなサイトのレスポンシブ対応というものに初めてトライしてみた。

今回はWordPressではなく普通の静的なhtmlサイト。

細かい点は割愛するが、ポイントとなる箇所を忘れないようメモ。

・モバイル用のcssを用意し、iPadからモバイルとするなら

iPadまではPC扱いするなら

などとして{}内にモバイル用のstyleを記述
・headタグ内に

を追加
・メインコンテンツやサイドバー部分のfloatを解除
・横幅をピクセル指定ではなくパーセンテージ指定に
・グローバルメニュー部分は、好みによるが、典型的なのはJQueryとcssでタップした時にプルダウンが出てくるスタイルとする(ソースは探せばいくらでも見つかる)

元のサイトのソースがきれいに書かれていればあっさりと対応可能。
次回は、お気に入りのWPのテーマでレスポンシブ対応していないがPC向けデザインが好きなものがあるので、それの対応をしてみよう。


サブコンテンツ