こんにちは！今回は、模写コーディングを続ける中で感じている課題と、そこでの気づきを記録しておきます。少しずつHTMLが書けるようになってきたものの、まだまだ試行錯誤の日々です。
HTMLの進歩と課題
模写コーディングを続けていく中で、HTMLは以前よりもスムーズに書けるようになりました。特に、構造を意識してタグを選ぶことや、セマンティクスを意識したコーディングには慣れてきたと感じています。
ただし、<section>タグの使いどころにはまだ迷うことが多いです。
- セクションを分ける基準が曖昧になりがち
- 他のセマンティック要素（<article>や<div>など）との使い分けに自信がない
見本サイトの構造を参考にしながら試してはいるものの、「この使い方で正しいのか？」と疑問を持ちながら作業することも少なくありません。
CSSの大きな壁
HTMLよりもさらに課題を感じているのがCSSです。やりたいことを表現する方法が分からず、思った通りのデザインを再現できないことが多々あります。
具体的な課題
- プロパティの知識不足
CSSには膨大なプロパティがありますが、まだその大半を理解できていません。たとえば、
・文字や要素を正確に配置する
・スペーシング（余白）を調整する
といった基本的な作業ですら、試行錯誤が必要です。 - <dl>・<dt>・<dd>の配置問題
今日の模写では、定義リスト（<dl>）が思うように並ばず苦戦しました。スペーシングがバラバラで、見本と比べてもどこが違うのか分からず…。調整している間に、子供がぐずり始めてしまい、作業を中断することに。
こうした問題に直面するたび、「CSSの基本的なインプットがまだまだ足りない」と痛感しています。
次に向けての学習計画
今回の模写コーディングで感じた課題を踏まえ、次のような学習を進める予定です：
1.CSSプロパティの基礎を復習する
Udemyや無料のチュートリアルサイトを活用し、CSSの基本的なプロパティとその使い方を復習します。具体的には、以下のポイントを強化する予定です：
- レイアウト（Flexbox）
- スペーシング（margin・padding）
- テキストやリストのスタイリング
2. セマンティックHTMLを深掘りする
<section>や<article>など、セマンティック要素の使い方をさらに学びます。公式ドキュメントや参考サイトでの実例を見ながら、理解を深めていきたいです。
3. 模写対象を細かく分ける
一度に全体を模写しようとせず、特定の要素（リスト、ナビゲーション、ボタンなど）に絞って練習することで、効率的に課題を克服していきます。
子育てとの両立
今回のように作業途中で中断せざるを得ない場面があるのも、子育て中の学習では日常茶飯事です。ただ、焦らずに「また時間が取れたときに再開すればいい」と自分に言い聞かせながら、続けることを大切にしています。
作業時間が短くても、課題を一つずつ解決しながら前進していければ、それで十分だと思っています。
まとめ
模写コーディングは進歩を感じる反面、新たな課題も次々と出てきます。特にCSSの知識不足を補うことが今後の大きなテーマになりそうです。
次回は、今回の課題だった<dl>の配置問題や、セマンティックHTMLの使い方をさらに掘り下げて実践してみたいと思います。小さな進歩を重ねながら、少しずつ成長していけるよう頑張ります！
それではまた次回の記事でお会いしましょう！
