CSSのはまるポイント

2019-02-042020-05-10

ドットインストールの「実践！ウェブサイトを作ろう」をやっていて、どうしても教材の通りにいかず、今日１時間以上悩みました。

時間が勿体ないので、ドットインストールのプレミアム会員に契約し、お手本のソースコードとの比較機能により、解決できました。

過ちは下記の利用者Bの後の”>”が抜けていただけでした。

気がついてからChromeのデベロッパー ツールで確認したら、<h1>はあるのに</h1>がありませんでした。

特にツールがエラーで教えてくれたりしないのですね。

<section class="voice">
  <img src="img/user2.png" width="90" height="90" alt="利用者B">
  <h1>利用者B</h1>
  <p>良い感じです。良い感じです。良い感じです。良い感じです。良い感じです。
  </p>
</section>

インターネットで調べたら、はまるポイントを纏めているWebサイトがいくつもありました。

1. CSSが効かない・反映されないときの対処法まとめ
2. MakeShopサポート │ CSSが効かない時に考えられる原因6つ
3. cssが効かない場合のよくある、ありがちなミスと解決方法 | テクブロ
4. CSSがうまく効かない5つのパターンとは？原因の見つけ方や対処法も紹介 | Arrown
5. cssが効かない…原因についてまとめ｜webproduct-lab

私の間違いは、問題外の超初心者レベルのミスとベテランには笑われるものかもしれません。

その間違いを素早く見つけるすべが、私にはまだないのがちょっときついですね。