【CSS】Normalize.cssとReset CSSを使いこなして、ブラウザ間の差を解消しよう！

Normalize.cssとReset CSSの違い

動作

• Reset CSS: 全てのブラウザデフォルトスタイルをリセットし、すべての要素を同じスタイルにします。
• Normalize.css: ブラウザデフォルトスタイルをできるだけ維持しつつ、主要な要素のスタイルを統一します。

目的

• Reset CSS: デザインの土台をゼロから構築したい場合に適しています。
• Normalize.css: ブラウザ間の差異を最小限に抑え、デザインのベースラインを統一したい場合に適しています。

利点と欠点

使い分け

• デザインの自由度を重視する場合はReset CSS
• ブラウザ間の差異を最小限に抑えたい場合はNormalize CSS

その他

• 近年ではNormalize.cssの方が主流になりつつあります。
• どちらを使用する場合でも、必要に応じて独自のカスタマイズを行う必要があります。

• Normalize.css: https://normalize.css/

補足

• 上記はあくまで基本的な違いであり、状況によって使い分けることが重要です。
• 詳細については、各フレームワークの公式ドキュメントを参照してください。

プログラミングについて分かりやすく日本語で解説

• 専門用語を避け、平易な言葉で説明するようにしています。
• 図や表を用いて、視覚的に理解できるようにしています。
• コード例を掲載し、実際にどのように使うのかを理解できるようにしています。

Normalize.css

/* Normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the font size and margin on `html` elements.
 */
html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

/**
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
body {
  margin: 0;
}

/* Sections
   ========================================================================== */

/**
 * 3. Remove the margin on the `body` element.
 */
body {
  margin: 0;
}

/**
 * 4. Correct the font size and margin on `h1` elements.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/**
 * 5. Correct the font size and margin on `h2` elements.
 */
h2 {
  font-size: 1.5em;
  margin: 0.83em 0;
}

/**
 * 6. Correct the font size and margin on `h3` elements.
 */
h3 {
  font-size: 1.17em;
  margin: 1em 0;
}

/**
 * 7. Correct the font size and margin on `h4` elements.
 */
h4 {
  font-size: 1em;
  margin: 1.33em 0;
}

/**
 * 8. Correct the font size and margin on `h5` elements.
 */
h5 {
  font-size: 0.83em;
  margin: 1.67em 0;
}

/**
 * 9. Correct the font size and margin on `h6` elements.
 */
h6 {
  font-size: 0.67em;
  margin: 2.33em 0;
}

/* Headings
   ========================================================================== */

/**
 * 10. Correct the font weight on `h1` elements.
 */
h1 {
  font-weight: bold;
}

/**
 * 11. Correct the font weight on `h2` elements.
 */
h2 {
  font-weight: bold;
}

/**
 * 12. Correct the font weight on `h3` elements.
 */
h3 {
  font-weight: bold;
}

/**
 * 13. Correct the font weight on `h4` elements.
 */
h4 {
  font-weight: bold;
}

/**
 * 14. Correct the font weight on `h5` elements.
 */
h5 {
  font-weight: bold;
}

/**
 * 15. Correct the font weight on `h6` elements.
 */
h6 {
  font-weight: bold;
}

/* Lists
   ========================================================================== */

/**
 * 16. Add the correct margin to `ul` elements.
 */
ul {
  margin: 1em 0;
}

/**
 * 17. Add the correct margin to `ol` elements.
 */
ol {
  margin: 1em 0;
}

/**
 * 18. Remove the margin on `li` elements.
 */
li

Normalize.cssとReset CSS以外の方法

個別にスタイルを設定する

各要素に対して個別にスタイルを設定することで、ブラウザ間の差異を解消することができます。しかし、すべての要素に対してスタイルを設定するのは非常に手間がかかります。

CSSフレームワークを使用する

BootstrapやMaterializeなどのCSSフレームワークは、ブラウザ間の差異を吸収したスタイルを提供しています。フレームワークを使うことで、開発時間を短縮することができます。

Sass/SCSSは、CSSをより効率的に記述できる言語です。変数やmixinなどを活用することで、ブラウザ間の差異を簡単に解消することができます。

PostCSSを使用する

PostCSSは、CSSを加工するためのツールです。AutoprefixerなどのPostCSSプラグインを使うことで、ブラウザ間の差異を自動的に解消することができます。

• 小規模なプロジェクトであれば、個別にスタイルを設定する方法で十分かもしれません。
• 大規模なプロジェクトであれば、CSSフレームワークやSass/SCSSを使用すると効率的に開発を進めることができます。

以下は、各方法のメリットとデメリットです。

個別設定

h1 {
  font-size: 2em;
  margin: 0.67em 0;
  font-family: sans-serif;
}

h2 {
  font-size: 1.5em;
  margin: 0.83em 0;
  font-family: sans-serif;
}

...

@import '~bootstrap/scss/bootstrap';

body {
  $font-family: sans-serif;
}

Sass/SCSS

$font-family: sans-serif;

h1 {
  font-size: 2em;
  margin: 0.67em 0;
  font-family: $font-family;
}

h2 {
  font-size: 1.5em;
  margin: 0.83em 0;
  font-family: $font-family;
}

...

PostCSS

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

h2 {
  font-size: 1.5em;
  margin: 0.83em 0;
}

...

const postcss = require('postcss');
const autoprefixer = require('autoprefixer');

const css = `
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

h2 {
  font-size: 1.5em;
  margin: 0.83em 0;
}

...
`;

const result = postcss([ autoprefixer ]).process(css);

console.log(result.css);