よしたく blog

ほぼ週刊で記事を書いています

リセットCSSについてまとめた

Web デザインの本を読んでいるときにリセット CSS という単語を見つけました。 初めて見聞きした言葉だったので簡単にまとめておきます。

リセット CSS とは

リセット CSS は、ブラウザに設定されているデフォルトの CSS を上書きするための CSS です。 実はブラウザごとにデフォルトの CSS を持っており、これらをそのままにしておくとデザインを組み立てたときにブラウザごとでばらつきが出てしまいます。 デザインを統一するためにブラウザごとで持っている CSS を打ち消すための CSS がリセット CSS になります。

メリット・デメリット

何かを導入すると必ずメリットデメリットが発生しますが、基本的にはブラウザ間で違うデザインが表示されることを防げるのでメリットが上回っている気がします。 デメリットは管理するファイルが増えたり、導入する作業が発生するぐらいでしょうか。

  HTML5 Doctor Reset CSS

リセット CSS にはいくつか種類があります。 ブラウザごとの CSS を打ち消したあとは、過度に装飾しない限りでは個別で味を出している感じでしょうか。 自分が使っているものは HTML5 Doctor Reset CSS です。 見出しとなる h1 系からはじまり、ほとんどのものがリセットされます。 0 に近いところから実装していくには良さそうです。

html5doctor.com