HTMLで登場する要素にはデフォルトのスタイルを持っています。またブラウザ間でも微妙に違いもあったりします。そのため、デザインを作り込んだり、見た目を整える場合には一度デフォルトのスタイルを調整する必要があります。そんな時にデフォルトスタイルをリセットする目的で使用されるのがリセット系のCSSになります。   リセット系CSSにはいろんな種類があるのでイマイチどれを使っていいかわからない方も多いかと思います。今回はリセット系CSSについて用途や特性別にまとめていきたいと思います。  

リセット系CSSの分類

リセット系CSSは大きく分けると次の2つのタイプに分かれます。 1. 要素のデフォルトスタイルを全て消す 2. 要素のデフォルトスタイルを残しながらブラウザ間の差異をなくす   用途や目的別に使い分けられるのですが、デフォルトスタイルを全て消すものは、見た目が同じになるので、まっさらな状態からデザインを整えていく時に便利です。デフォルトスタイルを残すものは、強制的にスタイルを消すことがないのでフレームワークのような汎用性のあるものに採用されるケースが多いです。  

よく知られているリセット系CSS

リセット系CSSにはいろんな種類がありますが、主に使われているのは下記のものが多いようです。また、リセット系CSSの歴史は古く、HTMLの仕様変更に合わせてどんどん進化しています。   【Eric Meyer’s CSS reset】 https://meyerweb.com/eric/tools/css/reset/ 古くからある有名なリセット系CSSで以前はよく使われていましたが、HTML5の登場以降はあまり使われることが少なくなってきたようです。   【YUI Reset CSS】 https://yuilibrary.com/yui/docs/cssreset/ Yahooが作成しているリセット系CSSで、過去には 「Eric Meyer’s CSS reset」と並んでよく使われていました。   【HTML5 Doctor CSS Reset】 http://html5doctor.com/html-5-reset-stylesheet/ HTML5への対応を目的に登場したリセット系CSSで、新しいタグにも対応しているためHTML5ベースの制作に使いやすい内容となっています。   【Normalize.css】 https://necolas.github.io/normalize.css/ デフォルトのスタイルを残しながら見た目を揃えていくことを目的するタイプのパイオニア的なCSSです。完全にリセットされないためフレームワークなどでよく用いられます。  

最近のウェブ制作に使えるリセット系CSS

HTMLやCSSが時代とともにアップデートされ、それに伴いリセット系CSSも新しいものが登場しています。ここでは近年のウェブ制作に合わせた使いやすいリセット系CSSをあげています。   【ress.css】 https://github.com/filipelinhares/ress スタイルをリセットするタイプのCSSで、HTMLやCSSの新しい仕様に最適化された内容になっており、まっさらな状態からデザインを整えることが可能です。   【reboot.css】 https://getbootstrap.com/docs/4.1/content/reboot/ 「Normalize.css」と同じくデフォルトのスタイルを残すタイプになります。HTML5の新しい仕様に対応しており、Bootstrapの新しいバージョンにも採用されています。   目立たないリセット系CSSですが、デザインを作成する上でとても重要な役割を果たしています。いろんな種類があるので、目的や用途を見極めてマッチしたものを採用するようにしましょう。