モダンブラウザ用に最低限のリセットを施したminireset.css

サイトを作る際には、ブラウザ毎の差異を無くすためよく使われるのが「リセットCSS」「ノーマライズCSS」です。自分はよくノーマライズCSSを使っていたのですが、一部ulやliには自分でリセットを追加指定して使っていました。

ある時ふとCSSフレームワーク「Bulma」を見ていたら、リセットCSSとして「minireset.css」が使われている事に気づきました。
※Bulmaに関しては以下の記事で紹介しています。

minireset.cssってなんだろうと思い調べてみると、結構良かったのでご紹介します。

モダンブラウザを対象とした最小限のリセットCSS

minireset.cssはその名の通り、モダンブラウザを対象とした最小限のリセットCSSで、サイズは圧縮版だと533byteしかありません。ノーマライズCSSを圧縮しても数キロバイトになることを考えるとかなり小さい事が分かります。

主にリセットされているのは、
・h1、h2など見出しのフォントサイズをリセット
・見出しと、ul、li、pなどのマージンをリセット
・table、th、tdなど、テーブル周りの余白をリセット
と、シンプルです。

それに加え、img,embed,iframe,object,audio,videoなどのメディアファイルに「max-width:100%;」が指定されていますので、ブラウザの幅に応じて大きさが変更されます。

また、全体に「box-sizing:border-box;」が指定されているのもポイント。個人的にノーマライズCSSを使っていた時も全体に「box-sizing:border-box;」を追加指定していたので、デフォルトで指定されているのは一手間省けます。

個人的にフィットしたminireset.css

今までノーマライズCSSを使っていて足りない部分を自分でリセットしていましたが、このminireset.cssは今まで自分で追加指定していたものを全て満たしてくれているので、個人的にかなりフィットしました。リセットよりもノーマライズの方が良いという議論もありますが、リセットであればこの「minireset.css」は中々良いのではないかと思います。