トラブルシュート

公開後にリンク切れになるときの対処

作ったときは動いていたのに、公開したらリンクをクリックしても何も起きない、あるいは「ページが見つかりません」になる。よくあるのはパスの書き方やZIPの構造に原因があるケースです。この記事では、リンク切れの典型パターンと直し方、そして公開前に防ぐコツを順番に説明します。

まず「どのリンクが切れているか」を切り分ける

一口にリンク切れと言っても、症状はいくつかに分かれます。直し方を間違えないためにも、最初にどのタイプかを見極めておくと無駄がありません。

ブラウザでリンクをクリックしたとき、URLバーがどう変わるかを観察してみてください。アドレスが変わったのに「見つかりません」と出るのか、そもそも何も反応しないのか、画面の途中に飛ぶはずが動かないのか。この違いで原因の見当がつきます。

  • 別ページへのリンクが「見つかりません」になる場合は、ファイルのパスやファイル名のずれを疑います。
  • 同じページ内の見出しに飛ぶリンク(#で始まるアンカー)が動かない場合は、リンク先のidの綴り違いを疑います。
  • クリックしても何も起きない場合は、href属性の書き忘れや、JavaScript側の処理が止まっている可能性があります。

原因の多くは「パスの書き方」にある

手元のパソコンでファイルを直接開いていたときと、共有URLで公開したときとでは、ファイルの置かれ方が変わります。このギャップが、リンク切れの最も多い原因です。

とくに気をつけたいのが、絶対パスと相対パスの違いです。先頭がCドライブから始まるパスや、自分のパソコン内のフォルダを指す書き方は、公開先では存在しないため必ず切れます。リンク先は、公開するファイル同士の位置関係で書く(相対パス)のが基本です。

  • 「file:///Users/...」や「C:\\Users\\...」のような、自分の端末を指すパスは公開後に必ず切れます。
  • 「/about.html」のようにスラッシュ始まりの書き方は、想定と違う階層を指してしまうことがあります。まずは「about.html」のように相対で書くのが安全です。
  • サブフォルダにあるファイルを指すときは、「pages/detail.html」のようにフォルダ名を含めます。
  • ひとつ上の階層へ戻るときは「../index.html」のように書きます。

症状別チェック表

公開後にリンク切れになるは、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。

確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。

  • 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
  • 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
  • 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
  • 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する

見落としがちな「大文字小文字」と「全角・拡張子」

パスの形は正しそうなのにリンクが切れる、というときに疑ってほしいのが、ファイル名の細かな表記ゆれです。手元の環境では通っていたものが、公開先では通らないという食い違いがよく起こります。

Windowsやお使いのMacの設定によっては、大文字と小文字を区別せずにファイルを開けてしまいます。そのため「Image.png」を「image.png」と書いていても手元では表示され、公開後にだけ切れる、ということが起こります。公開先は区別する前提で、リンクの綴りとファイル名を一字一句そろえてください。

  • 「About.html」と「about.html」は別物として扱われる前提で統一します。
  • 拡張子の付け忘れ(「about」だけになっている)や、全角の英数字・スペースが紛れていないか確認します。
  • アンカーリンクは、href側の「#section1」とリンク先要素の「id="section1"」を完全に一致させます。

ZIPで公開したときに起こりやすいリンク切れ

フォルダごと圧縮したZIPをアップロードして公開する場合、圧縮のしかたによってフォルダ構造が一段ずれることがあります。すると、相対パスは正しくてもファイルが想定の位置に無く、リンクが切れてしまいます。

よくあるのは、フォルダ自体を圧縮した結果、いちばん外側にフォルダが一枚多くかぶさってしまうパターンです。トップページであるindex.htmlは、できるだけZIPを開いてすぐの位置(最上位)に置くのが無難です。

  • フォルダの中身(index.htmlや画像)を選択して圧縮し、外側に余分なフォルダを作らないようにします。
  • index.htmlとリンク先ファイル、画像フォルダの位置関係が、手元と同じになっているか確認します。
  • Macで圧縮したときに混じる隠しフォルダなど、公開に不要なファイルは含めないようにします。

ギガサイト便で直して再公開する手順

原因の見当がついたら、修正したファイルを反映させます。ギガサイト便には、同じURLのままファイルを差し替えられる仕組みがあるので、リンクを送り直さずに直せます。

アップロード時にはセキュリティスキャンが走り、外部スクリプトへの依存や静的公開に不要なファイルなどの兆候を警告してくれます。リンク切れの遠因になりがちな不要ファイルの混入にも気づきやすくなります。

  • 手元でブラウザにファイルを直接開き、リンクが動くか一通りクリックして確認します。
  • 切れていたリンクのパス・綴り・id名を、ファイル名と一字一句そろえて修正します。
  • ZIPで公開していた場合は、外側に余分なフォルダがない状態で圧縮し直します。
  • 管理画面で対象サイトを開き、同じURLのまま修正後のファイルへ差し替えます。
  • 公開された共有URLを開き、別ページ遷移とページ内アンカーの両方を実際にクリックして確認します。

よくある質問

手元では動いていたのに、公開したらリンクだけ切れるのはなぜですか

手元で開いたときと公開後とでは、ファイルの置かれ方が変わるためです。自分の端末を指す絶対パスは公開先に存在しないので切れます。また大文字小文字の区別の有無が環境で異なり、綴りのずれが公開後にだけ表面化することもあります。リンクは相対パスで書き、ファイル名と完全にそろえてください。

ページ内の見出しに飛ぶリンクが動きません

アンカーリンク(#で始まるリンク)は、href側の値とリンク先要素のid名が完全に一致している必要があります。「#price」と「id="Price"」のように大文字小文字や綴りが違うと飛びません。両者を見比べて、一字一句そろえてください。

リンクを直したあと、URLは送り直す必要がありますか

ギガサイト便では同じURLのままファイルを差し替えられるため、共有相手にリンクを送り直す必要はありません。差し替え後の共有URLを自分で開き、リンクが正しく動くか確認しておくと安心です。

ZIPで公開するとリンクが切れやすいのはどんなときですか

フォルダごと圧縮して、いちばん外側に余分なフォルダが一枚かぶさってしまうと、ファイルの位置がずれてリンクが切れます。フォルダの中身を選んで圧縮し、index.htmlを最上位に置くと防げます。公開に不要な隠しファイルも含めないようにしてください。

原因が分からないときはどこから確認すべきですか?

まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。

関連記事

トラブルシュート

公開後にレイアウトが崩れる原因と直し方

手元では整っていたのに公開後にレイアウトが崩れた方向け。CSSや画像へのパスが公開環境で解決できていないケースを中心に、崩れの代表的な原因と修正手順をひとつずつ確認できます。

7分で読める
トラブルシュート

公開後にJavaScriptが動かないときの原因と直し方

ローカルでは動いていたボタンやアニメーションが公開後に反応しなくなった方向け。JavaScriptが止まる主な原因をファイルパスや読み込み順の観点で切り分け、自分で直せるかどうかを判断できます。

5分で読める
トラブルシュート

ページ内リンクでスクロール位置がずれるときの対処

目次リンクをクリックすると飛んだ先の見出しが固定ヘッダーの裏に隠れてしまう。アンカーリンクとスクロール基準のずれが原因で、数行の CSS で解決できます。仕組みと対処手順を整理します。

5分で読める
トラブルシュート

スマホだけ表示が崩れるときの原因と直し方

パソコンでは正常なのにスマホで開くと文字が小さすぎたりレイアウトが崩れたりして困っている方向け。viewportの指定漏れや固定幅指定が原因かどうかを症状から切り分け、HTMLとCSSの修正ポイントを確認できます。

4分で読める
トラブルシュート

印刷すると崩れる・はみ出すときの対処

画面では整っているのに印刷すると文字が切れたり右端がはみ出したりする悩みを持つ人向けに、印刷用CSSとページ設定で崩れを防ぐ具体的な手順を説明します。

4分で読める
トラブルシュート

position:fixedの要素がずれるときの対処

position:fixedを指定したはずの要素がスクロールでずれる場合に、犯人が要素自身ではなく祖先のtransformなどにあることを理解し、素早く特定・修正できるようになる記事です。

6分で読める
「トラブルシュート」の記事をもっと見る →