こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

階層の違うディレクトリでのCSSの呼び出し方

現在FC2さんにサーバーをお借りしてPCサイトをつくっているものです。
HIMEISM(http://neo-himeism.net/)さんに疑似フレームのテンプレートをお借りして、半分以上はうまくいっているのですが、中身が増えてきたので小説と漫画とイラストをそれぞれ、indexなどより一つ下の階層に分けようとしたのですが、そうすると<link rel="stylesheet" type="text/css" href="img/style.css">としているにも関わらずCSSスタイルシートが呼び出されません。
今は何のディレクトリにも入っていないindexやlink、offなどが一番上の階層にあり、一つ下にスタイルシートやアイコンなどに使う画像が入れられた最初から入っていたimgのディレクトリ、小説、漫画、イラストそれぞれのディレクトリがある状態です。
img以外全部、何のディレクトリにも入れなければ正常に反映されます。

階層を分けたまま、すべてにテンプレートが反映されるようにしたいのですが、どうすればいいでしょうか。

投稿日時 - 2012-09-18 23:14:00

QNo.7705216

困ってます

質問者が選んだベストアンサー

index.html が、href="img/style.css" なのですから、1つ下の階層に保存したファイルからなら、href="../img/style.css" です。

投稿日時 - 2012-09-19 00:03:11

お礼

素早い反応ありがとうございます!

分からかったのは勘違いしていたからだということがわかりました…。
色々調べて、何度も../***/style.css"というのをみかけていたんですが、どれも../の..には該当する上の階層のディレクトリの名前が入るんだと思い、上には(Root)しかないぞ…??と混乱してしまっていました。
そのまま../や.../と打ち込み、下の階層になっていくにしたがって.を増やしていけばいいんですね。
ようやく理解できました。

解決できたと思います。
回答ありがとうございました!
助かりました!!

投稿日時 - 2012-09-19 00:51:34

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

-広告-
-広告-

回答(3)

ANo.3

階層を分けた場合CSSの位置はフルパスで記載する必要が有ります。
<script src="http://hoge.com/global/nav/scripts/globalnav.js" type="text/javascript" charset="utf-8"></script>

投稿日時 - 2012-10-03 04:33:54

お礼

ありがとうございます!^^

投稿日時 - 2014-01-26 19:53:16

ANo.2

 本来は絶対パスで指定しておけばどこにHTMLを移動してもパスを書き換えなくてよいのですが、その場合ローカルでのテストはできないでしょう。
 ローカルでテストする方法もあるのはありますが・・・。絶対パスでの師弟については、今回は説明しません。

 ./ カレントディレクトリを指します。(カレントとはそのファイルの存在する階層)
   これを書かない場合も同じです。

 現在表示しているHTMLの場所が
hoge.com/novel/sakura/page1.html
 だとするとカレントは、
hoge.com/novel/sakura/
 です。そのHTML内で
 ./images/photo/abc.jpgと指定してあれば、【ブラウザは】!!大事です!!!は、そのHTMLを完成させるため、hoge.comサーバーに対して
/novel/sakura/images/abs.jpgをよこせと請求します。
 単に images/photo/abc.jpgでもまったく同じです。

 もし、
 ../images/photo/abc.jpg
 と指定してれば、サーバーに対して
/novel/images/abs.jpg
 をよこせといいます。

さらに
 ../../images/photo/abc.jpg
 と指定してれば、サーバーに対して
/images/abs.jpg
 をよこせといいます。

・・・・ウェブサイトを構築する場合、このパス指定はとても重要な基礎知識です。しっかり身につけておきましょう。
・・・・色々なファイルを散らばらせておくと、先で増えたときワケワカメになります。きちんと整理しましょう。
/
|-- index.html
|-- images/
|   |-- photo
|   |-- figure
|--css/
|--novel
|   |-- images novel内だけで使用する画像



[ちょっと難しい話]
 絶対パスの場合の指定は
/novel/sakura/images/abs.jpg
 と.をつけませんから、そのまま
/novel/sakura/images/abs.jpg
 をよこせと言います。この場合は、そのHTMLがどこに書かれていても、いつもそれを要求しますから、HTMLは【書き換えなくても】どこにでも移動できますね。・・・ですが、色々と面倒くさい高度な設定をしないとローカルではテストできません。
・サーバーと同じ階層に入れておく
 hoge.com/anata/があなたのサイトでしたら D:\anata\にいれるか、ローカルサーバーをインストールするか・・

投稿日時 - 2012-09-20 20:13:39

お礼

詳しくありがとうございました!

投稿日時 - 2014-01-26 19:54:02

-広告-
-広告-

あなたにオススメの質問

-広告-
-広告-