素敵な1K物件探し中な四条せつなです。
コーディングする人なら「CSSのリセット」について調べてこともあると思います。おそらく一昔前の方法をしている人や、詳しく調べたことのない人なら、「ユニバーサルセレクタ」でCSSリセットをしていると思います。しかし、「ユニバーサルセレクタ」を用いたCSSリセットはしない方がいいですよ！
コピペで正しいCSSリセットできるようにこの記事ではしてます！また、せっかくなので「ユニバーサルセレクタ」でのCSSリセットが、何故良くないのか？も説明します。
そもそも「CSSリセット」をする意味とは？
ではまず、「CSSリセット」をする意味をおさらいしていきたいと思います。
CSSリセットは、簡単に言うと“ブラウザによる表示のブレ”を最小限にするものです。
ブラウザには、特にCSSで指定がなければこのように表示しよう、というデフォルト設定が存在します。なので、IEとChromeで表示が微妙に違う！…なんてこともある訳ですね。これでは、表示にブレが生じてしまうので、少々困りものです。
だから、そのような“ブラウザによる表示のブレ”をなくすために、「CSSリセット」を行うわけですね！
ユニバーサルセレクタで「CSSリセット」をしてはいけない理由
先程説明したような”ブラウザによる表示のブレ”をなくすために、CSSリセットを行います。しかし、一昔前までは「ユニバーサルセレクタ」でCSSリセットを行うことが多かったのです。
上記のような感じで、CSSリセットをしていた人も多いと思います。しかし、現在ではこの方法でのCSSリセットは良くないとされています。
その理由は・・・
- ブラウザのレンダリングが遅くなる。
- 良いデフォルトのCSSをリセットしてしまう。
- フォームの表示がおかしくなるブラウザがある。
こんな感じです。
簡単に言うと、コードは短いので一見良さそうに見えるのですが、使わない要素に関しても全部リセットを掛けにいってしまいます。その結果、レンダリングも遅れてしまい、SEO的に不利になってしまう。また、デフォルトのままで良いものまでリセットをして、またデザインし直しという、２度手間が生じてしまう。ということです。
なので、現在では、「ユニバーサルセレクタ」でのCSSリセットは推奨されておらず、これから紹介する方法でのリセットが良いとされています。
おすすめは「html5 Doctor」によるCSSリセット！
「CSSリセット」には、様々なテンプレートが海外で用意されていますが、私はこちらの「html5 Doctor」がおすすめです！
おすすめの理由は、“使いやすさ”です。最低限のリセットを行ってくれて、かつユーザーによっての改変がしやすいようになっています。
特に好みがなければ、こちらを使用することをおすすめしますよ！
せつなのまとめ
特に今まで気にしていなくて、「ユニバーサルセレクタ」で「CSSリセット」をしている人もいると思います。しかし、今回紹介したいように、その方法ではデメリットが多いです。正しいCSSリセットを用いて、ページの読み込みを早くするのも大切なことを覚えておきたいですね！
つまりは…
- ユニバーサルセレクタのCSSリセットはNG！
- 誤ったCSSリセットは読み込みを遅くする！
- 正しいCSSリセットを使おう！
って、ことだねっ！
ということで、“【HTML】「ユニバーサルセレクタ」はデメリットだらけ！”正しいCSSリセット”とは？”でした！でわでわっ！
コメントを残す