はじめに
HTML/CSSを学び始めたばかりの方が「思ったように表示されない」「何が間違っているのかわからない」と感じる場面は非常に多いです。この記事では特によく遭遇するつまずきポイントを10個ピックアップして解説します。
つまずきポイント①：要素が横に並ばない
ブロック要素（divやp）はデフォルトで縦に並びます。横並びにするには display: flex または display: inline-block を使いましょう。Flexboxが現代の標準的な手法です。
つまずきポイント②：marginが効かない
ブロック要素のmarginが折りたたまれる「マージンの相殺」が原因のケースが多いです。親要素に overflow: hidden や display: flex を設定すると解消されます。
つまずきポイント③：画像が大きくはみ出る
max-width: 100% を画像に設定するだけで解決します。これはレスポンシブデザインの基本のひとつです。
つまずきポイント④：floatの後に要素が回り込む
float を使った後は clearfix が必要です。現代では float よりも Flexbox や Grid を使う方が管理しやすいです。
つまずきポイント⑤：z-indexが効かない
z-indexは position が設定されている要素にしか効きません。position: relative や absolute を合わせて設定しましょう。
つまずきポイント⑥：CSSが反映されない
ブラウザのキャッシュが原因のことが多いです。Ctrl+Shift+R（ハードリロード）を試してください。また、CSSの詳細度（specificity）の問題も確認しましょう。
つまずきポイント⑦：フォントが変わらない
Googleフォントなどの外部フォントは、HTMLのheadタグ内で読み込みの記述が必要です。CSSのfont-familyを指定するだけでは反映されません。
つまずきポイント⑧：スマホで崩れる
HTMLのheadタグに <meta name="viewport" content="width=device-width, initial-scale=1"> を記述していないと、スマホ表示が崩れます。
つまずきポイント⑨：リンクの色が変わらない
aタグはデフォルトで青・訪問済みは紫になります。color: inherit または直接色を指定して上書きしましょう。
つまずきポイント⑩：縦中央揃えができない
Flexboxを使えば簡単に解決できます。親要素に display: flex; align-items: center; を設定するだけです。
まとめ
どのつまずきもブラウザの開発者ツール（F12）を使って検証することが解決への近道です。要素を選択してCSSを確認する習慣を早めに身につけましょう。
