そのcssが打ち消されるのは、ファイルを読み込む順番が間違っているせいかも

2020.08.16 更新日:2023.02.27

久しぶりに個人制作コーディングをしていたら、なぜかbase.cssファイルの記述が打ち消されている？ということが起こりました。

原因が単純にHTML内の記述ミスでしたが調べてみても答えが見つからず、なんとか自力で解決しました。(解決するのに半日ほどかかりました…)
私と同じようなタイムロスする人をなくしたい！という思いから記事にまとめました。

cssはブラウザごとに初期設定が異なります。
そこで初期設定を自分で設定したものがbase.cssです。
reset.cssなど様々な名前や記述形式があるので、気になった方は検索してみてください。

なぜかcssが打ち消される？

html全体にフォントサイズを62.5%に指定し、16px = 1.6remのように記述したいのですが、なぜかこれが打ち消されていました。

色々調べてchromeのバグかも、htmlだけでなくbodyにも指定が必要？との情報を見つけましたがいずれも解決には至らず…

html { font-size:62.5%; }が打ち消されているので、ブラウザのデフォルトサイズが基準となった設定で計算されます。
chromeの場合は16pxが基準なので、1rem=16pxとなり、1.6remにすると16px×1.6rem=25.6pxになってしまいます。

かなりややこしくなりますね…

解決策を調べても答えが出ないので、ブラウザの検証ツールで過去に作成したコーディングデータと今作成してるデータを比較してみることに。

すると、過去のデータではbase.cssが読み込まれているのに、今自分が作成しているものではbase.cssが打ち消されて、代わりにreset.cssの記述が読み込まれていることがわかりました。

コーディングファイルに戻って比べてみると、head内のlinkタグの記述する順番が違っていることに気付きます。

今回は先にbase.css、次にreset.cssの順番で読み込ませていました。
これを逆に、reset.css・base.cssの順番に入れ替えた記述にしてみると…

無事にbase.cssのhtml{ font-size:62.5%; }が上書きされた状態で反映されました！

修正後は16px = 1.6remのような記述がきちんと反映されました。

特に意識せず記述していましたが、reset.cssで打ち消されていたのでlinkタグもきちんと順番を考えて記述しないといけないですね。

このように、コーディングをしていると「なんでこれ効かないんだろう？」に出くわすことが多々あります。
調べてみても思うように解決しないこともありました。

身近ですぐ誰かに聞けたら良いですが、そうではない環境の方や「さすがにこんなことを聞くのはなぁ…」と躊躇してしまう方もいるのではないでしょうか。

そんな時、私は他のWebサイトと自分の記述を細かく比べてみます。
そこで「この書き方を参考にするのはどうだろう？」「この記述は必要ないかもしれない」と一つずつ仮説を立て検証…を繰り返していきます。

一つずつ細かく比較、書き直しをして解決できれば良いですが、かなり時間がかかります。

一番参考にオススメしたいのが、過去に自分で作成したコーディングデータです。
自分が書いたものであれば、書き方も大きく違わないでしょうし「ここの書き方が違う！」という点を見つけやすいです。

今回は単純にlinkタグでcssファイルを読み込む順番が間違っているだけでした。

意外と答えはシンプルなことが多いので、「調べてみても解決しなかった。でもなるべく自力で解決したい」という方は既存のサイトや過去に自作したコーディングデータと比較してみるとあっさり答えが見つかるかもしれません。

まさかこんなところで…という場所で記述ミスなど起こりがちですので、少し離れて見ることもオススメです。