HTMLでの読み込み順に気を付けて

どうも、こんにちは。
友太郎(@yutarou_sakai)です。

CSSでbodyの全体にスタイルを適用させる時に、なぜか反映されておらず要素ごとにいちいちスタイルを適用していたことがありました。

まぁ、原因はHTML側での読み込み順だったので、今回は同じ現象で悩んでいる駆け出しプログラマーのために軽く紹介したいと思います。

HTMLでの読み込み順

HTMLのhead部分で色々読み込むと思います。

• ウェブフォント
• CSS
• Bootstrap

上記以外にも、必要に応じて追加します。
そしてhead内に記述されたものは、上から順番に読み込まれていきます。

ここでCSSの仕様の確認です。

CSSは下に書かれている記述が優先される

同じクラスに複数のスタイルが書かれていた場合、下に書かれたスタイルを優先して適用します。

これはHTMLの読み込み順でも同じで、複数のCSSファイルが同じクラスにスタイルを記述していた場合、後に読み込まれたファイルのスタイルを適用してしまうのです。

そのため、何も考えずに複数のCSSファイルをhead内に記述すると、思いもよらない所で不具合が出てしまうかもしれません！

Bootstrapは要注意

僕がはまったパターンはBootstrapの前にCSSを読み込んでしまい、CSSで全体に適用していたfont-familyがBootstrapによって上書きされてしまったからでした。

シンプルに読み込み順が悪さをしていたので、順番を変更するだけで解決しました。

もし、上手くスタイルが適用されない場合は、HTMLでの読み込み順なんかもチェックしてみてください！