最近のWebページ用にCSSリセットの効果的な使い方、Normalize CSSとReset CSSそれぞれの利点を取り入れる

Webページを実装する際に、何らかのCSSリセットを使用している人が多いと思います。リリースされているものをそのまま、またはカスタマイズしたり、オリジナルのCSSリセットを使用しているかもしれません。

2大CSSリセットとも言えるNormalize CSSとReset CSSの特徴、Normalize CSSとReset CSSそれぞれの利点を取り入れて安心して使用する方法を紹介します。

Normalize CSS or CSS Reset?!
br Elad Shechter

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

• はじめに
• ブラウザのユーザーエージェント スタイル
• Normalize CSS
• Reset CSS
• Normalize CSSとReset CSSの両方を安心して使用する方法
• 終わりに
• 参考記事

はじめに

通常わたし達は、どのブラウザを使用しているかに関係なくHTMLの要素が同じように見えることを望みます。しかし、ブラウザごとに表示方法が異なるため、そのままでは叶いません。

ブラウザごとのユーザエージェント スタイル間の違いをなくすためにどのアプローチを使用すべきかという問題は、Normalize CSSとReset CSSで進行中の議論です。

参考:

• Chrome, Safari, Firefox, Edge 各ブラウザごとのデフォルトのスタイルシート、user agent stylesheetのまとめ

Normalize CSSとReset CSS

正しく機能するために推奨する方法を詳しく説明する前に、これら2つをよく知らない人にNormalize CSSとReset CSSについて説明します。

ブラウザのユーザーエージェント スタイル

ブラウザがHTMLページをレンダリングする時は、あなたのスタイルを適用する前に基本的なスタイルが適用されます。例えば、すべてのブラウザで<h1>から<h6>までの見出し要素は、通常のテキストとはスタイルが異なります。フォントのサイズは大きく、太さは太字で、上下に余白があります。

<h1>のChromeのユーザーエージェント スタイルを見てましょう。

すべてのブラウザは基本的なスタイルを適用しますが、各ブラウザは他のブラウザとは異なる特定のスタイルを持っているため、当然ながら矛盾の問題が発生します。このことがこの記事で取り上げるポイントです。

ブラウザによるこの不整合の問題を解決するために2つのアプローチが登場しました、Normalize CSSとReset CSSです。簡単に言うと、Normalize CSSは寛大なソリューションで、Reset CSSは攻撃的なソリューションです。

Normalize CSS

Normalize.cssは小さなCSSファイルで、HTML要素のデフォルトのスタイル設定でブラウザ間の一貫性を提供します。
参考: Normalize.cssの特徴や使い方などの解説

つまり、ブラウザによって適用されているスタイルを見て、一貫性に矛盾がある場合、Normalize.cssは違いがあるスタイルを修正します。

しかし、場合によってはIEやEdgeが原因で、問題のあるブラウザを標準に従って修正できない場合があります。このような場合、Normalize.cssの修正はIEやEdgeのスタイルを他のブラウザに適用します。

実際の例を見てましょう。
Chrome、Firefox、Safariは、<article> / <aside> / <nav> / <section>タグ内の<h1>タグを、独立した<h1>タグよりもサイズの小さいfont-sizeでレンダリングします、marginも異なります。
Chrome、Firefox、Safariのユーザーエージェント スタイルは下記の通りです。

IEとEdgeのブラウザは少数派ですが、この場合に適用されるスタイルは少数派です。理論的には、Normalize.cssで定義されているスタイルがIEとEdgeをターゲットにすることは理にかなっています。

Normalize.cssはNicolas Gallagherによって作成されたオープンソースのプロジェクトで、GitHubで継続的に更新されています。

Normalize.css

Reset CSS

Reset CSSはブラウザのデフォルトスタイルはまったく必要ないというアプローチで、Normalize.cssとは異なります。そのため、Reset CSSではブラウザのユーザーエージェントで定義されているすべてのスタイルをリセットします。

このアプローチは、前述の<h1>のスタイルでもうまく機能します。ブラウザのデフォルトで定義されているfont-sizeもmarginも必要としません。

Reset CSSにはいくつかの種類がありますが、人気が高いEric Meyer’s CSS Resetのを見てましょう。

このReset CSSでは、すべてのHTMLタグから、margin, padding, borderを取り除き、同じフォントサイズ、および同じ配置で定義されています。

Reset CSSでの問題点は、それらが醜いということです。セレクタの連鎖を持ち、それらは多くの不必要なオーバーライドをします。さらに悪いことに、それらはデバッグ時に読めません。

Reset CSS: セレクタの連鎖

問題点はありますが、<h1>から<h6>や<ul><li>のようにリセットしたいスタイルも含まれています。

Normalize CSSとReset CSSの両方を安心して使用する方法

私からの提案は、Reset CSSの有用な定義だけ使用して、あとはNormalize CSSで定義することです。両方のよいとこを賢く使います。

私は実際のプロジェクトで、それぞれの利点を取り入れています。Normalize CSSの利点が欲しいのですが、それ以外の場合には、セレクタの連鎖がないReset CSSの利点が欲しいのです。

私自身のCSS Resetの作り方

13年間の経験で、私はリセットしたいHTMLタグがあることを学びました。例えば、リンクの色、ボタンのデフォルト、リストのデフォルトなどがあります。

私が使用するのはnormalize.cssの他に、上書きしたいすべてのスタイルを定義するareset.local.cssを加えます。このファイルは通常のReset CSSとは異なり、タグの巨大なリストを作成するのではなく、特定のHTMLタグのスタイルのみが対象です。
実際の例をお見せします。

通常のReset CSSとは異なり攻撃的ではなく、読みやすくなっていると思います。

文字スタイルの定義

すべてのプロジェクトで使用するnormalize.cssとthelocal.reset.cssに加えて、基本的なタイポグラフィのために別のCSSファイルを用意します。このファイルは、Normalize CSSやReset CSSの一部ではありません。direction, font-family, font-size, line-height, colorなどのプロパティが定義された、Webサイトのタイポグラフィ用の基本のスタイルシートです。

すべてのファイルをまとめる

SASSプリプロセッサの利点を利用して、これらのファイルすべてを含む_reset.scssファイルを用意します。

• Normalize.css
• 私自身のCSS Reset
• タイポグラフィの用の基本のスタイルシート

_resets.scss fileは、下記のようになります。

終わりに

この記事では、私が長年に渡って学んだことの多くに基づいて、スタイルをノーマライズおよびリセットするためのCSSアーキテクチャを紹介しました。これからもCSSアーキテクチャについての記事を書く予定です。

参考記事

私の経験から学んだことが、あなたのためになることを願っています。

私のCSSに関する記事

• New CSS Logical Properties!
  翻訳: 知っておくと便利な論理プロパティ、ボックスモデルにおける古い方法とこれからの方法
• CSS Position Sticky — How It Really Works!
  翻訳: position: sticky;の仕組みや実際の使い方をやさしく解説

私の名前はElad Shechterで、CSSおよびHTMLの設計とアーキテクチャを専門とするWeb開発者で、Investing.comに勤務しています。