ここまでに作ってきたヘアサロンサイト（PC,SP）を見直してみましょう。
1.パソコン幅での表示確認
各エリアの幅
ページ全体を見て、フルスクリーン幅の箇所とwax-width:1140px箇所が分けられているかを確認します。
背景画像が見切れていないかもチェックしてください。
使用モニターの幅が小さめの方は、ブラウザの拡大/縮小ツールを使ってください。
- Windows ： Ctrl ＆
＋キーで拡大、－キーで縮小 - MacOS ： Command ＆
＋キーで拡大、－キーで縮小
クロームやfirefoxでは、URLバーの横あたりでズーム率が表示されます。
細部のディティール
全体のレイアウトが確認できたら、次は細かい部分を見ていきます。
見出しの文字や、余白が少なくて詰まったような表示になっていないかを確認していきましょう。
解説のcssの場合は、見出し上の線が少し数字と離れているようです。
padding-bottomの値を微調整しました。
2.スマホ幅
はみ出しはないか
スマートフォン向けレイアウトで真っ先に確認したいのは、横方向へのはみ出しが無いかどうかです。
テキストなどがはみ出しているのはもちろんですが、空白があって左右にブレると非常に使い勝手が悪くなります。
横方向にスワイプしてもページが動かないか試してみましょう。
レイアウト・ディティール
はみ出しが無ければ、各要素の配置やディティールを確認してください。
解説のcssの場合は、フッターのSNSアイコンと店舗情報に間が空きすぎていました。
原因はパソコンレイアウトの時に付けたpaddingが効いていたことなので、メディアクエリ内でpadding-topの値を「0」に設定し直しています。
PC,スマートフォン幅両方の表示を確認し、調整出来たら完成です。
お疲れ様でした。