CSS WEB制作

相対パスの階層をおさえてCSSや画像の読み込みエラーを防ごう

file

WEB制作の初学者の方でハマりすいのがファイルの階層です。

えらそうなことを言っている私もハマった1人です。

 

絶対パスや相対パスについてはわかっている人も多いと思うので、
そこは省略しまして、私の過去の間違え経験をお伝えしてみなさんの参考にしていただこうと思います。

 

 

エディター機能の落とし穴

私は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」でOKです。

 

しかし背景画像をCSSで設定するとき、「style.css」から見て「imgフォルダ」は1階層上です。

記述は

../img/image01.jpg

となります。

 

このように、上の階層はけっこう間違えやすいので気をつけてください。

1階層上は「../」、

2階層上は「../../」 です。

 

階層を把握してないと、画像やCSSの読み込みだけでハマってしまう時間が長くなってしまいます。

ここはしっかりおさえておきましょう。
それではまた次回!

 

よく使う背景画像の記事も合わせて参考にしてください。

-CSS, WEB制作
-

© 2024 人生フリーハンド Powered by AFFINGER5