「なんで動かないんだろう」「昨日までは表示できていたのに」
Web制作を始めたばかりのころ、私は画面の前で何度も手を止めてしまいました。
たとえば margin がどうしても効かなくて、余白を入れたはずなのに要素同士がくっついたまま。
初めての案件でレイアウトが崩れたときは、「もう私には向いてないのかも」と本気で思ったこともあります。
でも振り返ってみると、それは特別な失敗ではなく、誰もが一度は通る道でした。
スマホで文字サイズが大きすぎたり、position:absolute で配置がぐちゃぐちゃになったり…。
むしろ「そこを越えたからこそ、今の自分がある」と言えるくらいです。
このガイドでは、初心者が特につまずきやすいポイントを「症状別」にまとめました。
「自分だけじゃなかった」と思えるだけで、少し気持ちが軽くなるはずです。
困ったときに戻ってこられる「地図帳」として、どうぞご活用ください。
CONTENTS
余白・ボックスモデルの混乱
- marginとpaddingの違いが分からない
- marginが効かないときの原因と対処法
- 空のdivに高さを出すには？
レイアウトが崩れる不思議
- width:100%にしているのに横スクロールが出る
- position:absoluteでレイアウトがぐちゃぐちゃになる
文字・デザインまわりの悩み
- line-heightの余白が消えない／詰まりすぎる
- スマホで文字サイズが大きすぎる／小さすぎる
- 画像にテキストがかぶって読みにくい
動作がおかしいとき
- スマホでメニューが開かない／崩れる
- コピペしたコードが動かないときの原因
- コーディング中に文字が消えた!? 全角スペースが原因かも
環境・ツールでのつまずき
- VS Codeで保存できない／反映されないとき
- Chrome開発ツール（F12）の基本の使い方
そもそもの基礎知識
- HTMLタグはどこまで覚えればいい？最低限まとめ
- CSSってどこに書く？初心者が最初に迷う場所
- ブラウザごとに表示が違うのはなぜ？
おわりに
ここに挙げたつまずきは、ほとんどの人が一度は経験するものです。
大切なのは「分からないのは自分だけじゃない」と知ること、そして少しずつ原因を切り分けられるようになることです。