ホームへ

【html】リンク「ファイルが見つかりません」の解決方法

2022年08月07日

Edgeにて「ファイルが見つかりません 移動、編集、または削除された可能性があります。ERR_FILE_NOT_FOUND」

chromeにて「ファイルにアクセスできませんでした 移動、編集、削除された可能性があります。ERR_FILE_NOT_FOUND」

リンクをクリックしたときにこのエラーになる原因と解決方法を解説します。

【復習】aタグの使い方

aタグは下記のように記述します。

<a href="index.html">トップページ</a>

""内にリンク先を設定しますが、そのリンク先かファイル名に問題があるとこのエラーが表示されます。

CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。

↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓

【原因1】ファイルがない、アップロードされていない

リンク先に設定されているpdfやhtmlがないときにこのエラー表示がされます。

まずはそのファイルがそのフォルダ内にあるか確認しましょう。

「ファイルが見つかりません」という表示は基本的にローカル環境(自分のパソコン内の環境)で表示されます。

Webサーバー環境(アップロード先)では「404」という表示になることが多いです。

ローカル環境ではちゃんとリンクされているのに、Webサーバー環境では「404」という表示になったときは、リンク先のファイルがアップロードされていない可能性があります。

アップロードされているか確認しましょう。

【原因2】ファイル名、拡張子を間違えている、名前を変えた

リンク先のファイル名を間違えているとリンクしません。

拡張子(pdfやhtml)がない場合や、ファイル名と拡張子の間に打つ「.」がない場合もダメです。

  • ○index.html
  • ○INDEX.html
  • ×imdex.html
  • ×index
  • ×indexhtml
  • ×index.htm
  • ×index.pdf

小文字を大文字にしてもリンクしますが、基本的にリンク先のファイル名と同じにしておきましょう。

昔は「htm」という拡張子がよく使われていました。「html」と「htm」では拡張子が違い、別のファイル名と認識されるため気を付けましょう。

また、リンク先のファイルの名前を変えた場合もリンクしません。

ファイル名がリンク先のファイル名に一致しているか確認しましょう。

【原因3】パスを間違えている、移動した

初心者の最初の難関が相対パスです。

相対パスは自ファイルを基準に相手のファイルの場所を指定する方法です。

ファイルをあがった分だけ「../」を書き、そこからフォルダとファイルを指定する方法です。

例)

<a href="../../../about/about2/index.html">トップページ</a>

初心者の内は難しいので全ファイル同じフォルダにいれるか、なるべく少なくフォルダを使うといいでしょう。

下記記事で相対パスをきちんと理解してください。

相対パスがメンドウだからと絶対パスを指定したときも注意です。

ローカル環境では「file:///」ですが、Webサーバー環境では「https://」となり、リンク先が違ってしまいます。

ローカル環境ではリンクしていてもアップロードするとリンクが切れてしまいます。

ローカル環境で作るときは基本的に相対パスで作りましょう。

ファイルの場所(フォルダ)を移動したりフォルダ名を変えてしまうと当然パスもリンク先も変わってしまいます。

パス、フォルダ名があっているか確認しましょう。

記号のミスは関係ない

先述したようにaタグは下記のように指定します。

<a href="index.html">トップページ</a>

ファイル名以外の部分、記号などを間違うとどうなるのでしょう。

答えは「リンクにならない」か「ブラウザが自動修復する」です。

クリックしたら「ファイルが見つかりません」が表示された時点でリンクにはなっているため記号のミスの可能性は低いですし、記号がミスしていることを起因に「ファイルが見つかりません」のエラーにはなりません。

例外があり、最初の「"」がなく最後の「"」があるとき、このエラーになります。

<a href=index.html">トップページ</a>

【まとめ】「ファイルが見つかりません」の原因

  • ファイルがない
  • ファイル名を間違えている
  • 拡張子を間違えている
  • ファイル名と拡張子の間の「.」がない
  • ファイルの名前を変えた
  • 相対パスを間違えている
  • ファイルを移動した
  • フォルダの名前を変えた

以上、「ファイルが見つかりません」のエラーになる原因と解決方法でした。

「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。

CSSやhtmlをマンガで学ぶ