パスに「 ../ 」を書くとき・書かないとき

自己紹介

2020年8月末からプログラミングの学習を始めた初心者です。 黒澤さん（@kurosawa_kuro）のウェビナー「会津ワロ法則」への参加をきっかけに、Udemyを使った動画学習に取り組んでいます。

現在（2020年9月3日）は、HTMLとCSSの基礎について、学習が一巡した段階です。
より理解を定着させるため、いま一度Udemyの講座を見返しながら復習しています。

この記事の目的

黒澤さんが提唱されていた「Qiitaへのアウトプット」を実践するのが、この記事の目的です。 学習を始めたての初心者なので、有益な記事を書けるかは甚だ心もとないのですが、自分なりに気づいたことを記事にしていこうと思います。

今回は、HTMLやCSS上でパスを記述する際に、私がつまづいてしまったポイントについて書いていきます。

パスを記述する際の「../」の有無について

「images/〇〇.png」のように書くケース

動画学習の中で、imgタグのハンズオンに取り組んでいた時のことです。 フォルダ構成は、次のようになっていました。

     親フォルダ ―――――― imagesフォルダ ―――――― 〇〇.png
                ┃                    ┃
                ┃                    ―――― xx.png
                ┃
                ―――― cssフォルダ ―――― base.css
                ┃
                ┃
                ―――― index.html

ハンズオンの課題は「imagesフォルダ内の〇〇.pngを、index.html上に挿入する」というものです。
講師の先生が教えてくれた模範解答は、以下の通りでした。

index.html

    <img src="images/〇〇.png" alt="〇〇の画像">

これを見た私は、
（なるほど、画像の場所をフォルダ名から指定してあげるんだな）
と、すんなりと納得することができました。

「../images/xx.png」のように書くケース

それから学習は、CSSに進みます。 フォルダ構成は、先ほどと同じです。

     親フォルダ ――――― imagesフォルダ ―――――― 〇〇.png
                ┃                   ┃
                ┃                   ―――― xx.png
                ┃
                ―――― cssフォルダ ――― base.css
                ┃
                ┃
                ―――― index.html

今度のハンズオンは「base.cssを使って、imageフォルダ内のXX.pngを、index.htmlのbody部分の背景画像にする」というものでした。
こちらの模範解答（CSS）は、以下の通りです。

base.css

    body {
        background-image: url(../images/xx.png);
    }

今度は少し違和感をおぼえました。
（前にimgタグで画像を挿入したときは、画像の場所を指定するのに「../」なんて使わなかったのに）

ただ、その場ではあまり深く考えずに、
（HTMLとCSSではパスの書き方が違うのかなー）
と、軽くスルーしてしまいました。

後で復習してみて分かったこと

後で復習してみると、「HTMLとCSSで書き方が違うのかな」というのが、大変な勘違いだということが分かりました（汗）
（復習の際には、【初心者向け】絶対パスと相対パスの違いをイラストを使って解説！という記事を参照しました）

重要なのは、
「コードを記述するファイルが、imagesフォルダと同じ階層にあるかどうか」
だったんですね。。。

最初のケースでは、

コードを記述するindex.htmlから見て、imagesフォルダは同じ階層。なので、「images」とだけ書けばよい。

一方、次のケースでは、

コードを記述するbase.cssから見て、imagesフォルダは一つ上の階層。 こうした場合は、「../images」と書く必要がある。

なるほど、スッキリしました！

復習は大事！

なお、よくよくUdemyの講座を見返すと、先生はちゃんと

「 ../ 」とは、一つ上のフォルダということを示します

とおっしゃっていました（汗）

復習は大事だなー、と痛感しました。。。

最後までお読みいただき、ありがとうございました！