【学習4週目】本で“土台を固め直す”週（HTMLの深掘り＋CSS設計の整理→課題で即アウトプット）
前回に引き続き、学習4週目の状況をリアルに振り返ります。
実際に使った教材や、そのとき感じた難しさ、できるようになったことを日記的にまとめました。これから勉強を始める方の参考にもなれば嬉しいです。
学習4週目でやったこと
3週間でデイトラWEB制作コース・Progate 有料版・書籍・CodeJumpを活用しながら、どうすれば“書けるようになるか”の道筋が見えてきたものの、まだまだ知識が足りないと実感。
3週目に引き続きアウトプット中心も検討しましたが、いったん立ち止まって本で基礎の穴埋めをすることに。個人的には動画よりも“立ち止まって何度も読み返せる本”が好きなので、5日間で本を読み漁りました。そのうえで、しょーごログさんの課題でアウトプットへ
①本で“基礎の穴埋め”と“設計の指針づくり”
① 武器になるHTML（https://shibajuku.net/bukininaru-html/）
HTMLだけにフォーカスしていて、タグ選択／属性の意図など基礎の抜けを丁寧に埋められた。
③ CSS設計の教科書（https://book.impress.co.jp/books/1113101128）
④ CSS設計完全ガイド（https://gihyo.jp/book/2020/978-4-297-11173-1）
※CSS設計3冊は「分かる所だけ拾う／分からない所は飛ばす」方針で爆速読了。
BEMの重要性とFLOCSSの骨組みを理解して、良いCSSの4原則「予測しやすい」「再利用しやすい」「保守しやすい」「拡張しやすい」の理解を深めました。この3冊は、未だに2～3日おきには読み直していますが、個人的には基本のキを抑えることを徹底したい性格のようです。
⑤ Web制作者のためのSassの教科書（改訂3版）（https://book.impress.co.jp/books/1124101084）
早めにSassを押さえたかったので熟読。初回は体感“6割”理解。今も復習用に何度も読み直し中です。
⑥ 作って学ぶHTML＆CSSモダンコーディング（https://ebisu.com/html-css-modern-coding/）
レスポンシブ設計が腹落ちできる一冊です。読みながら手を動かす形式で、初学者向けでした。レスポンシブで悩んでいる方は、ぜひ手に取ってみてください。
2) 読み切ったら即、課題アウトプット
しょーごログ｜デザインカンプからのコーディング練習課題（爆速レビュー付き）(https://shogo-log.com/coding-study/)
先週までのお世話になっていたCodeJumpさんとは違い、答えがない課題です。学んだことをアウトプットすべく、4週目は下記課題に取り組みました。当時のコーディングタイムは下記です。
- 入門編 1時間45分
- 初級 2時間
- 初級その2 2時間30分
- 初級EX 12時間
初級EXは見せられるレベルのコードではない……と、まだまだ実力不足を痛感。（結局2週間後にゼロから書き直しました）ただ、答えがない課題でも、自分で最後までやり切れたことには達成感がありました！
学習4週目でできるようになったこと
当時のメモを見返すと、次のように書いていました。
①HTMLの選択が安定：section/article/figure の使い分け、aria-やalt/width/heightなど意味づけとアクセシビリティを意識できた。
②命名ポリシーの叩き台ができた：
BEMの理解（Blockは名詞、Elementは構造、Modifierは状態）
FLOCSSの棚に保存：foundation/ layout/ object(components, utilities) へ振り分け
③Sassの分割運用：variables / mixin / base / components / utilities の最小セットを作り、@useで読み込む流れが定着。
④レスポンシブの型を獲得：SP→PCのモバイルファースト、余白スケールの固定（例：4/8/12/16/24/32…）で崩れにくく。
学習0日目に比べると、大きな成長が見えてきました！
学びと反省
①“分からない所は飛ばす”は有効：まず作ってから戻る。Sassの高度機能は後学習で十分。
②EX課題まだまだ基礎力不足を実感：12hかかった理由は、設計の初手ミス→修正の連鎖。次回はカンプ読解→要件分解→命名草案→HTML骨格の順で30〜45分の準備を入れる。
③よく使うパーツの練習が必要：お知らせやテーブル、お問い合わせフォームなど、パーツ練習に時間を割く必要がありそう。
まとめ
学習4週目は“基礎を固め直し→課題で即検証”で、HTMLの意味づけ／CSS設計／Sass分割が一段クリアになった週でした。まだまだ、Web制作の道のりは遠い！ とも痛感。
これからも、学習0日目〜今日までの歩みを、週ごとにまとめていきます。
参考リンク（本記事で触れた教材）
- 武器になるHTML — https://shibajuku.net/bukininaru-html/
- ざっくりつかむ CSS設計 — https://book.mynavi.jp/ec/products/detail/id=126973
- CSS設計の教科書 — https://book.impress.co.jp/books/1113101128
- CSS設計完全ガイド — https://gihyo.jp/book/2020/978-4-297-11173-1
- Web制作者のためのSassの教科書（改訂3版） — https://book.impress.co.jp/books/1124101084
- 作って学ぶHTML＆CSSモダンコーディング — https://ebisu.com/html-css-modern-coding/
- しょーごログ（課題）— https://shogo-log.com/coding-study/
前後の記事
- Week3｜「読んで・真似して・自分で書く」へシフト
https://step-log.com/week3-web/ - Week2｜学習の量を増やした週（理解50%・アウトプット不足を痛感）
https://step-log.com/week2-web/ - Week1｜基礎の反復で土台づくり（小さな完成で前進）
https://step-log.com/week1-web/