ある程度レイアウトが完成したら、ブラウザで表示を確認してみましょう。
パソコン幅表示の確認
完成見本と見合わせながらご、表示を確認ください。 チェック事項としては以下のようなものがあります。
- フルスクリーン幅とmax-whitdh:1140px幅部分が分かれているか
- 横並び部分が崩れていないか
- 数字の下に下線はあるか
- 店舗情報(Open/Closeなど)の順番は見本通りか
スマートフォン幅表示の確認
Googlechromeやfirefoxでは、検証ツールにスマートフォン表示の確認ボタンがあります。
こちらをお使いいただくとスマートフォン幅表示の確認がしやすいです。
下図はchromeのものです。
まずは表示領域よりも横にはみ出している要素が無いかを確認しましょう。
次に、パソコン幅表示と同様に、レイアウト崩れが無いかをチェックしていってください。
修正方法が分からない部分はご質問ください。 質問時にはコードを確認できるよう、作成中のフォルダごと圧縮して添付して下さい。