WEB制作の初学者の方でハマりすいのがファイルの階層です。
えらそうなことを言っている私もハマった１人です。
絶対パスや相対パスについてはわかっている人も多いと思うので、
そこは省略しまして、私の過去の間違え経験をお伝えしてみなさんの参考にしていただこうと思います。
エディター機能の落とし穴
私はVisual Studio Code（以下VSC）を使用しています。
このVSCには（他のエディターにもあると思いますが）便利な機能があります。
それは、ファイルを右クリックして相対パスをコピーできるという優れもの。
でもこんな便利機能にも落とし穴があります。
それは、「対象ファイルがどこのフォルダに入っているか」というところまでしかコピーできません。
もっと厳密にいうと階層まではたどってくれません。
例えば
imgフォルダに入っている「image01.jpg」というファイル名の画像があるとします。
この相対パスをコピーして、HTML、CSS、どこへ貼り付けても結果は
img/image01.jpg
となります。
貼り付けるファイルの場所によっては「../img/image01.jpg」になってほしいときもあるはずです。
しかし、この相対パスのコピーはそうはいきませんので、しっかり階層を理解してパスの確認をしましょう。
上の階層の記述に注意
index.htm
CSSフォルダ・・・style.css
imgフォルダ・・・image01.jpg
という構造を仮定します。
同階層は簡単です。
index.htmlに<img src="">を記述するときは「img/image01.jpg」でＯＫです。
しかし背景画像をCSSで設定するとき、「style.css」から見て「imgフォルダ」は１階層上です。
記述は
../img/image01.jpg
となります。
このように、上の階層はけっこう間違えやすいので気をつけてください。
１階層上は「../」、
２階層上は「../../」 です。
階層を把握してないと、画像やCSSの読み込みだけでハマってしまう時間が長くなってしまいます。
ここはしっかりおさえておきましょう。
それではまた次回！
よく使う背景画像の記事も合わせて参考にしてください。 続きを見る
【CSS】背景画像の設定方法 セットで覚えておきたいコードも紹介