【.htaccess】サブディレクトリでルート相対パスを使う方法

RELEASE / 2024.3.6 UPDATE / 2024.05.14

.htaccess

ルート相対パス

画像やCSSなどのファイルを参照する際には、通常「絶対パス」、「相対パス」、そして「ルート相対パス」の3種類の書き方があります。
ルート相対パスを使用する場合、参照の起点は常にWEBサーバーの最上位にあるルートディレクトリになります。

WEBサイトのファイル一式をサブディレクトリにアップロードすると、ルート相対パスで参照されているファイルがリンク切れを引き起こす可能性があります。
この問題を解決するためには、参照されているファイルをルートディレクトリを基準に移動させるか、相対パスに変更するか、または絶対パスに変更するかのいずれかの方法を選択する必要があり、そのまま一式をアップロードすることは出来ません。

最終的には、再度ルート相対パスに書き換えることで問題を解決できますが、出来るだけそのままの記述を維持したいという場合もあります。
そこで今回はサブディレクトリでルート相対パスを使う方法をご紹介したいと思います。

この記事の目次を表示

1 前提条件
2 サブディレクトリでルート相対パスを使う方法
3 まとめ

前提条件

まずはじめに前提条件を記載します。

ディレクトリ構成は以下のような状態です。

root/
　└ staging/
　　　├ index.html
　　　├ css/
　　　│　└ style.css
　　　└ images/
　　　　　└ logo.jpg

そして、index.htmlからstyle.cssとlogo.jpgのパスは以下のように指定されている想定です。

<link rel="stylesheet" href="/css/style.css">
<img src="/images/logo.jpg" alt="サイトロゴ">

index.htmlに書かれているルート相対パスはindex.htmlがどんなに深い階層にアップされていたとしてもルートディレクトリにあるファイルを参照するため、参照ファイルが見つからずリンク割れになります。

root/
　├ staging/
　：　├ index.html
　：　├ css/
　：　│　└ style.css
　：　└ images/
　：　　　└ logo.jpg
　│
　├ css/
　│　└ style.css　← ここを参照している
　└ images/
　　　└ logo.jpg　← ここを参照している

サブディレクトリでルート相対パスを使う方法

サブディレクトリでルート相対パスを使う場合、.htaccessに以下のようなコードを書きます。

Options +SymLinksIfOwnerMatch
RewriteEngine on
RewriteBase /
RewriteCond %{HTTP_REFERER} /staging/
RewriteCond %{REQUEST_URI} !/staging/
RewriteRule ^(.*)$ staging/$1 [L,R]

そしてこのファイルをルートディレクトリにアップします。ここで注意が必要なのが作業をしているサブディレクトリではなく、ルートディレクトリにアップするという点です。

root/
　├ staging/
　│　├ index.html
　│　├ css/
　│　│　└ style.css
　│　└ images/
　│　　　└ logo.jpg
　└ .htaccess　← ここにアップする

これだけでサブディレクトリでルート相対パスを使うことが出来るようになります。

まとめ

いかがでしたか？
.htaccess を使うことで、サブディレクトリでルート相対パスを利用することができます。サブディレクトリにアップロードする際に書き換える方法もありますが、その際には余計な手間がかかったり、変換ミスが発生したり、不要なバグが発生する可能性が高くなるため、出来るだけ避けたいところです。
その代わりに、.htaccess を使ってサブディレクトリでルート相対パスを利用出来るように設定する方法を採用することがおすすめです。