【レスポンシブ対応習得!】写経用サイト第2弾
こんにちは、シュンです。
前回の写経noteに挑戦してくれた方、ありがとうございます!!
今回はその続きということで、「前回作ったサイトをレスポンシブ対応させる方法」を解説していきたいと思います。
まだ前回の記事を見ていない方は、こちらからご覧くださいね。
それでは、レスポンシブ版スタート!
レスポンシブ対応したサイトは、このようになっております。
今の時代スマホでWebサイトを見る人の方が圧倒的に多いので、レスポンシブ対応させることは必須です!
■こういった方向け
・ProgateでHTML,CSSを一通り学んだ方
・レスポンシブ対応で行き詰まっている方
・前回のnoteで写経をしたが、もう少しスキルアップしたい方
■本記事を読むメリット
・ポートフォリオとして掲載できる
・レスポンシブ対応のスキルが身に付く
・コーディングで月5万円稼げるスキルが身に付く
※注意点
・前回の写経の続きとなっております。
・ハンバーガーメニューは実装していません。
(後日、ハンバーガーメニューの解説記事を公開する予定です。)
前回と同様、自走力を身に付けるためにも、分からない部分があったら自分で調べてください。コーディングで分からないことのほとんどは、ググれば解決できます。
上記を踏まえた上で、一緒に見ていきましょう!
まずは、全体の手順から。
・手順①:レスポンシブ準備
・手順②:全体構造のレスポンシブ化
・手順③:ヘッダーのレスポンシブ化
・手順④:メインビジュアルのレスポンシブ化
・手順⑤:ABOUTのレスポンシブ化
・手順⑥:NEWSのレスポンシブ化
・手順⑦:WORKSのレスポンシブ化
・手順⑧:ACCESSのレスポンシブ化
・手順⑨:CONTACTのレスポンシブ化
・手順⑩:フッターのレスポンシブ化
上記の手順に沿って、解説していきます。
それでは、スタート!
この記事が気に入ったらサポートをしてみませんか?