問題
模写コーディングをしていると、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に対応していない為、HTML5 Doctor Reset CSSを使うほうが良いとのことだった。
参考文献
この記事は以下の情報を参考にして執筆しました。