【HTML/CSS】ファイルパスの書き方

こんにちは。菜笑[なえ] (@nae310_)です。

今回はファイルパスの書き方についてです。

HTML, CSSを勉強し始めた方が、最初につまずくポイントが「ファイルパス」だと思います。

自分もプログラミング講師をしていて
「画像が反映されません」
「CSSを書いたのに何も変わりません」
という質問をよく受けます。

ほとんどの場合がファイルパスの書き方が間違っているんですね。

なので、今回はこの「ファイルパス」について完全に理解していただこうと思います!

大事なポイントは3つだけ

ファイルパスを理解するために大事なポイントは3つだけです。

  • パスを書いてあるファイルが出発点
  • ./ は同じ階層を表す
  • ../ は1つ上の階層を表す

この3つが理解できれいれば大丈夫です!

同じ階層?1つ上の階層?となっている方も大丈夫です。
具体例を見ながら解説していくので、読み終わった時にはわかるようになっています。

./ は同じ階層を表す

まずはindex.html からstyle.css を呼びだしてみます。

index.html からファイルを呼び出すので、出発点はindex.html です。
そしてindex.html と同じ階層にcssフォルダ があります。
そのcssフォルダ の1つ下の階層にstyle.css がいます。

なのでindex.html での記述方法はこうなります。

./css/style.css

<link rel="stylesheet" href="./css/style.css">

./ は省略することもできるので、こちらも同じ意味になります。

css/style.css

<link rel="stylesheet" href="css/style.css">

ポイント

  • 出発点はindex.html
  • 同じ階層のcssフォルダは./css/
  • cssフォルダの下のstyle.css./css/style.css

../ は1つ上の階層を表す

次はstyle.css からimage.png を呼び出してみます。

style.css からファイルを呼び出すので、出発点はstyle.css です。
そしてstyle.css の1つ上の階層にimgフォルダ があります。
そのimgフォルダ の1つ下の階層にimage.png がいます。

なのでstyle.css での記述方法はこうなります。

../img/image.png

background-image: url("../img/image.png");

ポイント

  • 出発点はstyle.css
  • style.cssの1つ上の階層のimgフォルダは../img/
  • imgフォルダの下のimage.png../img/image.png

おわりに

最初はファイルパスってよくわからない難しいもので、うーんとなるかもしれません。
が、ポイントを押さえておけば、いくつ../が並んでいても大丈夫です。

1つずつ、これの上の、これの上のって数えていけば間違えることもないはずです!

あせらずにゆっくり確認していきましょう!

SNS

Twitter:@nae310_
Instagram:310nae