問題

模写コーディングをしていると、CSSが適用されないことがあり、chromeのデベロッパーツールで確認すると、”user agent stylesheet”によって打ち消されていることがわかった。

原因

　”user agent stylesheet”はブラウザ毎のデフォルトのCSS設定である。

対策

　このデフォルトのCSS設定を解消し、まっさらな状態で模写コーディングを始めるには、リセットCSSというものによって、そのデフォルトのCSSを打ち消して、表示を揃えてからコーディングを進める必要がある。
　またreset.cssには種類があり状況によって選択する必要がある。
　
すべてリセットするタイプ

・Eric Mayer’s Reset CSS 2.0
・HTML5 Doctor Reset CSS

デフォルトのスタイルが当てられるタイプ

・Normalize.css
・ress
・Reboot.css

また、2019年で人気なのは

Eric Meyer’s “Reset CSS” 2.0

HTML5 Doctor Reset CSS

であるが、Eric Meyer’s “Reset CSS” 2.0はHTML5に対応していない為、HTML5 Doctor Reset CSSを使うほうが良いとのことだった。

参考文献

この記事は以下の情報を参考にして執筆しました。