外部CSSを適用させるための正しいソースコードの書き方

質問

dreamweaverCS4のバグではないかと思うのですが、外部スタイルシート（test.css）を作成し、それをHTMLファイル（test.html）へ適用させたいのですが、ファイルの階層が同じなので、以下のようにソースコードを書くのが正解だと思いますが、
<link href="test.css" rel="stylesheet" type="text/css">

以下のように、「../test.css」と「..」が付いても適用される場合があります。
<link href="../test.css" rel="stylesheet" type="text/css">

逆に「..」が付く方が正解で、付かない方が間違っているのでしょうか？

どっちが正しいのでしょうか？

そもそも「..」とは何でしょうか？
すみません、根本的なところからわかっていません。
よろしくお願いします。

回答No.4

4017B · ベストアンサー

これはUNIX系でのURLの書き方をwebでも採用してるのです(webサーバはUNIX系の環境が多い)。
ですので普段からUNIX系の環境で作業してる人には説明不要で最も簡単な書き方と言う事で。

＞Windowsでの書き方
　C:\hoge\hage\hoge.html

＞web(HTML)での書き方
　../hoge/hage/hoge.html
　http://www.hoge.com/hoge/hage/hoge.html

＞UNIXでの書き方
　/hoge/hage/hoge.html

で、ご質問の「..」ですが。
回答No.3 の模式図を参考になればおおよそ把握出来ると思います。
それに付け加える形で…

・ ./　………1つで「同じ」フォルダ内
・ ../ ………2つで「上の」フォルダ内
・ /　 ………0個で「絶対URL」と同じ意味

～と覚えて置いて下さい。
特に3番目の「絶対URL」の書き方は何かと便利です。
通常は絶対URLでは無く「相対URL」で書きなさいと指導されてると思いますが。

・http://www.hoge.com/hoge/hage/hoge.html
～コレと
・/hoge/hage/hoge.html
～コレは全く同じ意味になります。

お礼

なるほど！
根本から深く理解できました！
ありがとうございます！

回答No.3

yone_sk

"../"←これはカレントフォルダのひとつ上のフォルダをあらわします。

こんなフォルダ構成で、現在自分フォルダにいるとします。
-----------------------------
フォルダ１
　├自分フォルダ
　│　└フォルダ２
　└フォルダ３
　　　　└フォルダ４
-----------------------------
自分フォルダにファイルがある場合
　　"test.css"
　　又は "./test.css"

フォルダ２にある場合
　　"フォルダ２/test.css"
　　又は "./フォルダ２/test.css"

フォルダ４にある場合
　　"../フォルダ３/フォルダ４/test.css"

もちろん２つ上のフォルダをあらわすときは"../../"でいけます。

お礼

非常に詳細な説明ありがとうございます！

完全に理解できました！

回答No.2

MotoShin

「..」は１つ上のフォルダを指します。
つまり、htdocフォルダの中にindex.htmlがあって、htdocの上(つまりこのフォルダと同じ階層)にtest.cssがある場合、index.htmlからみたらhtdocの1つ上へ出なければなりません。その表現の方法が「..」です。(例"../test.css)
ちなみに「.」と、一個だけ書くと同じファイル階層を指します(普通省略します。例"./test.css")
ローカルでもいいので、できたhtmlファイルを（ドリームウィーバ上ではなく)インターネットエクスプローラなどで実行してみて、ちゃんと表示されていればドリームウィーバは大丈夫だと思います。

お礼

なるほど「.」は同じ階層、「..」と二つ付くと1つ上という表記方法なんですね。

理解できました、ありがとうございます！

回答No.1

yambejp

＞そもそも「..」とは何でしょうか？

相対的な自分の親のパスです。
たとえば自分が/hoge/fugaにあるファイルだとすれば..は/hogeです。

<link href="test.css" rel="stylesheet" type="text/css">
を書き換えるなら、..ではなく.ですね(ちなみに.は自分のパスです)
<link href="./test.css" rel="stylesheet" type="text/css">

お礼

なるほど、なんとなくわかったような気がします。

ありがとうございます！