今更リセットCSSを知る&ressの導入

毎度のことながら恐らく今更案件なのだけれど、リセットCSSについて初めて知ったのでメモ。

"user agent stylesheet"

f:id:kappaz:20200216180712p:plain

特に何もしていないのにこういったスタイルが当てられていることがよくある。 これは"user agent stylesheet"といってブラウザのデフォルトのスタイルシートだそうだ。

はっきりいってこいつは邪魔だ。 勝手にbodyにマージン設定しやがって!ページ全体に横のラインを入れたいのに、両端に要らない余白が出来るじゃないか。

リセットCSS

そこで登場するのがリセットCSS。 user agent stylesheetを打ち消してブラウザ間の表示を揃えるためのCSSファイル。つまり救世主。

リセットCSSにも色々種類があるらしい。今回はその中でも一番気の利いていそうな"ress"を使うことにした。 リセットCSSの種類に関しての詳しい話は以下参照。

webdesign-trends.net

ressの導入方法

yarn add ress
import 'ress'
以上。