Help us understand the problem. What is going on with this article?

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

自己紹介

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の講座を見返すと、先生はちゃんと

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

とおっしゃっていました(汗)

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

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

toda_hayato
YoshiTech「会津わろ法則」Round2 修了生です!
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away