WebDesigner's Memorandumウェブデザイナーの備忘録

CSSの読み込みで「its MIME type (‘text/html’) is not a supported stylesheet MIME type」エラーが表示されて読み込みができない場合の解決方法

最近SSIを使ったときにCSSのスタイルが反映されず、Google Chromeの開発者ツールで下記のエラーが出ていました。

Refused to apply style from ‘[CSSのファイルパス]’ because its MIME type (‘text/html’) is not a supported stylesheet MIME type, and strict MIME checking is enabled

直訳すると下記の通りです。

厳密なMIMEチェックが有効になっていて、なおかつMIMEタイプがサポートされているものではないため、'[CSSのファイルパス]’からのスタイル適用を拒否しました。

MIMEタイプというのはCSSを読み込むときの「type」属性内に入力するものです。
これを入力することで「このファイルはCSSファイルです」と明示的に示せます。

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

このMIMEタイプがサポートされているものではない(「text/html」になっている)というエラーです。
しかし実際はファイルパスが原因の場合が多いみたいです。

ファイルパスを確認する

MIMEタイプを間違えて入力していることは少なく、ほとんどの場合は「hrefでのパス指定が間違えている」みたいです。

特に今回の場合はSSIを使っていたため、相対パスを使う場合はSSIの読み込み先から位置を指定する必要がありました。
パスを指定しなおすとエラーは解消されて無事スタイルが適用されました。

念のためtype指定も確認する

普通にテキストエディタを使っていると自動で補完されるため、CSSファイルの読み込みなのに「text/html」になっていることはまず無いと思います。
ただ、念のため<link>タグを確認して、type属性が「text/css」になっているか確認しましょう。

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね