Dreamweaver のテンプレートでの相対パスの設定について

Question

Dreamweaver 8を使用してサイトを構築しています。
サーバーはSAKURAサーバを使用しています。

次のようなディレクトリでサイトを構成しており、テンプレートフォルダはもちろんルートにあります。

------------------------------------------------------------
index.html
about.html
~~~.html
main.css

Templates（フォルダ）
　　　L　main.dwt

img（フォルダ）
　　  L　hoge.jpg

item（フォルダ）
       L　test.html
------------------------------------------------------------

item内の「test.html」には「main.dwt」のテンプレートが適用されています。

そこで、main.dwtの相対パスでmain.cssの読み込みを次のように記述しており「<link rel="stylesheet" type="text/css" href="../main.css">」今まで問題なかったのですが、先日、ある事に気づきました。


それは①であれば問題ないのですが、②であればcssが効かなくなり表示が崩れます。
①https://www.hoge.co.jp/item/test.html
②https://www.hoge.co.jp/item//test.html　・・・スラッシュを二重にしている

通常はスラッシュを二重にすることなどなく、またそのようなURLで辿りつくひとも居ないでしょうが、googleのサーチコンソールを確認すると②と同じような体裁で二重スラッシュのあるURLが重複ページとして多数警告を受けており、今回の質問に至った次第です。

通常、スラッシュが二個以上ある場合は一つのものとサーバは認識するようですが、私のサイトでは二重スラッシュをつけると表示が崩れてしまいます。

それで、相対パスの設定が誤っているのかと色々ためしたところ、test.htmlのテンプレートを一旦解除し、CSSの読み込みを「href="/main.css"」にし、Upしたところ、ページは表示崩れをおこしていなく、また上記②のように二重スラッシュをつけても問題なくCSSが適用されている状態でページが表示されるようになりました。。。ちなみに「href="main.css"」では表示がくずれます。

しかしこれは本来のパスではなく、main.cssのある階層は「test.html」からみれば一つ上です。
また、/main.css にパス変更するとF12でのブラウザプレビューではCSSが適用されておらず、今度はこちらの表示が崩れてしまいます。

本来であれば、ひとつ階層が上のファイルを読みに行くので、../main.css　にすべきなのは明確なのですが、webにアップすると「/main.css」でも正常に読み込まれ、また二重スラッシュを用いても一つのスラッシュとみなされて正常に表示されます。。。なぜに「/main.css」でもcssが正常に読み込まれているのか理解できていません。

上記につきまして、お気づきの点がございましたらご回答いただけましたら幸いです。
以上、何卒よろしくお願い申し上げます。

wanderer1 · Accepted Answer

「/main.css」は

ルートから見たときのパスを表します。

つまり、http://www.hoge.co.jp/
またはhttps://www.hoge.co.jp/

を基準として、そこからのパスなので、
「www.hoge.co.jp/main.css」という位置を示しています。

これは下層にあるどんなファイルも、www.hoge.co.jp/main.cssを読みに行く、ということです。

階層がどんなに深くても一番上のディレクトリからのパスを探すので、表示が崩れない、ということになります。

それに対して、

＞「href="main.css"」では表示がくずれます。

というのは、「./main.css」と同じ意味です。

test.htmlと同じ階層にあるmain.cssを探しにいくので、表示が崩れてる、ということになります。

「/」「./」「../」といった書き方があります。

相対パス、ルート相対パスについて、一度調べてみてください。

Ogre7077 · Answer

相対パス指定 "../main.css" は、
表示中のページ URL で一つ上の階層から読みます
一つ上の階層とは、
ご提示のスラッシュ二重 URL では名前のない階層があるため
xxx://hoge.example.com/item// ← 表示中のページ URL の階層
xxx://hoge.example.com/item/ ← 一つ上の階層
このためブラウザはファイルを取れず表示崩れする

絶対パス指定 "/main.css" は、
表示中のページ URL で最上位の階層から読みます
最上位の階層とは、
URL のサーバー名部分までのことなので
xxx://hoge.example.com/item//  ← 表示中のページ URL の階層
xxx://hoge.example.com ← 最上位の階層
このためブラウザはファイルを取れる

ただし、サイトに上げる前のブラウザプレビューでも同様に処理されるので
file://localhost/Users/you/docs/web/item/ ← 表示中のページ URL の階層
file://localhost ← 最上位の階層
おそらくこの階層にファイルが無いのでブラウザは表示崩れする

絶対パス指定のページは、ローカル環境では試験用サーバーを経由させるなどの工夫が無いと表示できなくなるので、ご注意ください

余談ではありますが、
Dreamwaver ならばテンプレートの相対パスを適示補正してくれるようです
https://helpx.adobe.com/jp/dreamweaver/kb/228553.html

Dreamweaver のテンプレートでの相対パスの設定について

「/main.css」は

相対パス指定 "../main.css" は、

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング