ブラウザのデフォルトスタイル統一（リセットCSS）｜WDSG策定チーム［#08］

みなさんは普段、ブラウザごとに異なるデフォルトスタイルは、どんな方法で統一していますか？

WDSG策定チーム専用Slackにて、メンバー間で談義を行い［ブラウザのデフォルトスタイル統一（リセットCSS）］のガイドラインを作成しました。

WDSG（Web Developer's Sharing Guidelines）とは、Webサイト制作関係者がガイドラインを共有することで、クリエイティブに集中できる環境を作るプロジェクトです。

１．ブラウザのデフォルトスタイル統一（リセットCSS）

１）ブラウザ間で異なるデフォルトスタイルを統一するため、リセットCSSを利用します。

２）基本的に、Webで配布されているリセットCSSの利用を推奨します。

代表的なリセットCSS：
・Eric Mayer’s Reset CSS 2.0
・Normalize.css
・ress.cssなど

注釈：
上記リセットCSSは［全てのスタイルをリセットするタイプ］と［デフォルトスタイルを活かして調整するタイプ］があります。制作するサイトに応じて、最適なリセットCSSを選びましょう。

３）リセット範囲の限定などカスタマイズを行う場合、オリジナルのリセットCSSを作成し利用します。

２．策定までの流れ

［ブラウザのデフォルトスタイル統一（リセットCSS）］について行ったSlackでの流れを、公開議事録として掲載します。

桑島さん：
リセットcssって自作してますか？それとも何か（Eric Meyer's Reset CSSとか）使ってますか？

ヒカル：
以前はスタイルを消すタイプのリセットCSSを自作していましたが、今はNormalize.cssを使っています。

桑島さん：
私はEric Meyer’s Reset CSS使ってます。

ヒカル：
Eric Meyer’s Reset CSSは初見だったのですが、ブラウザのデフォルトスタイルを上書きで消すタイプのリセットCSSですね。
結構前ですが「デフォルトスタイルをすべて消すと処理が遅くなる」という理由で、Normalize.cssに移行した経緯があります。
この辺りもお話してみたいですね。

園川さん：
僕たちはress.cssを使ってます。
理由としては何使うかなーって調べた時にresetとnormalizeのいいとこ取り！
ってあってとりあえず使ってみるかーで今になってます笑
使ってみてて困ることは今のところないですね。
むしろそれ以外のreset系だとこういう工程とか対応が必要なのあれば教えて欲しいです！！

ヒカル：
なるほど、ress.cssも初見だったのですが、marginとpaddingは消したほうが書きやすいですよね。
リセットCSSで困るパターンは［全部リセットする系］と［デフォルトを残す系］で乗り換える必要がある時に、普段と違うスタイルが効くので慣れるのが大変というくらいですね。

園川さん：
marginとpaddingは消しておきたいですね！
なるほど〜！
たしかに慣れるのはしんどそうですね、、。
ここは変化していく部分だとは思いますが、暫定の結論を出して共有化しておきたいですね！

吉永さん：
Eric Meyer’s Reset CSSを使ってます。
定期的にリセットCSSの変更を検討するものの従来のままで事足りてる状態です。
変更するならress.cssが最有力です！

桑島さん：
私はEric Meyer's Reset CSS使ってる理由って、どこかのブログで誰かがオススメしてたからっていうだけなので、なんとなく使ってる感じです。
ress.css気になります。調べて見ます。

以上が、Slackでの流れです。

実際は参考サイトを参照したり、ドキュメント化する時に調査を行いました。

３．WDSG策定チーム専用Slack

WDSG策定チームは、専用Slackで一緒に意見交換をしてくれるメンバーを募集しています！

意見出しチャンネルで制作方法について質問したり、判断に迷っていることや制作の悩みなど、自由な雰囲気で意見交換を行いながら、少しずつガイドライン化を進めています。

この活動が気になった方は、是非とも僕のTwitter（@design_hikaru）へご連絡ください！

最後までお読み頂き、ありがとうございました！