はじめに
実務案件のコーディングはレスポンシブ対応が当たり前になってきています。テストサーバーにアップする前にある程度ローカルで検証ツールを使いながらレスポンシブコーディングをするのですが、テストサーバーにアップしてスマホで確認するまでPCとデザインが違っていると気づかない要素があるのでこの記事で紹介します。
スマホとPCでデザインが変わってしまう要素の例
スマホとPCでデザインが変わってしまう要素を当サイトを例にして紹介していこうと思います。
PCのデザイン
スマホのデザイン
スマホでデザインを確認すると
・キーワードを入力の虫メガネアイコンが消えている
・下側の検索フォームの角が丸くなっている、背景がグレーになっている
・下側の検索ボタンの色が青くなっている
PCとスマホでデザインが変わってしまう理由
ブラウザやデバイスによるデフォルトのスタイリングやユーザーエージェントスタイルシートの影響を受けている可能性があります。特に、<input> や <button> タグはデフォルトで異なるスタイルを持っていて、スマホで確認したときにデザインが違う、と気づく要素です。
PCとスマホでデザインが変わらないようにする方法
<input> や <button> タグのcolor、background-color、border-radiusのcssも忘れずに指定すれば良いです。
他にも「reset.css」を使用する方法が考えられますが、不要なcssも増えてしまうため、ページスピードの観点で自分はreset.cssは使用しないです。
まとめ
今回はスマホでブラウザチェックをするまで気づかないPCとデザインが変わってしまう要素について記事にしました。検証ツールを使用すればある程度レスポンシブコーディングができますが、<input> や <button> タグなどはスマホでブラウザチェックをするまでPCとデザインが違っていると気づかない要素なので、ブラウザチェックをして、cssを指定してPCとスマホでデザインが変わらないようにする必要があります。
