「../」の意味とは?

このQ&Aのポイント
  • Dreamweaver8を使用している超初心者の方から、「../」の意味を教えて欲しいという質問がありました。
  • 「../」は、画像を貼り付ける際に使用するタグ内の指定で、異なる階層にあるフォルダから画像データを参照するための指示です。
  • 具体的な例を挙げると、Aフォルダ内のBフォルダ内のCフォルダにある画像データを、Aフォルダ内のDフォルダ内のEフォルダにあるHTMLデータに貼り付ける場合、「../」を使用して相対パスを指定します。
回答を見る
  • ベストアンサー

「../」の意味を教えてください。

Dreamweaver8を使用していますが、超初心者です。 かなり基本的なことだとは思うのですが教えてください。 画像を貼り付けたときのタグで、例えば下記のようなものがありますが <img src="../../images/common/icon.gif"> このときの、「../」はどういう意味ですか? 例えば、Aフォルダ内のBフォルダ内のCフォルダに画像データpix.gifがあるとします。その画像を貼り付けるページのhtmlデータは、Aフォルダ内のDフォルダ内のEフォルダにある、という状況です。 これが、Aフォルダ内のFフォルダにあるhtmlデータに貼付けるとなると、「../」の数が違ってきますよね??? 別のフォルダ、違う階層にあることが関係しているのでしょうか? 今後、Aフォルダ内にある色々なフォルダ内のhtmlデータに、このCフォルダにある画像データを使っていきます。 きちんと理解するためにも、定義を教えていただけると助かります。 宜しくお願いします。

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

  • ベストアンサー
  • chiwa-CF
  • ベストアンサー率51% (36/70)
回答No.1

"../"は現在の1階層上のフォルダを表します。 <img src="../../images/common/icon.gif"> この場合は、 HTMLファイルからみて、2つ上の階層にあるimegesフォルダ内のcommonフォルダにあるicon.gifをイメージとして表示するという意味になります。

aisha921
質問者

お礼

なるほど! htmlファイルからみて、どこにimageファイルがあるか「探しに行ってる」感覚なんですね。 有難うございました!!

その他の回答 (2)

  • sykt1217
  • ベストアンサー率34% (277/798)
回答No.3

>このときの、「../」はどういう意味ですか? これは「相対パス」といいます。 「../」はその数分だけ「上の階層」を意味します。 A---B---a.gif | C---b.gif A・B・Cのフォルダがあり、a・bのgifファイルがある際、a.gifから見て、b.gifのパスは 「../C/b.gif」 のようになります。 http://homepage2.nifty.com/tomoarai/html/pass.html

aisha921
質問者

お礼

相対パスっていうんですね!その言葉すらわからないので、ネットで検索することすらできませんでした。 参考ページも有難うございました!熟読します!

回答No.2

「../」は、「今いるフォルダの一つ上のフォルダ」を表します。 従って、「../../」なら「二つ上のフォルダ」となります。 >例えば、Aフォルダ内のBフォルダ内のCフォルダに画像データpix.gifがあるとします。その画像を貼り付けるページのhtmlデータは、Aフォルダ内のDフォルダ内のEフォルダにある、という状況です。 フォルダ構成は ¥A-¥B-¥C-pix.gif    ¥D-¥E-hoge.html    ¥F-hogehoge.html であっていますか? >これが、Aフォルダ内のFフォルダにあるhtmlデータに貼付けるとなると、「../」の数が違ってきますよね??? はい。

aisha921
質問者

お礼

そうです、そうです!下手な説明を理解してくださって助かります! なんとなく自分の理解があっててすっきりしました。 有難うございました!!

