最近のWeb制作で利用されている、リセットCSSとノーマライズCSSのまとめ
Post on:2016年8月29日
sponsors
HTMLの各要素のブラウザごとに異なる差異をなくすために、ブラウザのスタイルを初期化するリセットCSS、初期化ではなくノーマライズ（正常化）するノーマライズCSS。
定番のスタイルシートから、最近リリースされたものまで、リセットCSSとノーマライズCSSを紹介します。
イラスト: Girls Design Materials
定番も最近のWeb制作にあうようバージョンアップされており、Web制作者は要チェックです！
下2つは通常のリセットとは異なるアプローチのスタイルシートです。
- ress
- Normalize.css
- sanitize.css
- Marx
- Reset CSS
- minireset.css
- css-wipe
- Cleanslate
- Unreset CSS
normalize.cssを最近のWeb制作にあうようカスタマイズされたもので、ブラウザごとに異なるHTMLの各要素のスタイルの相違を吸収し、各要素のデフォルトのスタイルが定義されたCSSリセット用のスタイルシート。
対応ブラウザはすべてのモダンブラウザ、IEは8+対応です。
参考: モダンブラウザによる相違を吸収するようカスタマイズされたスタイルシート -ress
Normalize.css
Normalize.css -GitHub
ブラウザのスタイルを消去するのではなく、有用なデフォルトのスタイルを利用し、あらゆるHTMLエレメントのスタイルを正常化するスタイルシート。バグとブラウザごとの一貫性のなさを修正し、巧妙な改良でユーザビリティを改善します。
2016年3月にv.4がリリースされ、モダンブラウザ・スマホ・HTML5に完全対応しました。IEは8+対応です。
参考: 新バージョンのnormalize.css v4はモダンブラウザ・スマホ・HTML5に完全対応
sanitize.css
sanitize.css -GitHub
normalize.cssの共同開発者が2015年にリリースしたスタイルシート。最近の実装スタイルにあったアプローチがとられており、スマホなどのモバイルにも対応しています。IEは10+対応です。
参考: reset.cssとnormalize.cssに続く新しいリセット用CSS、モバイル対応・最近の実装スタイルを考慮したスタイルシート
単なるCSSリセットに留まらず、classの使用無しでレスポンシブ対応の最近のWebサイトの制作を見据えたさまざまなテクニックが盛りこまれたスタイルシート。IEは10+対応です。
参考: 単なるCSSリセットではなく、レスポンシブ対応のWeb制作を見据えたテクニックがいろいろ盛りこまれたスタイルシート -Marx
HTMLの各要素のmarginやpaddingやborderなどをリセットし、各要素のスタイルを消去するスタイルシート。v2.0はHTML5対応。リリースからけっこう経ちますが、人気のリセット用CSS。
参考: 2012年最も人気のあったCSSリセットとどれを使えばいいかの指針、と上手に使うポイント
minireset.css
minireset.css -GitHub
モダンブラウザ用のシンプルなリセット用のスタイルシート。すべての要素に「box-sizing: border-box;」を適用し、ブロックのマージンをリセットし、インラインのマージンは保持。
先日、リリースされたばかりの新しいスタイルシートです。
html5doctorのHTML5 Resetをベースに、最近の実装スタイルにあうよう改良がくわえられたスタイルシート。「box-sizing: border-box;」が定義され、すべてのmargin, padding, borderが取り去られています。
HTMLの要素、そしてすべての子要素をリセットし、デフォルトのCSSの値に戻すスタイルシート。ページを作成する時に最初に使うのではなく、ページに既存のCSSスタイルがある時にそれらのスタイルをリセットするためのスタイルシートです。
リセットされたHTMLの各要素のブラウザのスタイルを復元するスタイルシート。
対応ブラウザ: Chrome, Firefox, Safari, Opera, Edge, IE9
sponsors
