相対パスと絶対パスの違いで画像/CSSが崩れる時の直し方
トップページでは画像やCSSが出るのに、記事ページだけ崩れる時は、パスの基準点がずれている可能性があります。公開後のトラブルではかなり多い原因です。
パスは「どこを基準に探すか」で変わる
相対パスは今開いているページから探し、ルート相対パスはサイトの根元から探します。共通CSSや画像はルート相対パスにすると迷いにくくなります。
相対パスは現在ページから見る
assets/css/style.css は、今開いているページの場所を基準に探します。深い階層のページでは、存在しない場所を見に行くことがあります。
ルート相対パスはサイトの根元から見る
サイト共通のCSSや画像は、先頭に / を付けるルート相対パスが分かりやすいです。
<link rel="stylesheet" href="/assets/css/style.css">
<img src="/assets/images/sample.jpg" alt="サンプル">絶対URLは外部共有向き
https://example.com/assets/... のような絶対URLはOGPやメール内リンクでは便利ですが、開発中にドメインを変えると修正が増えます。
迷ったらURLを直接開く
画像やCSSが読み込めない時は、ブラウザでそのURLを直接開きます。404ならパス違い、403なら権限や.htaccess、200ならキャッシュやCSS指定を疑います。