こんにちは。菜笑[なえ] (@nae310_)です。
今回はファイルパスの書き方についてです。
HTML, CSSを勉強し始めた方が、最初につまずくポイントが「ファイルパス」だと思います。
自分もプログラミング講師をしていて
「画像が反映されません」
「CSSを書いたのに何も変わりません」
という質問をよく受けます。
ほとんどの場合がファイルパスの書き方が間違っているんですね。
なので、今回はこの「ファイルパス」について完全に理解していただこうと思います！
大事なポイントは３つだけ
ファイルパスを理解するために大事なポイントは３つだけです。
- パスを書いてあるファイルが出発点
./は同じ階層を表す../は１つ上の階層を表す
この３つが理解できれいれば大丈夫です！
同じ階層？１つ上の階層？となっている方も大丈夫です。
具体例を見ながら解説していくので、読み終わった時にはわかるようになっています。
./ は同じ階層を表す
まずはindex.html からstyle.css を呼びだしてみます。
index.html からファイルを呼び出すので、出発点はindex.html です。
そしてindex.html と同じ階層にcssフォルダ があります。
そのcssフォルダ の１つ下の階層に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
../ は１つ上の階層を表す
次はstyle.css からimage.png を呼び出してみます。
style.css からファイルを呼び出すので、出発点はstyle.css です。
そしてstyle.css の１つ上の階層にimgフォルダ があります。
そのimgフォルダ の１つ下の階層にimage.png がいます。
なのでstyle.css での記述方法はこうなります。
../img/image.png
background-image: url("../img/image.png");ポイント
- 出発点は
style.css style.cssの１つ上の階層のimgフォルダは../img/- imgフォルダの下の
image.pngは../img/image.png
おわりに
最初はファイルパスってよくわからない難しいもので、うーんとなるかもしれません。
が、ポイントを押さえておけば、いくつ../が並んでいても大丈夫です。
１つずつ、これの上の、これの上のって数えていけば間違えることもないはずです！
あせらずにゆっくり確認していきましょう！
