とあるweb屋の仕事術

とあるweb屋の仕事術

10年以上現役のweb製作屋さん。web製作雑務全部やる。

リセットCSSの種類をざっくりおさらい。リセットCSSはどれを使うか問題。

リセットCSSの種類をざっくりおさらい。リセットCSSはどれを使うか問題。

リセットCSSについての

すばらしい良記事がありました。

 

becolomochi.hatenablog.com

昨今、リセットCSSにもいろいろ種類があります。

記事で紹介されているCSSは以下の4つ。

Eric Meyer’s “Reset CSS” 2.0
Normalize.css
ress.css
sanitize.css

 

それぞれざっくり解説していきます。

 

Eric Meyer’s “Reset CSS” 2.0

https://meyerweb.com/eric/tools/css/reset/

「Eric Meyer’s “Reset CSS” 2.0」は一般的かなと思います。

ブラウザのスタイルをすべて打ち消すリセットCSSです。

おなじく全スタイルを打ち消す、「HTML5 Reset Stylesheet」

なんてものもありました。最近の実装には使われないタグの

スタイルの打ち消しなども入っている少し古い記述がみられます。

 

Normalize.css

https://necolas.github.io/normalize.css/

「Normalize.css」はブラウザのスタイルを打ち消さずに、

有用なスタイルは残しますよ、というCSS。ブラウザごと

のスタイルの差異・一貫性のなさがでないように

統一されたCSSです。

 

sanitize.css

https://csstools.github.io/sanitize.css/

「sanitize.css」は有用なスタイルは残し、スタイルの正常化、

ブラウザの差異をなくすCSS。Normalizeよりも後発のCSSで

最近のweb製作の実装方法(ボックスモデルやborder-widthなど)

にあったスタイルとなっています。

 

ress.css

https://github.com/filipelinhares/ress

「ress.css」は「sanitize.css」と同様に最近のWeb制作の

実装方法ににあうようカスタマイズされたスタイルです。

 

 

Normalize.css、ress.css、sanitize.cssは

ほぼコンセプトが一緒なかんじですが、

何が違うんだという実際の違いを見たければ

先に掲載したサイトで

【CSS】リセットCSSを表示面/コード面から比較してみる - 仕事が趣味です

具体的な違いが検証されていますので、

確認してみるとわかりやすいと思います。

 

ほかにもリセットCSSはいろいろありますが、

どれを使うか問題、ありますよね。

 

紹介した記事ではかゆいところに手が届いている

「ress.css」を使うことが多くなりそう、

と締めくくっています。

 

ちなみに僕は「HTML5 Reset Stylesheet」

を独自にカスタマイズしたCSSを

ここ数年使いまわしてきました。

 

Normalize.css と sanitize.css も

導入したこともあったのですが、

「有用なスタイルは残しておく」というところが

邪魔になってしまって結局使うのをやめました。

僕の場合はすべてきれいにリセットされているほうが

使いやすいなと思っています。

「有用なスタイル」は邪魔なだけでしたね。

結局有用なスタイルを自分で打ち消すという

Normalize.css と sanitize.cssとリセットする

ということに...。

 

先の記事で検証結果をみて「ress.css」が

使い勝手よさそうだったので

乗り換えようかなと思いましたが、自分用に

カスタマイズされたリセットCSSが一番

安定して使えるような気がします。

「ress.css」をベースに組んでみようかなとも

思ったり。

 

リセットCSSは普段あまり変えたりするような

ものでもないので、放置され気味なCSSかも。

この機会に見直して見てはどうでしょうか。

 

リセットCSSに関しては、

大手サイトをみてみるというのも非常に参考に

なると思います。今度別の記事でもしてみようか

とおもいます。

 

リセットCSSの参考になるの記事、いくつか

貼っておきます。

 

coliss.com

coliss.com

coliss.com

coliss.com

www.nxworld.net