CSSで相対パスの設定方法と注意点
- 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 って呼び出さないといけないのが楽にすむじゃないですか、 もし外部スタイルシートの相対パスのベースをこういう風に設定できる方法があるならおしえて下さい、 俺の勘違いだったらごめんなさい
- As2022
- お礼率20% (3/15)
- HTML
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
「'/img/tpl/bg_rc2.gif'」 は、相対パスじゃ無いでしょう。 ホームディレクトリに「img」というディレクトリがあるので、直接読みに行っているだけです。
関連するQ&A
- CSSでの相対パス入力について
初歩的な質問ですみません。ググってもよく分からなかったのでご存知の方教えてください。 スタイルシートだけのページを作って、背景画像設定をしているのですが、背景に使おうとしている画像は全体のフォルダ（hp）の中の(gif）というフォルダの中に入っています。この場合、body { background-image: url("../gif/画像名.gif");｝と記述するのでは駄目なのですか？ スタイルシート自体はhpフォルダの中に入っています。この場合hpの方が階層が上ということでいいのでしょうか？ ちなみに、同じフォルダ内の画像で試してみたところ、きちんと表示されたので相対パスの書き方がまずいのだと思っています。宜しくお願いします。
- ベストアンサー
- その他（インターネット・Webサービス）
- ＣＳＳが反映されない（相対パスを使う？）
ＦＣ２でホームページを作っています。 ＲＯＯＴディレクトリには ｓｔ．ｃｓｓ、ｉｎｄｅｘ．ｈｔｍｌ などを作りました。そこにある全ての ページにＣＳＳが反映されています。 その下の階層に ｉｍｇディレクトリと、自分の書いた作品を入れるためのディレクトリを 作りました。ｉｍｇディレクトリの中にはｇｉｆ形式の画像（ホームページのレイアウトに使う画像） ファイルが入っています。 作品を入れているディレクトリのページを見ると、ＣＳＳが反映されておらず、 真っ白のページに文字が左詰めで書いてあるだけでした。 そこで、相対パスというものを使ってＣＳＳを反映させたいです。 相対パスの説明サイトを見ても全く分かりませんでした。 特に、「./」の使い方が分からなかったです。これをどうやって使うのか？ もしくは 別のを使うのか？ 仮に「./」を使うとして、それをどこに書き込めばいいのかも分かりません。 <link rel="○○（反映させたいページ）/stylesheet" href="st.css" type="text/css"> これのどこかに書き込むと反映されるようになると説明があったのですが…。 ご回答をお願いします。
- ベストアンサー
- HTML
- URLの相対パスについて
はじめまして、疑問に思ったことがあるので質問させて下さい。 参考：http://look2.info/sampl2/ 上記URLのような掲示板の作成を考えているのですがこの掲示板の仕様は特殊なようで、 参考2：http://look2.info/r.php/sampl2/57/ のように実際には存在しないフォルダをr.phpでURLを分解して表示しています。 そして参考2のソースを表示すると ハートの画像部分が <img src="/_gif_/63890.gif" border=0> と指定されていてこの画像の絶対パスは http://look2.info/_gif_/63890.gif になります ここで疑問が出てきたのですが、ソースを見る限りでは「BASE HREF」の指定も無いのに、IMG SRCでは相対パスで書かれています。 このURLの場合通常だと、「../../../_gif_/63890.gif」と指定しないとブラウザでは認識しない筈なのですがプログラムで上記のようなことは出来るのでしょうか？？ 詳しい方がいればご教授お願いいたしますm(_ _)m
- ベストアンサー
- PHP
- ＣＳＳで自動改行させたくない。
スタイルシートやテーブルで、幅を指定してあげると その幅にあわせて自動改行したりとか、その枠内の背景だけを 変更することができると思うんですが。 スタイルシートでやっても、なぜかうまくいきません。 今は、あきらめてテーブルでやってるんですが。 何がよくないのか、教えていただければ幸いです。 根本的な基本が、わかってないんですかね？ ＣＳＳ #main { width:760px; overflow:visible; } #head { width:760px; bgcolor: #ff0000; } .head-img { padding: 0px; margin: 0px; float:left; } #menu { width:760px; margin: 0px; padding: 0px; bgcolor: #ff0000; } .menu-buttom { margin: 0px; padding: 0px; } ＨＴＭＬ <html> <head> <link href="base.css" rel="stylesheet" type="text/css"> </head> <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <div id="main"> <div id="head"> <div class="head-img"><img src="img/head_img.jpg"></div> </div> <div id="menu"> <img src="img/menu_left.gif" width="20" height="30"><img src="img/menu_top.gif" border="0" width="180" height="30" name="img_m1"><img src="img/menu_hp.gif" border="0" width="180" height="30" name="img_m2"><img src="img/menu_com.gif" border="0" width="180" height="30" name="img_m3"><img src="img/menu_inq.gif" border="0" width="180" height="30" name="img_m4"><img src="img/menu_right.gif" width="20" height="30"> </div> </div> </body> </html>
- ベストアンサー
- CSS
- CSSでの画像指定について。
CSSでの画像指定について。 ファイルパスの指定について教えてください。 フォルダ１の中に「sample.html」、「sample.css」、「img」フォルダが入っており、 「img」フォルダの中に、「nature_01.gif」が入っています（下図）。 -------------------------------------------------------------------------- フォルダ１ L sample.html L sample.css L img（フォルダ） img(フォルダ) L nature_01.gif ---------------------------------------------------------------------------- このファイル構成だと、sample.css の中で 『background-image:url(/img/nature_01.gif)』のようにパスを指定すれば良い と理解していたのですが、背景に画像が表示されませんでした。 その後、下記のように修正すると、画像が表示されるようになりました。 firefox3.5 →修正後は画像が表示される。 Internet explore 8 →修正前、修正後ともに表示されない。 ----------------------------------------------------------------------- 【修正前】 #contents{ width:750px; background-image:url(/img/nature_01.gif); 【修正後】 #contents{ width:750px; background-image:url(../img/nature_01.gif); ------------------------------------------------------------------------ OS・・・windows xp なぜ、こうなるのか、わかるかたがいましたら教えてください。 よろしくお願いします。
- ベストアンサー
- その他（インターネット・Webサービス）
- サブドメインとマイドメインで相対パスでファイルは共有できない？
構成:[]・・・フォルダ main.comをマイドメイン sub1.main.comをサブドメイン [main.com] ┣index.html ┣style.css ┗[sub1.main.com]━top.html ・・・サブドメインのフォルダ この場合サブドメインのtop.htmlで上のフォルダ（同じサーバー上）にあるstyle.cssを指定するには相対パスではできないのでしょうか？（http://～の絶対パスではできます） 同じサーバー上にありますが、ドメインが違うということで相対パスは使えないという認識でいいんでしょうか？
- 締切済み
- レンタルサーバ・ASP
- 階層が違う場合の絶対パス相対パスについて
kari.htmlにある内容のボックスがあるとして、 それはCSSでデザインされ、画像も入っています。 この下の階層の menu.htmlの中にkari.htmlで使ったある内容ボックスの同じものがまるまる入ります。 なので、kari.htmlの内容を更新してコピーしてmenu.htmlにもはります。 この場合、画像やCSSを相対パスではなく、絶対パスにしておくと、階層が異なっても きれいに入ります。 ../からではなく、/から始まるパスです。 このやり方は間違っているのでしょうか？ 同じようにページ、階層を渡って共通部分には絶対パスをしています。 こういうふうに使い分けしていくものでしょうか？ phpでインクルードしてもいいんですが、他にもインクルードが多々あるので、 ページ内でそんなにインクルードあってもいいものかと思いまして。。（勝手な勘違いでしょうか？） 宜しくお願い致します。
- ベストアンサー
- PHP
- 相対パスから絶対パスの取得
相対パスを指定することにより、絶対パスを取得したいのですが・・・。 どうすればいいでしょうか？ ■状況■ VB6.0 Windows2000 ひとつ上の階層に行きそこのTableフォルダ内のsample.htmlのパスを取得したい。 Dir$("..\Table\sample.html")としてみたのですができませんでした。
- ベストアンサー
- Visual Basic
- <img src="相対パス">の絶対パスへの変換
htmlで、 <img src="相対パス">が指定されている場合、絶対パスに一括変換する方法はありますか？ すなわち <base href="～"> のようなことは出来ないでしょうか？
- 締切済み
- HTML
お礼
そうですよね、相対パスなら/スラッシュ付きませんもんね。 完全に解決しました、朝早くありがとうございます。