素敵な1K物件探し中な四条せつなです。
コーディングする人なら「CSSのリセット」について調べてこともあると思います。おそらく一昔前の方法をしている人や、詳しく調べたことのない人なら、「ユニバーサルセレクタ」でCSSリセットをしていると思います。しかし、「ユニバーサルセレクタ」を用いたCSSリセットはしない方がいいですよ!

コピペで正しいCSSリセットできるようにこの記事ではしてます!また、せっかくなので「ユニバーサルセレクタ」でのCSSリセットが、何故良くないのか?も説明します。
そもそも「CSSリセット」をする意味とは?

ではまず、「CSSリセット」をする意味をおさらいしていきたいと思います。
CSSリセットは、簡単に言うと“ブラウザによる表示のブレ”を最小限にするものです。
ブラウザには、特にCSSで指定がなければこのように表示しよう、というデフォルト設定が存在します。なので、IEとChromeで表示が微妙に違う!…なんてこともある訳ですね。これでは、表示にブレが生じてしまうので、少々困りものです。

だから、そのような“ブラウザによる表示のブレ”をなくすために、「CSSリセット」を行うわけですね!
ユニバーサルセレクタで「CSSリセット」をしてはいけない理由

先程説明したような”ブラウザによる表示のブレ”をなくすために、CSSリセットを行います。しかし、一昔前までは「ユニバーサルセレクタ」でCSSリセットを行うことが多かったのです。
上記のような感じで、CSSリセットをしていた人も多いと思います。しかし、現在ではこの方法でのCSSリセットは良くないとされています。
その理由は・・・
- ブラウザのレンダリングが遅くなる。
- 良いデフォルトのCSSをリセットしてしまう。
- フォームの表示がおかしくなるブラウザがある。
こんな感じです。

簡単に言うと、コードは短いので一見良さそうに見えるのですが、使わない要素に関しても全部リセットを掛けにいってしまいます。その結果、レンダリングも遅れてしまい、SEO的に不利になってしまう。また、デフォルトのままで良いものまでリセットをして、またデザインし直しという、2度手間が生じてしまう。ということです。
なので、現在では、「ユニバーサルセレクタ」でのCSSリセットは推奨されておらず、これから紹介する方法でのリセットが良いとされています。
おすすめは「html5 Doctor」によるCSSリセット!

「CSSリセット」には、様々なテンプレートが海外で用意されていますが、私はこちらの「html5 Doctor」がおすすめです!

おすすめの理由は、“使いやすさ”です。最低限のリセットを行ってくれて、かつユーザーによっての改変がしやすいようになっています。
特に好みがなければ、こちらを使用することをおすすめしますよ!

せつなのまとめ
特に今まで気にしていなくて、「ユニバーサルセレクタ」で「CSSリセット」をしている人もいると思います。しかし、今回紹介したいように、その方法ではデメリットが多いです。正しいCSSリセットを用いて、ページの読み込みを早くするのも大切なことを覚えておきたいですね!

つまりは…
- ユニバーサルセレクタのCSSリセットはNG!
- 誤ったCSSリセットは読み込みを遅くする!
- 正しいCSSリセットを使おう!
って、ことだねっ!
ということで、“【HTML】「ユニバーサルセレクタ」はデメリットだらけ!”正しいCSSリセット”とは?”でした!でわでわっ!
コメントを残す
コメントを投稿するにはログインしてください。