【HTML】「ユニバーサルセレクタ」はデメリットだらけ!”正しいCSSリセット”とは?

スポンサーリンク

素敵な1K物件探し中な四条せつなです。

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

四条ねこ
実は、「ユニバーサルセレクタ」でのCSSリセットだと、ページの読み込みを遅くしてしまうんだよー!だから、正しいCSSリセットの方法を1つ紹介するねっ!

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

そもそも「CSSリセット」をする意味とは?

そもそも「CSSリセット」をする意味とは?

ではまず、「CSSリセット」をする意味をおさらいしていきたいと思います。

CSSリセットは、簡単に言うとブラウザによる表示のブレ”を最小限にするものです。

ブラウザには、特にCSSで指定がなければこのように表示しよう、というデフォルト設定が存在します。なので、IEとChromeで表示が微妙に違う!…なんてこともある訳ですね。これでは、表示にブレが生じてしまうので、少々困りものです。

四条ねこ
それは困るよね!その都度コーディングし直すのも、めっちゃ面倒だし!

だから、そのような“ブラウザによる表示のブレ”をなくすために、「CSSリセット」を行うわけですね!

ユニバーサルセレクタで「CSSリセット」をしてはいけない理由

ユニバーサルセレクタで「CSSリセット」をしてはいけない理由

先程説明したような”ブラウザによる表示のブレ”をなくすために、CSSリセットを行います。しかし、一昔前までは「ユニバーサルセレクタ」でCSSリセットを行うことが多かったのです。

上記のような感じで、CSSリセットをしていた人も多いと思います。しかし、現在ではこの方法でのCSSリセットは良くないとされています。

その理由は・・・

  • ブラウザのレンダリングが遅くなる。
  • 良いデフォルトのCSSをリセットしてしまう。
  • フォームの表示がおかしくなるブラウザがある。

こんな感じです。

四条ねこ
ふむふむ…!悪いことだらけだね…

簡単に言うと、コードは短いので一見良さそうに見えるのですが、使わない要素に関しても全部リセットを掛けにいってしまいます。その結果、レンダリングも遅れてしまい、SEO的に不利になってしまう。また、デフォルトのままで良いものまでリセットをして、またデザインし直しという、2度手間が生じてしまう。ということです。

なので、現在では、「ユニバーサルセレクタ」でのCSSリセットは推奨されておらず、これから紹介する方法でのリセットが良いとされています。

おすすめは「html5 Doctor」によるCSSリセット!

おすすめは「html5 Doctor」によるCSSリセット!

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

四条ねこ
コードは上記のをそのままコピペするか、DLして使ってくださいね!

おすすめの理由は、“使いやすさ”です。最低限のリセットを行ってくれて、かつユーザーによっての改変がしやすいようになっています。

特に好みがなければ、こちらを使用することをおすすめしますよ!

四条ねこ
今回のポイントは、CSSリセットは「ユニバーサルセレクタ」でしないことだねっ!

せつなのまとめ

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

四条ねこ

つまりは…

  • ユニバーサルセレクタのCSSリセットはNG!
  • 誤ったCSSリセットは読み込みを遅くする!
  • 正しいCSSリセットを使おう!

って、ことだねっ!

ということで、“【HTML】「ユニバーサルセレクタ」はデメリットだらけ!”正しいCSSリセット”とは?”でした!でわでわっ!

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です