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

tmb_botyoketter04 mobile

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

スポンサーリンク

やったこと

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

CSS調整

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

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

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

検索結果へ遷移

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

まとめ

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

スポンサーリンク

この記事が気に入っていただけたらシェアお願いします。励みになります。
prev botよけったー制作記part3〜お試し検索実装〜 next 制作実績、制作ツール

スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です