botよけったー制作記part4〜暫定レスポンシブ対応〜

PC版ということで制作を始めましたが、自分でも使いたいということで、モバイルに表示を最適化させました。まだ機能の実装も途中なので暫定対応なのですが、とりあえずiPhoneで見ても違和感ないようになりました。Androidだとどうなんでしょうか。実機がないので確認しようがないのですが、うまく表示されていることを祈ります。

やったこと

レスポンシブ対応として以下のことをしました。

CSS調整

レスポンシブ対応といえば、HTMLが1ソースでCSSで調整するのが一般的だと思います。ビューポートを設定し、メディアクエリを使用して、モバイル用にスタイルの設定や上書きを行いました。モバイルファーストな世の中だと思いますが、PCファーストで作っていたので、PC用に設定していた段組を解除していく方向で作業しました。 その他、ボタンやフォントサイズ、余白の調整や画像の非表示など設定しました。

検索欄表示切り替え処理追加

モバイルで見る際、表示領域を確保するために、検索条件欄を非表示にできるjQueryを追加しました。

検索結果へ遷移

段組を解除して縦長になる分、そのままだと検索実行時にまた検索条件欄で画面が埋まるので、検索結果欄へ遷移するようにしました。

まとめ

やっぱりモバイルファーストで組んどくべきだったなーと作業して思いました。あらかじめ設定しているCSSを解除していくというのはめんどくさいし、ソースも汚くなってしまいます。本格的な対応はまた追々やります。そのためにはモバイル対応について勉強しないと。 次はログイン機能を実装する予定です。Ajaxを使ってみたいと思っています。