最近のWeb制作で利用されている、リセットCSSとノーマライズCSSのまとめ

HTMLの各要素のブラウザごとに異なる差異をなくすために、ブラウザのスタイルを初期化するリセットCSS、初期化ではなくノーマライズ(正常化)するノーマライズCSS。

定番のスタイルシートから、最近リリースされたものまで、リセット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
サイトのキャプチャ

ress -GitHub

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、モバイル対応・最近の実装スタイルを考慮したスタイルシート

サイトのキャプチャ

Marx
Marx -GitHub

単なるCSSリセットに留まらず、classの使用無しでレスポンシブ対応の最近のWebサイトの制作を見据えたさまざまなテクニックが盛りこまれたスタイルシート。IEは10+対応です。

参考: 単なるCSSリセットではなく、レスポンシブ対応のWeb制作を見据えたテクニックがいろいろ盛りこまれたスタイルシート -Marx

サイトのキャプチャ

Reset CSS

HTMLの各要素のmarginやpaddingやborderなどをリセットし、各要素のスタイルを消去するスタイルシート。v2.0はHTML5対応。リリースからけっこう経ちますが、人気のリセット用CSS。

参考: 2012年最も人気のあったCSSリセットとどれを使えばいいかの指針、と上手に使うポイント

サイトのキャプチャ

minireset.css
minireset.css -GitHub

モダンブラウザ用のシンプルなリセット用のスタイルシート。すべての要素に「box-sizing: border-box;」を適用し、ブロックのマージンをリセットし、インラインのマージンは保持。
先日、リリースされたばかりの新しいスタイルシートです。

サイトのキャプチャ

css-wipe -GitHub

html5doctorのHTML5 Resetをベースに、最近の実装スタイルにあうよう改良がくわえられたスタイルシート。「box-sizing: border-box;」が定義され、すべてのmargin, padding, borderが取り去られています。

サイトのキャプチャ

Cleanslate
Cleanslate -GitHub

HTMLの要素、そしてすべての子要素をリセットし、デフォルトのCSSの値に戻すスタイルシート。ページを作成する時に最初に使うのではなく、ページに既存のCSSスタイルがある時にそれらのスタイルをリセットするためのスタイルシートです。

サイトのキャプチャ

Unreset CSS -GitHub

リセットされたHTMLの各要素のブラウザのスタイルを復元するスタイルシート。
対応ブラウザ: Chrome, Firefox, Safari, Opera, Edge, IE9

top of page

©2017 coliss