別フォルダのページへ移れないとき、相対パスをたどり直そう

トップページのリンクをコピーしたら、別フォルダのページからだけ案内を開けなくなった。リンクの文字が同じでも、行き先の計算に使う現在地が変わっているかもしれません。今回は、現在のURLと指定したパスを並べて原因を切り分けます。

題材は架空の町歩き案内サイトです。静的なHTMLを扱い、URLの基準を別に指定するbase要素は使わない前提とします。アクセス権やサーバーの障害までを、この方法だけで診断するものではありません。

リンクのあるページを、住所として書き出す

練習では、リンク元を https://example.com/walk/events/autumn.html、移動したい先を https://example.com/walk/access.html とします。example.comは説明用であり、実際の町歩き案内の公開先ではありません。

リンク元のHTMLに href="access.html" と書くと、期待する場所へは移りません。この例では、現在のフォルダに当たる /walk/events/ を基準にして、/walk/events/access.html が行き先になります。

最初に、リンク元のURL、hrefの値、意図した行き先を三行に書きましょう。ファイルを探す前にこの三つをそろえると、「ファイルがない」のか「探している場所が違う」のかを分けられます。

一つ上へ戻ってから、ファイル名を足す

今回のaccess.htmlはeventsフォルダの外、walkフォルダの直下にあります。一つ上を表す ../ を付けて、次のように直します。これはリンク元ページのbody内に置く断片で、単体のHTML文書ではありません。

<a href="../access.html">集合場所への行き方を見る</a>

../ で /walk/ まで戻り、access.htmlを足すと、意図したURLになります。MDNの相対URLの解決に関する説明でも、現在の階層、一つ上の階層、サイトの先頭を基準とする違いを確認できます。

勘で ../ を増やすと、別の場所へ進むことになります。紙にwalk、その下にeventsとaccess.htmlを書き、今いるファイルから何階層戻るかを指でたどってください。リンクの文言は、移動先の内容と合わせておきます。

先頭のスラッシュで、公開用フォルダを飛ばさない

/access.html なら常に正しくなる、とは考えないでください。先頭の / はサイトのルートを基準にするため、この例では https://example.com/access.html になります。walkフォルダの中を指す指定ではありません。

このサイトの公開位置に合わせるなら /walk/access.html という書き方もできます。ただし、公開用フォルダ名を変えれば、この指定も見直しが必要です。相対パスとルートからのパスのどちらを使うかは、配置と運用に合わせて決めます。

また、URL末尾のスラッシュにも注意します。/walk/events/ と /walk/events では、相対URLの基準になる階層が異なります。ここで扱うHTMLファイルの例と、サーバーが自動転送するURLを混ぜず、実際に開いたアドレスを使って確かめましょう。

直したリンクを、公開先の現在地から開く

保存したら、リンク元ページを開き直し、そこから実際に移動します。移動先を直接開くだけでは、hrefを直せたことの確認になりません。アドレスと、表示された案内の内容を両方見ます。

URLの計算が合っていても開けない場合は、公開先にファイルがあるか、名前や拡張子が一致するかを調べます。名前の大文字・小文字も、同じつもりで扱わず一致させてください。接続や権限に関するエラーなら、パスを書き換え続ける前にその状態を記録します。

手元と公開先は確認欄を分けます。公開前にフォームとリンクを確かめる記事の確認表へ、今回のリンク元と期待する行き先を一組で追加すると、更新後にも同じ経路をたどれます。

下層ページから開き、到着したURLを照合する

手元のサイトからフォルダをまたぐリンクを一つ選び、現在地・href・期待する行き先を書き出します。修正が必要なら一か所だけ直し、そのリンクを押して到着したURLを記録してください。

公開先で試せなければ、手元だけ確認したと残します。確認項目を広げる際は、公開前テストの無料レッスンも参照できます。