リセットCSSを上書きできない問題を解決する

ブラウザごとの表示の違いをなくすためにリセットCSSを使用する人は多いと思います。ところが、リセットCSSを使っていて困るのが、次のようなことが起こったときです。

コンスキ

・リセットCSSが上書きできない
・他のCSSがリセットCSSで上書きされる

この問題の対処法を紹介します。

原因：リセットCSSの読み込みを他のCSSよりあと行っている
対処法：リセットCSSを一番最初に読み込む
!importantを付ければ解決できるけれど
他にも考えられる原因

原因：リセットCSSの読み込みを他のCSSよりあと行っている

この問題が起こる原因は、ほとんどの場合CSSファイルを読み込んでいるlinkタグが書かれる順番に関係しています。

例えば、HTMLファイルの中で次のような２つのCSSファイルを読み込んでいたとします。

style.css 　　　→ 自分で作った優先させたいCSS
destyle.css　　　 →　　リセットCSS

多くの場合CSSファイルはlinkタグを使って読み込みます。このパターンの場合、次のように優先させたいCSSを先に、リセットCSSをその後に読み込んでいることが原因です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>リセットCSSが上書きできない</title>
  <link rel="stylesheet" type="text/css" href="style.css">　　 <!-- 優先させたいCSS -->
  <link rel="stylesheet" type="text/css" href="destyle.css">   <!-- リセットCSS -->
</head>
<body>
<!-- 以下省略 -->

検証機能を使ってスタイルの状態を確認するとこんな感じに。

リセットCSSによって新しいCSSを効かせることができないという状況です。

対処法：リセットCSSを一番最初に読み込む

対処法は、先にリセットCSSを読み込むことです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>リセットCSSが上書きできない</title>
  <link rel="stylesheet" type="text/css" href="destyle.css">   <!-- リセットCSS -->
  <link rel="stylesheet" type="text/css" href="style.css">　　 <!-- 優先させたいCSS -->
</head>
<body>
<!-- 以下省略 -->

さっきと読み込む順番を逆にしただけですね。

普通はリセットCSSで最初から効いているスタイルをなくし、その後に自分で作成したCSSで上書きしていくと思います。

そのため、複数のCSSファイルを読み込む場合は、リセットCSSを一番最初に読み込むということを意識すると良いかもしれません。

リセットCSSを上書きできない問題や、追加したいスタイルがリセットCSSによって上書きされてしまう問題を防ぐことができます。