パスの読み方・書き方

「さっきまで表示されていた画像が、急に出なくなった」「リンクを押しても真っ白なページになる」——こういうトラブルの多くは、コードの間違いではなくパス（場所の指定）のずれが原因です。ここでは 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/ とすっきりします。

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

まとめ

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

パスの考え方は、フォルダが増えるこれから先もずっと使います。迷ったときは、この記事に道順を確かめに戻ってきてください。