関連するQ&A

  • 一瞬画像が

    現在、jQueryを使って、以下のようなフラッシュもどきのギャラリー表示を作っていますが このソースをSleipnirというブラウザで実行し、リロードをすると、一瞬画像が縦に並んでしまい 一瞬とはいえ、見た目がくずれてしまいます。 これをくずれないように表示するにはどうしたらよいのでしょうか? どなたか、よいお知恵をお願いいたします。 <!doctype html> <html> <head> <title>JQuery Cycle Plugin - Example Slideshow</title> <!-- include jQuery library --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> <!-- include Cycle plugin --> <script type="text/javascript" src="jquery.cycle.all.min.js"></script> <!-- initialize the slideshow when the DOM is ready --> <script type="text/javascript"> $(document).ready(function() { $('.slideshow').cycle({ fx: 'fade' , timeout: 8000 , speed: 500 // choose your transition type, ex: fade, scrollUp, shuffle, etc... }); $('.slideshow2').cycle({ fx: 'fade' , timeout: 4000 , speed: 4000 // choose your transition type, ex: fade, scrollUp, shuffle, etc... }); $('.slideshow3').cycle({ fx: 'fade' , timeout: 2000 , speed: 8000 // choose your transition type, ex: fade, scrollUp, shuffle, etc... }); }); </script> </head> <body> <div style="width:900px;"> <div class="slideshow2" style="float:left;"> <img src="images/common/a1.jpg" width="300" height="300" /> <img src="images/common/a2.jpg" width="300" height="300" /> <img src="images/common/a3.jpg" width="300" height="300" /> <img src="images/common/a4.jpg" width="300" height="300" /> <img src="images/common/a5.jpg" width="300" height="300" /> <img src="images/common/a6.jpg" width="300" height="300" /> <img src="images/common/a7.jpg" width="300" height="300" /> <img src="images/common/a8.jpg" width="300" height="300" /> <img src="images/common/a9.jpg" width="300" height="300" /> <img src="images/common/a10.jpg" width="300" height="300" /> <img src="images/common/a11.jpg" width="300" height="300" /> </div> <div class="slideshow" style="float:left;"> <img src="images/common/b1.jpg" width="300" height="300" /> <img src="images/common/b2.jpg" width="300" height="300" /> <img src="images/common/b3.jpg" width="300" height="300" /> <img src="images/common/b4.jpg" width="300" height="300" /> <img src="images/common/b5.jpg" width="300" height="300" /> <img src="images/common/b6.jpg" width="300" height="300" /> <img src="images/common/b7.jpg" width="300" height="300" /> <img src="images/common/b8.jpg" width="300" height="300" /> <img src="images/common/b9.jpg" width="300" height="300" /> <img src="images/common/b10.jpg" width="300" height="300" /> <img src="images/common/b11.jpg" width="300" height="300" /> <img src="images/common/b12.jpg" width="300" height="300" /> </div> <div class="slideshow3" style="float:right;"> <img src="images/common/c1.jpg" width="300" height="300" /> <img src="images/common/c2.jpg" width="300" height="300" /> <img src="images/common/c3.jpg" width="300" height="300" /> <img src="images/common/c4.jpg" width="300" height="300" /> <img src="images/common/c5.jpg" width="300" height="300" /> <img src="images/common/c6.jpg" width="300" height="300" /> <img src="images/common/c7.jpg" width="300" height="300" /> <img src="images/common/c8.jpg" width="300" height="300" /> <img src="images/common/c9.jpg" width="300" height="300" /> <img src="images/common/c10.jpg" width="300" height="300" /> <img src="images/common/c11.jpg" width="300" height="300" /> </div> </div> </body> </html>

  • マウスオーバー・アウトの制御のソース

    複数のボタンでマウスオーバー・アウトの制御のソースを教えてもらったのですが、質問いたします。 この場合、このボタンはオーバーとアウト、それぞれ同じ画像を使用しているのですが、その場合でも全部違ったファイル名をつけなければいけないのでしょうか? 現在はそあしているのですが、何か無駄な気がして・・・。 よしくお願いします。 <SCRIPT LANGUAGE = "JavaScript"> <!-- if (document.images) { //if image object is available img1on = new Image(); // MouseOver Images img1on.src = "images/c1b.gif"; img2on = new Image(); img2on.src = "images/c2b.gif"; img3on = new Image(); img3on.src = "images/c3b.gif"; img1off = new Image(); // MouseOut Images img1off.src = "images/c1a.gif"; img2off = new Image(); img2off.src = "images/c2a.gif"; img3off = new Image(); img3off.src = "images/c3a.gif"; img4off = new Image(); } function imgOn(imgName) { if (document.images) { document[imgName].src = eval(imgName + "on.src"); }}   function imgOff(imgName) { if (document.images) { document[imgName].src = eval(imgName + "off.src"); }} //--> </SCRIPT>

  • サブウィンドウの画像を入れ替える

    初心者です。よろしくお願いします。 親ウィンドウからテキストリンクでサブウィンドウを開きます。 サブウィンドウには、基本的に2種類の画像があります。 親ウィンドウのテキストリンクは3種類(A、B、C)あり、Aのリンクをクリックしたときには、サブウィンドウの <img src="images/x_01.gif" name="sozai01" alt="" width="469" height="142"> <img src="images/x_02.gif" name="sozai02" alt="" width="469" height="142"> の2つの画像をそれぞれ指定する同じ大きさの画像(images/a_01.gifとimages/a_02.gif)に替えたいのですが、どうしたらいいのかさっぱりわかりません。どなたか教えていただけますでしょうか?

  • オンマウスで画像を変えたい。

    オンマウスで画像を変えたいのですが、 ------------------------------------------ <img src="画像1URl" onmouseover="this.src='画像2URl';" onmouseout="this.src='画像1URl';"> ------------------------------------------ や、 ------------------------------------------ <script> var src1="http://img.yahoo.co.jp/images/phonebook/jp_pb.gif" var src2="http://i.yimg.jp/images/news/yjnews.gif" </script> <img src="http://img.yahoo.co.jp/images/phonebook/jp_pb.gif" onMouseOver="this.src=src2" onMouseOut="this.src=src1" /> ------------------------------------------ など。 どれを使っていいか分からず困っています。 これぞ、っていうタグがあったらよろしくお願いします。

    • ベストアンサー
    • HTML
  • ・JAVASCRIPTを使って、ホームページを作成しています。

    ・JAVASCRIPTを使って、ホームページを作成しています。 ・ JAVAを使って、ホームページを作成しています。 ・メニューのボタンに、マウスオーバーでボタンの画像を切り替える <!-- loadImage = new Image(); loadImage.src = "profile.gif"; // --> ・と同時に任意の画像を切り替える // ポイント時の処理 function On(name) { if (document.images) { document.images['def'].src = eval(name + '.src'); } } // 放した時の処理 function Off() { if (document.images) { document.images['def'].src = img0.src; } } // --> ・というscriptを同時に使いたいのですが、どちらかだけになってしまったり、どちらも作動しません。 ・一つのボタンに2つのJAVAを使う場合何か特別な入力が必要なのでしょうか? ・それとも、ただ単純にボタンのタグが誤っているのでしょうか? ・どなたかご教授お願い致します。 ・ちなみにタグを全て載せると、 <SCRIPT Language="JavaScript"> <!-- loadImage = new Image(); loadImage.src = "bbs.gif"; // --> </SCRIPT> <script type="text/javascript"> <!-- if (document.images) { // 設定開始(使用する画像を設定してください) // 通常の画像 var img0 = new Image(); img0.src = "topic4.jpg"; // ポイント時の画像1 var img1 = new Image(); img1.src = "topic4.jpg"; // 設定終了 } // ポイント時の処理 function On(name) { if (document.images) { document.images['def'].src = eval(name + '.src'); } } // 放した時の処理 function Off() { if (document.images) { document.images['def'].src = img0.src; } } // --> </script> とボタンのタグが、 <A HREF="../usatop.html"onMouseOver="On('img2')" "if(document.images) "myImage.src='bbs2.gif'" "onMouseOut="Off()""if(document.images) "myImage.src='bbs.gif'"><IMG SRC="bbs.gif" BORDER="0" name="myImage"></A> ・となっております。 ・よろしくお願いします!

  • ・JAVAを使って、ホームページを作成しています。

    ・JAVAを使って、ホームページを作成しています。 ・メニューのボタンに、マウスオーバーでボタンの画像を切り替える <!-- loadImage = new Image(); loadImage.src = "profile.gif"; // --> ・と同時に任意の画像を切り替える // ポイント時の処理 function On(name) { if (document.images) { document.images['def'].src = eval(name + '.src'); } } // 放した時の処理 function Off() { if (document.images) { document.images['def'].src = img0.src; } } // --> ・というscriptを同時に使いたいのですが、どちらかだけになってしまったり、どちらも作動しません。 ・一つのボタンに2つのJAVAを使う場合何か特別な入力が必要なのでしょうか? ・それとも、ただ単純にボタンのタグが誤っているのでしょうか? ・どなたかご教授お願い致します。 ・ちなみにタグを全て載せると、 <SCRIPT Language="JavaScript"> <!-- loadImage = new Image(); loadImage.src = "bbs.gif"; // --> </SCRIPT> <script type="text/javascript"> <!-- if (document.images) { // 設定開始(使用する画像を設定してください) // 通常の画像 var img0 = new Image(); img0.src = "topic4.jpg"; // ポイント時の画像1 var img1 = new Image(); img1.src = "topic4.jpg"; // 設定終了 } // ポイント時の処理 function On(name) { if (document.images) { document.images['def'].src = eval(name + '.src'); } } // 放した時の処理 function Off() { if (document.images) { document.images['def'].src = img0.src; } } // --> </script> とボタンのタグが、 <A HREF="../usatop.html"onMouseOver="On('img2')" "if(document.images) "myImage.src='bbs2.gif'" "onMouseOut="Off()""if(document.images) "myImage.src='bbs.gif'"><IMG SRC="bbs.gif" BORDER="0" name="myImage"></A> ・となっております。 ・よろしくお願いします!

    • ベストアンサー
    • Java
  • firefoxで表示される画像がIEで表示されない

    同じHTML内に <img src="images/9.jpg" alt=""商品画像 /> と <img src="images/title_1.gif" /> がありますが firefoxでは上記の画像を含めすべての画像が表示されますが IEでは <img src="images/title_1.gif" />は表示されるが <img src="images/9.jpg" alt=""商品画像 />は 表示されません。 なぜか判りません。 原因がまったくわかりません。 教えてください。よろしくお願いします。

    • ベストアンサー
    • HTML
  • [jQuery]フォームで画像切替、遷移しても維持

    こんにちわ。jQuery初心者です。 入力フォーム内で、3択のラジオボタンの選択内容によって 画像アイコンを切り替える仕組みを作成しています。 ▼javascript(jQuery)側 $(function(){ $("input[name='ans[reply]']:radio").click(function() { var index = $("input[name='ans[reply]']:radio").index(this); switch(index) { case 0 : $('img#chageImg').attr('src','../../common/img/icon_02.gif'); break; //デフォルト case 1 : $('img#chageImg').attr('src','../../common/img/icon_01.gif'); break; case 2 : $('img#chageImg').attr('src','../../common/img/icon_01.gif'); break; } }); ▼html側 <body onload="chgImg();"> <img src="/common/img/icon_02.gif" alt="#" id="chageImg" width="40" height="20" /> 切り換え自体は、↑の書き方で問題なく動くのですが、 [submit]した後の入力エラーや、確認画面へ遷移後に戻ると、 上記の"デフォルト"のアイコン表示に戻ってしまいます。 ※エラーチェックやvalueの受け渡しはPHPで制御しています。 下記(A)(B)2通りの方法を思い付き、 リファレンスではまだ応用がよく分からず、行き詰まっています。 (A)関数化して、bodyのonloadで読み込む (B)cookieで制御 ※再来訪の際には、"デフォルト"のアイコン表示 どちらかシンプルな方法で わかる方がいらっしゃいましたら、教えていただけないでしょうか。 よろしくお願いいたします。

  • 2箇所の画像をランダムに複数表示

    はじめましてjavascript初心者のものです。 2箇所に配置されてる各画像をランダムに表示したく、以下宣言をしてますがどうしても2箇所目が表示されません。お手数ですが、教えてください! 2箇所目をrandWrite_sとして名前を変更してます。 ▼▼▼▼▼▼▼▼▼▼▼▼meta内タグ▼▼▼▼▼▼▼▼▼▼▼▼ <script type="text/javascript"> <!-- // ランダムに画像を表示する1箇所目 var randObjects=[ '<a href="#"><img src="/images/ad_banner01.gif"></a>', '<a href="#"><img src="/images/ad_banner02.gif"></a>', '<a href="#"><img src="/images/ad_banner03.gif"></a>' ]; function randWrite() { var rr = parseInt(Math.random() * randObjects.length); document.write(randObjects.slice(rr)[0]); randObjects.splice(rr,1); } //--> </SCRIPT> <script type="text/javascript"> <!-- // ランダムに画像を表示する2箇所目 var randObjects=[ '<a href="#"><img src="/images/ad_banner01_s.gif"></a>', '<a href="#"><img src="/images/ad_banner02_s.gif"></a>', '<a href="#"><img src="/images/ad_banner03_s.gif"></a>' ]; function randWrite_s() { var rr = parseInt(Math.random() * randObjects.length); document.write(randObjects.slice(rr)[0]); randObjects.splice(rr,1); } //--> </SCRIPT> ▲▲▲▲▲▲▲▲▲▲▲▲meta内タグ▲▲▲▲▲▲▲▲▲▲▲▲ ▼▼▼▼▼▼▼▼▼▼▼▼body内タグ▼▼▼▼▼▼▼▼▼▼▼▼ <p><script type="text/javascript">randWrite();</script></p> <p><script type="text/javascript">randWrite_s();</script></p> ▲▲▲▲▲▲▲▲▲▲▲▲body内タグ▲▲▲▲▲▲▲▲▲▲▲▲

    • ベストアンサー
    • Java
  • ロールオーバー画像の枠線を消したい

    初めてホームページ作成中の超初心者です。 ロールオーバーで、下記のタグで表示させたのですが、画像の枠線が出てしまいました。 普通に<img src="img1.gif">と書くと出ない画像なんですが・・・ リンク画像の枠線を消すのと同じ要領でborder="0"とも書き加えてみましたが、(4ヶ所とも)今度は何も表示されなくなってしまいました。 <問題のタグのひな形> <a href="http://www-------"onmouseover = "document.bt.src = 'img1.gif'" onmouseout = "document.bt.src = 'img2.gif'"onclick = "document.bt.src = 'img3.gif'"><img src = "img2.gif" name="bt"></a> どうぞ宜しくお願いします!

専門家に質問してみよう