CSS 3-2 よくあるつまずき

CSS が効かない、崩れる、思った見た目にならない時に、どこから見直せばよいかを確認するための練習ページです。

まず最初に見る4つ

その CSS は本当にその要素を選べているか
スペルや記号のミスがないか
ほかの CSS に上書きされていないか
Flex なら親と子の役割が混ざっていないか

サンプルプロフィール

画像と文章を並べる形を使って、CSS 3-2 の確認ポイントを見ていきます。このブロックは、CSS 3-1 の Flex の復習にもなります。

うまくいかない時は、まず全部を書き直すのではなく、「当たる場所」「書き方」「上書き」「親子関係」を順番に見ます。

フォームの確認ポイント

わざと確認してほしいポイント

次のような変更を、自分で少し試してみてください。

class 名を1文字だけ変えて、CSS が効かなくなるのを確認する
display: flex; を消して、並びがどう変わるかを見る
gap の数字を変えて、間隔の違いを見る
画像の width を変えて、崩れ方を確認する