階層の違うディレクトリでのCSSの呼び出し方
- FC2サーバーを利用してPCサイトを制作しており、HIMEISMのテンプレートを使用しています。ディレクトリを分けた際にCSSスタイルシートが正しく呼び出されない問題が発生しています。解決方法を教えてください。
- PCサイト制作にFC2サーバーとHIMEISMのテンプレートを使用しています。ディレクトリを分けた際にCSSスタイルシートの呼び出しがうまくいかない問題が発生しています。解決方法をご教示ください。
- FC2サーバーを使用し、HIMEISMのテンプレートを利用してPCサイトを作成しています。ディレクトリを分けるとCSSスタイルシートの呼び出しがうまくいかなくなる問題があります。解決方法を教えてください。
- ベストアンサー
階層の違うディレクトリでの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以外全部、何のディレクトリにも入れなければ正常に反映されます。 階層を分けたまま、すべてにテンプレートが反映されるようにしたいのですが、どうすればいいでしょうか。
- sotoya
- お礼率78% (57/73)
- レンタルサーバ・ASP
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
index.html が、href="img/style.css" なのですから、１つ下の階層に保存したファイルからなら、href="../img/style.css" です。
その他の回答 (2)
階層を分けた場合CSSの位置はフルパスで記載する必要が有ります。 <script src="http://hoge.com/global/nav/scripts/globalnav.js" type="text/javascript" charset="utf-8"></script>
お礼
ありがとうございます！^^
- ORUKA1951
- ベストアンサー率45% (5062/11036)
本来は絶対パスで指定しておけばどこに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
- ＣＳＳが反映されない（相対パスを使う？）
ＦＣ２でホームページを作っています。 ＲＯＯＴディレクトリには ｓｔ．ｃｓｓ、ｉｎｄｅｘ．ｈｔｍｌ などを作りました。そこにある全ての ページにＣＳＳが反映されています。 その下の階層に ｉｍｇディレクトリと、自分の書いた作品を入れるためのディレクトリを 作りました。ｉｍｇディレクトリの中にはｇｉｆ形式の画像（ホームページのレイアウトに使う画像） ファイルが入っています。 作品を入れているディレクトリのページを見ると、ＣＳＳが反映されておらず、 真っ白のページに文字が左詰めで書いてあるだけでした。 そこで、相対パスというものを使ってＣＳＳを反映させたいです。 相対パスの説明サイトを見ても全く分かりませんでした。 特に、「./」の使い方が分からなかったです。これをどうやって使うのか？ もしくは 別のを使うのか？ 仮に「./」を使うとして、それをどこに書き込めばいいのかも分かりません。 <link rel="○○（反映させたいページ）/stylesheet" href="st.css" type="text/css"> これのどこかに書き込むと反映されるようになると説明があったのですが…。 ご回答をお願いします。
- ベストアンサー
- HTML
- [Dreamweaver8]テンプレートに外部CSSを適用→HTMLドキュメントにCSSが適用されないのは何故？
Dreamweaver8初心者で、現在勉強中の者です。 Dreamweaverのテンプレート機能を使った、外部CSSの設定方法についてお尋ねします。 ディレクトリは現在、以下のような状態です。 [サイト -SampleWebSiteFolder-] ｜―[Templates] ｜ ｜―[style.css] ｜ Ｌ―[template.dwt] ｜ Ｌ[index.html] ※拡張子の無いものはフォルダを表します。 index.htmlファイルへCSSを適用させたいのですが、適用されないで困っています。 cssは、外部スタイルシートファイルを用意(style.css)し、テンプレート(template.dwt)に対して、CSSスタイルパネルの[スタイルシートを添付]ボタンより設定しています。 結果、テンプレート(template.dwt)に対してはCSSが適用されるのですが、HTMLドキュメント(index.html)にはCSSが適用されていない状態です。 テンプレートを用いて外部スタイルシートにてサイトを管理する場合、上記のケースにおける問題の原因は何でしょうか。 ちなみに、テンプレート[template.dwt]及び、HTMLドキュメント[index.html]の<head></head>内には、以下のソースが記述されています。 <link href="style.css" rel="stylesheet" type="text/css" />
- ベストアンサー
- ホームページ作成ソフト
- ＣＳＳが反映されないで困っています；；
日本のホストの時は、ＣＳＳがＨＴＭＬにうまく反映されていたのですが、 ホストを海外の Ｔ３５Hosting と Graffiti.net で同じ様に挑戦したら ＣＳＳが反映されませんでした；； index.htmlのヘッド内に下記を書いて、 top.cssの名前でＣＳＳを書きました。 <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <meta http-equiv="content-style-type" content="text/css"> <link rel="stylesheet" href="top.css" type="text/css"> </head> なぜか、反映されませんでした；； 「/」（ルートディレクトリ）と何か関係あるのでしょうか。 <link rel="stylesheet" href="top.css" type="text/css">の行の href="top.css" を href="/.top.css" などに変えなくてはいけないのでしょうか。。。 お知りの方 よろしくお願いします。
- ベストアンサー
- ブログ
- CSSで相対パス
さっきニコニコ動画のスタイルシート見たんですけど、 こういう記述があって body.tpl { width:960px; background:#FFF url('/img/tpl/bg_rc2.gif') repeat-x; color:#333; margin:0px auto; padding:0px; } このスタイルシートはcssというフォルダの中にあって、 そこと同じ階層にimgというフォルダがあって、 あとは直接index.phpとかのメインのファイルが置いてあるみたいなんですけど、 普通外部スタイルシートから別のフォルダ(同じ階層にある別のフォルダ)にあるイメージを呼び出すなら ../img/tpl/bg_rc2.gif になるはずだと思うんですけど、上の記述だとまるでCSSの相対パスのベースが上位の階層(index.phpとかのメインのファイルがあるの階層)になってるみたいにに見えるんですよね、 もしこれが出来るなら、大量にネストして外部スタイルシート作ってある場合(imgフォルダから遠い階層)、 ../../../../../../img/a.gif って呼び出さないといけないのが楽にすむじゃないですか、 もし外部スタイルシートの相対パスのベースをこういう風に設定できる方法があるならおしえて下さい、 俺の勘違いだったらごめんなさい
- ベストアンサー
- HTML
- ドリームウィーバー html5
ドリームウィーバーでhtml5 で制作しているサイトがあります。 ・style.css ・class.css のふたつでcssの管理をしているのですが、 ドリームウィーバー上では綺麗に組めているのに、 ネットにUP、プレビューすると style.cssだけ反映されて、class.cssが無視されます。 index.htmlと同階層にあるので、リンクも問題ないと思うのですが、なぜでしょうか？お力お貸しください。 <link href="style.css" rel="stylesheet" type="text/css"> <link href="class.css" rel="stylesheet" type="text/css"> ちなみにリンクです。。
- 締切済み
- ホームページ作成ソフト
- JavaScriptで、参照する階層を変えるとCSSが読み込めない
ランダムに1.cssまたは2.cssというcssファイルを読み込むスクリプトを記述しています。 <script language="javascript"> <!-- var cssno = Math.floor(Math.random() * 2 + 1); document.write("<link rel='stylesheet' type='text/css' href='"+cssno+".css'>"); //--> </script> これでうまく動いたので、このスクリプトを含むHTMLファイルがある階層に「css」というフォルダを作り、その中にcssファイルを移しました。そこで、 <script language="javascript"> <!-- var cssno = Math.floor(Math.random() * 2 + 1); document.write("<link rel='stylesheet' type='text/css' href='css/"+cssno+".css'>"); //--> </script> というふうに、変数cssnoの前に階層を表す「css/」をつけたのですが、これをやったとたんに動かなくなりました。 ファイルを同じ階層に移動させて、「css/」を取れば（＝元の状態に戻せば）動きます。参照する階層を間違えているのかと思って、<head></head>内に通常通り<link rel～>でCSSを指定したら読み込めました。 スクリプトの記述方法がいけないんでしょうか？ どうすれば、フォルダ「css」からcssファイルを読み込めるようになりますか？
- 締切済み
- JavaScript
- ベーシック認証 CSSリンク
Basic認証でアクセス制限をかけたディレクトリにあるファイルから、Basic認証でアクセス制限がかかっていないディレクトリにあるCSS（スタイルシート）にリンクさせることはできるのでしょうか？ やはり、Basic認証でアクセス制限をかけたディレクトリにあるファイルから、Basic認証でアクセス制限がかかっていないディレクトリにあるファイルにリンクを張るのは、無理ですかね? 例： ディレクトリ構造： [Web]（ホームページデータ格納用ディレクトリ） [Web]フォルダーには、以下のファイルとフォルダが格納されています。 index.html [css](cssフォルダの中身：example.css) [basic]（basicフォルダの中身:.htaccess 、.htpasswd 、.data1.html ） 上記のディレクトリで、data1.htmlの<head></head>タグ内に下記HTMLコードを記述すれば、data1.htmlからexample.cssにリンクさせることは、できるのでしょうか？ HTMLコード： <link href="../css/example.css" rel="stylesheet" type="text/css"> よろしくお願いします。
- ベストアンサー
- HTML
- CSSで、外部スタイルシートを2つ指定した場合。
たとえば、 <link href="style.css" rel="stylesheet" type="text/css"> <link href="info.css" rel="stylesheet" type="text/css"> のように２つスタイルシートを指定した場合、同じ内容のスタイルシートを書き込んだ場合どちらが優先されるのでしょうか。
- ベストアンサー
- HTML
- HTMLをWordPress化 CSSをどこに？
HTMLをWordPress化にするための勉強をしています。 HTML側 CSS ヘッダー内 <link rel="stylesheet" href="css/test.css"> <link rel="stylesheet" href="css/test2.css"> JS ヘッダー内ではなく一番下</body>の前に配置 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> <script src="js/test1.js"></script> <script src="js/test2.js"></script> ★これをfunctions.php に記述するにはどうすれば良いのでしょうか？ function sample_scripts() { // CSSの読み込み wp_enqueue_style( 'jdsa-style', get_template_directory_uri().'/css/test.css', array(), '1' ); wp_enqueue_style( 'jdsa-style', get_template_directory_uri().'/css/test2.css', array(), '1' ); // jqueryの読み込み wp_deregister_script( 'jquery' ); wp_enqueue_script( 'jquery', get_template_directory_uri().'https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js', array(), '1.10.3', true ); // サイト内のjsの読み込み wp_enqueue_script( 'jdsa-script', get_template_directory_uri().'/js/test1.js', array(), '1', true ); wp_enqueue_script( 'jdsa-script', get_template_directory_uri().'/js/test2.js', array(), '1', true ); }//ここまで 結果 ヘッダー内にtest.cssのみ記載、test2.cssは記載していない。 jsはどこにも記載していませんでした。 どこが間違っておりますか？ 宜しくお願いします。
- ベストアンサー
- PHP
お礼
素早い反応ありがとうございます！ 分からかったのは勘違いしていたからだということがわかりました…。 色々調べて、何度も../***/style.css"というのをみかけていたんですが、どれも../の..には該当する上の階層のディレクトリの名前が入るんだと思い、上には(Root)しかないぞ…？？と混乱してしまっていました。 そのまま../や.../と打ち込み、下の階層になっていくにしたがって．を増やしていけばいいんですね。 ようやく理解できました。 解決できたと思います。 回答ありがとうございました！ 助かりました！！