パスの読み方・書き方

「さっきまで表示されていた画像が、急に出なくなった」「リンクを押しても真っ白なページになる」。こういうトラブルの多くは、コードの間違いではなくパス（場所の指定）のずれが原因です。ここではsrcやhrefに書く「場所」の考え方を整理します。

同じフォルダにあるとき

いま書いているHTMLファイルと同じフォルダに画像があるなら、ファイル名だけでOKです。

<img src="shima.png" alt="しまちゃんの写真">

フォルダの中にあるとき（下へ進む）

imagesフォルダの中に画像を入れたなら、フォルダ名も一緒に書きます。/がフォルダの区切りです。

<img src="images/shima.png" alt="しまちゃんの写真">

フォルダが2段重なっていれば、そのぶんもつなげます。

<img src="images/icons/star.png" alt="星のアイコン">

1つ上のフォルダに戻るとき（../）

pagesフォルダの中にあるHTMLから、1つ上にあるimagesフォルダの画像を出したいこともあります。このときに使うのが../（1つ上に戻る、という意味の記号）です。

<img src="../images/shima.png" alt="しまちゃんの写真">

../は重ねて書けます。2つ上のフォルダまで戻りたいなら../../です。

<img src="../../images/shima.png" alt="しまちゃんの写真">

表でまとめると

<a href="...">のリンク先も、書き方は<img>とまったく同じルールです。

絶対パスとの違い

ここまでの書き方は「今のファイルから見た道順」なので相対パスと呼びます。これに対して、場所を1つに固定して書く方法が絶対パスです。

• 他のサイトへのリンク … https://から始める絶対パス一択です。<a href="https://example.com">。
• 自分のサイト内でも、/から書き始める絶対パス（ルート相対パス）が使えます。/はサイトの一番外側のフォルダを指すので、今のファイルがどこにあっても同じ書き方で通じます。

<img src="/images/shima.png" alt="しまちゃんの写真">

どのフォルダの記事からリンクしても道順が変わらないので、大きいサイトほどこの書き方が好まれます。迷ったら「他サイト＝https://」「自サイト内＝相対パスか/から」とだけ覚えておけば十分です。

./は書いたほうがいい？

./は「今いるフォルダ」を明示する書き方です。./shima.pngとshima.pngはまったく同じ場所を指します。

<img src="./shima.png" alt="しまちゃんの写真">
<img src="shima.png" alt="しまちゃんの写真">

どちらでも動くので、好みで決めてかまいません。「同じフォルダを指しているつもり」だと自分に分かりやすいので./を付ける人もいます。

CSSの中のパスは、CSSファイルから見た道順

ここが初心者がいちばんひっかかる落とし穴です。CSSのbackground-image: url(...)に書くパスは、HTMLからの道順ではなく、そのCSSファイルからの道順になります。

site/
├─ index.html
├─ css/
│   └─ style.css       ← このファイルから見た道順を書く
└─ images/
    └─ bg.png

この構成なら、HTMLに書くときと答えが変わります。

<!-- index.html から見ると images はすぐ隣 -->
<img src="images/bg.png" alt="背景の写真">

/* style.css から見ると、1つ上に戻ってから images へ */
body {
  background-image: url(../images/bg.png);
}

HTMLでは動いたパスをCSSにコピペして動かない。原因はほぼこれです。CSSを書いているときは「今このCSSファイルはどこにいるか」を思い出してください。

画像が表示されないときに、パス以外の原因も含めて上から順に確かめる手順はこちらです。

基準の早見表

VSCodeなら、手で書かなくていい

パスは数えまちがえる作業なので、そもそも手打ちしないのがいちばん確実です。

• 入力の補完にまかせる：src="まで打つと、その場所にあるファイルの候補が出ます。候補から選べば、綴りも階層もまちがえません
• ファイルをエディタにドラッグする：⇧（Shift）を押しながらエクスプローラーからコードの中へドラッグ＆ドロップすると、そのファイルへのパスが挿入されます
• 右クリックから「相対パスのコピー」：サイドバーでファイルを右クリック→「相対パスのコピー」。フォルダが深いときはこれが最速です

リンク先がフォルダのとき

<a href="about/">のようにフォルダで終わるリンクもよく見かけます。これは「そのフォルダの中のindex.htmlを開く」という意味です。だから、フォルダ名をabout、その中のファイル名をindex.htmlにしておくと、URLがexample.com/about/とすっきりします。

このとき、末尾の/は付けておくのがおすすめです。付けないと、サーバー側でフォルダかファイルかを判断してから転送し直す動きが入り、わずかに遅くなることがあります。

書いたパスが合っているか自信がないときは、画像パスのチェッカーにHTMLファイルの場所と画像の場所を入れると、書くべきパスを出してくれます。

まとめ

1. 同じフォルダならファイル名だけ
2. 下のフォルダに進むならフォルダ名/ファイル名
3. 上のフォルダに戻るなら../（重ねられる）
4. 他サイトはhttps://、自サイト内は相対パスか/から書く絶対パス
5. CSSのurl()はCSSファイルからの道順：HTMLのパスをコピペすると外れる
6. 表示されないときは、拡張子・大文字小文字・置き場所を順番に疑う
7. 手打ちせず、エディタの補完か「相対パスのコピー」にまかせる