トワイライツ・ノーツ

読書感想と自転車と雑記

CSSとJavaScriptの読み込み順によってはスタイルが適用されないことがある

かなりハマったので覚え書き代わりに。

ページの読み込み時に一部のCSSだけが反映されなくて、ソースコードをあちこちひねり回していたのです。

最初に疑ったのは、後からスタイルを上書きされているとか、CSSファイルが読み込めていないとか、JavaScriptでなにかやっているとか、そういうことでした。

でも、該当のページは他のページと何ら違いはなくて、唯一違いと言えばheadタグ内にCSSの記述があったくらいでした。

こんな感じです。

【該当ページ】

<head>
[外部の共通CSSファイル読み込み]
[JavaScriptjQueryファイルの読み込み]

[インラインCSS]
</head>

その読み込み時に表示されないのが、ちょうどそのインラインCSSの記述部分でした。まさかなあ……と思ってこのインラインCSSを、共通のCSSファイルに移動させたところ、ちゃんと表示されるようになりました。

正直、え、それで良かったの? と拍子抜け。

【該当ページ:変更後】

<head>
[外部の共通CSSファイル読み込み]←ここにインラインCSSを移動
[JavaScriptjQueryファイルの読み込み]

なぜこんなことになるのかという理由はよくわからないのですが、とりあえずCSSの読み込みをJavaScriptの読み込みより後に行うと、CSSが読み込まれず、スタイルが適用されない……ということがあるようです。

JSの前にCSS読み込まないと色々うまくいかないことがある - Takazudo hamalog

Webデザイナーでもできる、サイトのパフォーマンスをあげる5つの方法|Web Design KOJIKA17

読み込み順には気をつけよう……と思った出来事でした。そもそもあまりインラインCSSを使わないようにしたい。読み込み順によってはパフォーマンスも変わるようです。

まだまだ勉強中。考えながら読んでいるので、意外と読むのに時間がかかってしまう。