タブレット幅の確認と調整
作った部分をタブレットモード（幅768px）で見てみましょう。
PC幅のカンプに合わせるためにCSSを書いているので、かなりひどいレイアウトになっています。
タブレット幅でも見られるように、CSSを分けて調整しましょう。
CSS調整のイメージ
PC幅では完成させたレイアウトを保持しつつ、TB幅でも「違和感なく見られる」レイアウトにするためにCSSを分割・調整します。
1.崩れの原因になっている箇所を見つける 2.そのセレクタ、プロパティと値をコピー 3.PC幅用のメディアクエリ内に移動する 4.TB幅用のメディアクエリ内は崩れない値に書き換える
例えば、ヘッダーメニュー。
画面幅に対して、横並びに表示させるコンテンツが多すぎますよね。
ロゴ横の[キューベスウエブ]を非表示のままにしておけば、スペースに余裕ができそうです。
前回CSSは全て @media (min-width: 768px) {} の中に書いていました。
[キューベスウエブ]を表示するためのスタイル指定を、 @media (min-width: 1200px) {} 何にカット＆ペーストで移動させます。
自動改行がなくなり、見やすくなりましたね。
カンプに合うよう、liタグの左右にmarginを付けました。
タブレット幅だと右marginが余計なので、ここもPC幅で適用されるようにします。
タブレットでは左にだけmarginを入れます。
ファーストビューエリア
ファーストビューエリアの調整例はこんな感じです。 （全体は素材のファイルをご確認ください）
タブレット幅でも、違和感なく見られるくらいに調整してみましょう。
PC幅を見直す
タブレット幅表示の調整が完成したら、PC幅の表示をもう一度確認します。
カンプと重なったままの状態が維持されていれば完成です。