現在FC2さんにサーバーをお借りしてPCサイトをつくっているものです。
HIMEISM(http://neo-himeism.net/)さんに疑似フレームのテンプレートをお借りして、半分以上はうまくいっているのですが、中身が増えてきたので小説と漫画とイラストをそれぞれ、indexなどより一つ下の階層に分けようとしたのですが、そうすると<link rel="stylesheet" type="text/css" href="img/style.css">としているにも関わらずCSSスタイルシートが呼び出されません。
今は何のディレクトリにも入っていないindexやlink、offなどが一番上の階層にあり、一つ下にスタイルシートやアイコンなどに使う画像が入れられた最初から入っていたimgのディレクトリ、小説、漫画、イラストそれぞれのディレクトリがある状態です。
img以外全部、何のディレクトリにも入れなければ正常に反映されます。
階層を分けたまま、すべてにテンプレートが反映されるようにしたいのですが、どうすればいいでしょうか。
No.1ベストアンサー
- 回答日時:
index.html が、href="img/style.css" なのですから、1つ下の階層に保存したファイルからなら、href="../img/style.css" です。
素早い反応ありがとうございます!
分からかったのは勘違いしていたからだということがわかりました…。
色々調べて、何度も../***/style.css"というのをみかけていたんですが、どれも../の..には該当する上の階層のディレクトリの名前が入るんだと思い、上には(Root)しかないぞ…??と混乱してしまっていました。
そのまま../や.../と打ち込み、下の階層になっていくにしたがって.を増やしていけばいいんですね。
ようやく理解できました。
解決できたと思います。
回答ありがとうございました!
助かりました!!
No.3
- 回答日時:
階層を分けた場合CSSの位置はフルパスで記載する必要が有ります。
<script src="http://hoge.com/global/nav/scripts/globalnav.js" type="text/javascript" charset="utf-8"></script>
No.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\にいれるか、ローカルサーバーをインストールするか・・
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS Dreamweaver のテンプレートでの相対パスの設定について 2 2023/06/13 17:28
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- その他(開発・運用・管理) バッチファイルで特定のファイル・ディレクトリ以外を削除する方法について 4 2022/05/31 14:03
- HTML・CSS htmltとcssの連携をして画像縮小について 1 2022/11/15 20:32
- HTML・CSS CSSが上手く反映されないみたいです 2 2022/11/21 16:19
- その他(開発・運用・管理) フォルダの中にファルダを作成してファイルを格納するバッチコマンド 1 2022/06/30 11:39
- その他(プログラミング・Web制作) 図に示す階層構造で,現在のディレクトリ(カレントディレクトリという)が*印のディレクトリであるとき, 2 2022/11/16 10:55
- HTML・CSS サルワカさんの吹き出しのスタイルシートについて。 https://saruwakakun.com/h 2 2022/10/28 22:55
- HTML・CSS PrettierのHTMLの記述変更 linkタグ 1 2022/06/23 04:06
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
インラインフレーム中の文字表...
-
自社パンフに印字するURLはどこ...
-
勝手にdatファイルになるのです...
-
WordでURLをクリックしてそのペ...
-
ギガファイル便って女の人のエ...
-
【緊急】JWWのファイルを開きた...
-
ホームページビルダーで作成し...
-
サーバーに転送したファイルが0...
-
既存のページをホームページビ...
-
ホスト名、サーバー名の意味
-
ハイパーリンクを新規ウィンド...
-
Windows Media Player 位置ス...
-
explorerをedgeで開く方法
-
[ブロック解除]の方法が知りた...
-
TSファイルをスムーズに再生したい
-
Skypeでのファイル転送速度が遅...
-
Linuxのリンクファイル制限につ...
-
Beckyで手を加えずに転送の送信...
-
外付けHDDの80GBのデータを内蔵...
-
PDFファイルをホームページ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
自作サイトをサーバーにアップ...
-
URLに付いてる~(チルダ?)って...
-
自社パンフに印字するURLはどこ...
-
インラインフレーム中の文字表...
-
トップページのindex.htmlを削...
-
ホームページのトップページ「i...
-
DirectoryIndex
-
ホームページの.indexに...
-
ワードで作成したHPのアップ...
-
Yahoo!のサイトエクスプローラ...
-
自社ホームページについて
-
自分のFC2ホームページが開けない
-
LINUXサーバーでWEBを表示させ...
-
自分のHPにアクセスできなく...
-
HPのディレクトリをDLされ...
-
サブドメインとマイドメインで...
-
ホームページが表示しない。
-
google サイトマップのエラー
-
静的HTMLで出力可能なスレッド...
-
WinSCPでのトラブル 文字化け...
おすすめ情報