background-imageが表示されない!絶対パスと相対パスを理解する

CSS

今回のつまずきは、CSSでbackground-imageが表示されない問題です。

原因は絶対パスと相対パスをきちんと理解していないことでした。

今回のつまずきのお陰で理解し、成長できたので絶対パスと相対パスについてわたしなりにまとめました!

絶対パスと相対パス

絶対パス

絶対パスとは、URLでページやファイルなどを指定することです。

また、画像を表示させたいときにも使えます。

<img src="https://〜〜〜〜/〜〜〜.jpg">

上記HTMLコードの「”」から「”」までがURLです。

パスというのは英語で道などを意味するらしく、例えば友人に自分の家の場所を教えるときに住所を教える、みたいなイメージで「絶対的な道のり(場所)」のようなものです。

ちなみに画像のURLの取得方法は、ダウンロードしたい画像を右クリックして画像アドレスをコピーを押せば取得できます。(わたしがてきとうに描いた絵ですみません)

絶対パスはURLをかけばいいのでわかりやすいですね。

相対パス

相対パスとは、下記HTMLコードのように「/」などで区切って、今いる階層の位置から目的のファイルなどが存在する場所を示すことです。

<img src="img/IMG_0437.jpg">

上記HTMLコードでは下の画像の「img」ディレクトリの中の「IMG_0437.jpg」を表示するという意味です。

相対パスは先ほどの例えで言うと、友人に(誰でもいいですが)簡易的な道順で教えると言う感じです。

「駅からでたらまっすぐ行ってコンビニがある場所を右折して〜」みたいなイメージです。

この相対パスがややこしいと思うので詳しく説明します!

./ ../の使い方

「../」は今いる階層の1つ上に移動

2つ上なら「../../」3つなら「../../../」、、、と増やしていきます。

「./」は今いる階層から1つ下に移動  

省略可能。書かないことが多いそうです。(先ほどの相対パスのコードも省略しています)

ざっくり理解できればOKです。

では次に、相対パスのパターンを4つ紹介します。

相対パスの4パターン

  • パターン1 同じ階層のディレクトリorファイルを指定

ディレクトリ名orファイル名 

と書くだけ。

  • パターン2 同じ階層のディレクトリ内のファイルを指定

ディレクトリ名/ファイル名

ここで上記2つのパターンの意味がわからないという人は下記の例をご覧ください。

例)index.htmlファイルでstylesheet.cssファイルを読み込む場合

下の画像の赤枠で囲まれた部分が、index.htmlファイルでstylesheet.cssファイルを読み込むためのコードです。

その中のhref=の ” “ で囲まれた部分が相対パスです。

最初の「”css/」で今いるindex.htmlファイルから、同じ階層内にあるcssディレクトリを指定。

最後の「stylesheet.css”」でcssディレクトリ内のstylesheet.cssファイルを指定。という感じです。

「/」は〜の中のと解釈したほうがわかりやすい気がします。

今の例でいうと cssの中のstylesheet.css みたいな感じです。

  • パターン3 1つ上の階層のディレクトリorファイルを指定

../ディレクトリ名orファイル名

  • パターン4 1つ上の階層のディレクトリ内のファイルを指定

../ディレクトリ名/ファイル名

これも例を出して説明していきます。

例)cssでbackground-imageを表示させたい場合

下の画像では、オレンジ色で表示されている url(” “) の中が背景画像を表示させるコードです。

cssディレクトリとimgディレクトリは同じ階層にあり、それぞれの中にstylesheet.cssファイルとIMG_0437.jpgという画像が入っています。

最初の「../」で1つ上の階層を指定し、「img/」で同じ下層のimgディレクトリを指定。

最後に「IMG_0437.jpg」で表示させたい画像を指定、という流れです。

今いるstylesheet.cssファイルはcssディレクトリの中にあるので1つ上のimgディレクトリを指定してからその中の画像を指定する、という感じですね。

まとめ

今回のわたしのミスはstylesheet.cssがcssディレクトリと同じ階層にあると思い、最初の../を./にしてしまって画像が表示されなかったことです。

かれこれ20分程悩み相対パスについて理解をし直し解決しました。

こんなことで悩んでいたのかという程小さなミスかもしれませんが、このミスのお陰でスキルが少しアップしたと思うので結果オーライです。

皆さんもわたしと同じようなことで時間をかけないように気をつけてください!

コメント

  1. あーちゃん より: