koheitakahashiのブログ

2020.07.01にプログラマーとして生を受けた私が学んだことや、日常について徒然に書いていきます。

CSSファイルが読み込めないエラーが出たときはパスを確認すべし

docs CSS Sinatra

はじめに

Sinatraでメモアプリを製作中、「残すはデザインのみ😆」と意気込んでCSSを書いていたのですが、CSSの記述が反映されないという問題が発生しました💦

その問題の解決までをまとめました。

環境

MacOS Mojave 10.14.6 ruby 2.6.3

問題

CSSファイルの記述が反映されないという問題でした。 GoogleChromeの検証モードを確認したところ、コンソール上に以下のエラー文がありました。

エラー文

Refused to apply style from 'http://localhost:4567/public/CSS/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

MIMEタイプがサポートされていないとのこと。しかし、後述するようにMIME typeが問題ではなかったのです😭

以下はエラーが発生した時のディレクトリ構造です。

.
├── Gemfile
├── Gemfile.lock
├── app.rb
├── public
│   └── css
│       └── style.css
└── views
    ├── edit.erb
    ├── memo.erb
    ├── new.erb
    └── top.erb

解決方法

エラーの原因はerbファイルに記載していたstyle.cssファイルのパス間違いでした。

エラーが発生した時のerbファイルに記載していたパス

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

正しいパス

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

解説

どうしてこのような間違いが起こってしまったのか。その理由は以下の2つの勘違いにありました。

勘違い_1: 相対パスの基点を間違えていた。

私はerbファイルに記述するcssファイルの相対パスは、erbファイルを基点としたものだと考えていました。 だから、erbファイルから出発して、cssファイルにたどり着くまでのパスは../public/CSS/style.cssになると考えていました。

しかし、これは間違いだったのです。 HTML - 相対パスでのファイルの読み込みについて｜teratailより、以下のようにありました。

必ずブラウザでアクセスしたフォルダが起点（カレントディレクトリ）となります。

これに従うと、私の場合、ブラウザではapp.rbが実行されています。そのため、相対パスの基点はapp.rbとなるようです。

勘違い_2: publicをパス中に記載していた。

Sinatra: README (Japanese)より、以下のようにありました。

ノート: この静的ファイル用のディレクトリ名はURL中に含まれません。 例えば、./public/css/style.cssはhttp://example.com/css/style.cssでアクセスできます。

つまり、publicはパス名に記載しないことが原則としてあるようです。

まとめると

今回の私のエラーは相対パスの間違いと、publicをパス名の中に含んで記述していたことが原因だと考えられます。

初歩的な間違いで恥ずかしいです💦

実際にMIME typeが問題のこともあるようで、調べたら色々な解決法がありました。

が、今回は、「MIME typeのエラーと書かれていても、その前に初歩的な間違いの可能性もあるよ」と、私の失敗が皆さんのお役に立てれば幸いです😅