【レスポンシブ対応習得！】写経用サイト第２弾

こんにちは、シュンです。

前回の写経noteに挑戦してくれた方、ありがとうございます！！

今回はその続きということで、「前回作ったサイトをレスポンシブ対応させる方法」を解説していきたいと思います。

まだ前回の記事を見ていない方は、こちらからご覧くださいね。

それでは、レスポンシブ版スタート！

レスポンシブ対応したサイトは、このようになっております。

今の時代スマホでWebサイトを見る人の方が圧倒的に多いので、レスポンシブ対応させることは必須です！

■こういった方向け
・ProgateでHTML,CSSを一通り学んだ方
・レスポンシブ対応で行き詰まっている方
・前回のnoteで写経をしたが、もう少しスキルアップしたい方

■本記事を読むメリット
・ポートフォリオとして掲載できる
・レスポンシブ対応のスキルが身に付く
・コーディングで月5万円稼げるスキルが身に付く

※注意点
・前回の写経の続きとなっております。
・ハンバーガーメニューは実装していません。
（後日、ハンバーガーメニューの解説記事を公開する予定です。）

前回と同様、自走力を身に付けるためにも、分からない部分があったら自分で調べてください。コーディングで分からないことのほとんどは、ググれば解決できます。

上記を踏まえた上で、一緒に見ていきましょう！

まずは、全体の手順から。

・手順①：レスポンシブ準備
・手順②：全体構造のレスポンシブ化
・手順③：ヘッダーのレスポンシブ化
・手順④：メインビジュアルのレスポンシブ化
・手順⑤：ABOUTのレスポンシブ化
・手順⑥：NEWSのレスポンシブ化
・手順⑦：WORKSのレスポンシブ化
・手順⑧：ACCESSのレスポンシブ化
・手順⑨：CONTACTのレスポンシブ化
・手順⑩：フッターのレスポンシブ化

上記の手順に沿って、解説していきます。

それでは、スタート！