外部スタイルシートが反映されない問題 - 西尾泰和のはてなダイアリー

外部スタイルシートを指定して、

<link type="text/css" href="/style.css" rel="stylesheet" />

サーバのログにはきちんとそのスタイルシートへのアクセスがあって200 OKが返されている

"GET /style.css HTTP/1.1" 200 -

にも関わらず、ブラウザ上でその外部スタイルシートで定義されたスタイルが当たっていないという現象が起きた。

原因は、HTTPレスポンスのcontent-typeがtext/htmlになっていたことで、text/cssを返すように修正したら解決した。

ApacheでもGoogle App Engineでもデフォルトで「拡張子が.cssの際にはcontent-type: text/css」という設定になっているのだろう。試しにPNGの画像の拡張子を.cssにしてみたらtext/cssでレスポンスが来た。

慣習的にスタイルシートの拡張子を.cssにしているので今まで意識せずにいたが、今回CSSをテンプレートエンジンでレンダリングしようとしたので発覚した。重要なのはcontent-type: text/css。覚えた。