HTMLリンクが飛ばない原因と対処法を現役デザイナーが解説【初心者向け】

初心者向けにHTMLリンクが飛ばない原因と対処法について解説しています。リンクを作成するaタグの基本の書き方を見直し、リンクが動作しない場合の原因の見つけ方、対処の手順を覚えましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

HTMLリンクが飛ばない原因と対処法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。

 

田島悠介

今回は、HTMLに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

リンクが飛ばない原因と対処法について詳しく説明していくね!

大石ゆかり

お願いします!

 

リンクタグの使い方

HTMLで他のページやサイトにリンクを飛ばしたいときに必須なのがリンクタグ(<a>タグ)です。HTML初心者でも簡単に覚えられるのでぜひ実践してみましょう。

書き方は以下の通りとなります。

<a href="ここはURLを記述します。">リンクはコチラだよ</a>

aタグにはhref属性が必須となります。このhref属性にリンクを飛ばしたいURLを貼り付けることでリンクが飛ぶようになります。タグと閉じタグの間には表示させたいテキストを貼り付けます。

 

リンクが正しく飛ばない原因と対処法

リンクが正しく飛ばない原因は大きく2つです。

  • 記述ミスがある
  • リンクを貼れない場所にある

詳しく解説していきます。

タグの記述にミスがる

よく見かける記述ミスは

  • URLを囲む「”」が全角だったり、抜けていたりする
  • hrefのスペルミス
  • </a>の閉じタグがない
  • URLに間違いがある

などです。URLの記述ミス、またページが存在していない場所のURLを貼り付けている場合は正しいリンクが飛びません。よく見かけるのが、URLをコピペしたときに最初か最後が欠けてしまっている、というものです。

<a href="ttps://techacademy.jp/">テックアカデミーのホームページはコチラ</a>

上記の記述では、最初のhttpの「h」が抜けてしまっているので正しいリンクを飛ばすことができません。また、いわゆる「404ページ」といった、実際に存在しないURLにリンクを飛ばしてしまっている場合もあります。

<a href="https://techacademy.jp/hoge/">テックアカデミーのホームページはコチラ</a>

上記のURLでは、テックアカデミーのサイトに「hoge」というページは存在しないので404ページに飛んでしまいます。

リンクを貼れない場所にリンクを貼ってしまっている

HTMLを一から記述するときにはほぼ問題はありませんが、ショッピングサイトなどの管理画面からHTMLを記述している場合などは、他のサイトに誘導しないようにリンクタグの記述が禁止になっていることがあります。

そういったときは一度お使いのサイトの規約を見直してみる必要があります。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

リンクさせてみよう

実際にテックアカデミーのホームページへのリンクを飛ばしてみることにしましょう

<a href="https://techacademy.jp/">テックアカデミーのホームページはコチラ</a>

結果

テックアカデミーのホームページはコチラ

 

とっても簡単にリンクを飛ばすことができました。

 

監修してくれたメンター

メンター増田直子

40歳直前までHTMLの存在すら知らなかったのですが、現在はWordPressを中心としたwebデザイン/コーディングをしているフリーランサーです。

趣味はスキューバーダイビング・年間3度は海のある国内外へ旅行してます。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは初心者でも、最短4週間でオリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。