HTMLリンク入門！よくあるミスも実例付きですっきり解決

HTMLリンクは、Webサイト制作において最も重要な要素の一つです。

しかし、リンクの書き方やパスの指定方法を理解せずに使うと、後々メンテナンスが困難になったり、思うようにリンクが動作しなかったりします。

本記事では、HTMLリンクの基本的な書き方から、絶対パス・相対パスの違い、よくあるミスと対策まで解説します。

新しいタブで開く方法や画像リンクの作り方も紹介するので、最後まで読んでみてください。

HTMLリンクの基本を理解しよう

リンクは、ユーザーを別のページやファイル、あるいは同じページ内の特定箇所へ案内するための仕組みです。

まず、HTMLのリンクの書き方や絶対パスと相対パスの違いを紹介します。

HTMLリンクの基礎をしっかり押さえましょう。

HTMLのリンクの書き方

HTMLでリンクを作成するには、aタグを使用します。

aタグの書き方は、<a href=””></a>を使用してhref属性にリンク先のURLを指定します。

上図のように「<a href=”表示したいリンクのURL”>表示したいテキスト</a>」で記述します。

href属性に設定した情報が、ユーザーがクリックしたときの移動先です。

例では、コードがブラウザに表示されると「デイトラWeb制作コース」のテキストがクリック可能となり、ユーザーがクリックするとhttps://daily-trial.com/web_site/へ遷移します。

絶対パスと相対パスの違い

パスは、コンピュータ上でファイルやフォルダの場所を示す住所のようなものです。

プログラミングでファイルを読み込んだり、Webページで画像を表示したりする際に必要になります。

住所の書き方である絶対パスと相対パスについて説明します。

• 絶対パスとは
• 相対パスとは
• 絶対パスと相対パスの使い分けポイント

それぞれ順番に紹介していきます。

絶対パスとは

絶対パスは、ルート（最上位）から目的のファイルまでの道のりを示すパスで、どこから見ても常に同じ場所を指します。

特徴は以下の通りです。

たとえば、index.htmlで画像を表示するとき、絶対パスを使う場合は以下のように記述します。

コピー<img src="/img/logo.png" alt="ロゴ画像">

この場合の /img/logo.png は、最上位フォルダであるmy-websiteのimgフォルダにあるlogo.png を読み込んでいるという意味になります。

相対パスとは

相対パスとは、現在のページを基準としてほかのファイルの場所を示すパスです。

フォルダごと移動・コピーしてもリンクが保たれるため、サーバー移転やドメイン変更時もリンクが機能し続けます。

特徴は以下の通りです。

たとえば、HTMLのindex.htmlからJSファイルのmain.jsを読み込みたいときは、以下のように記述します。

コピー<script src="./JS/main.js"></script>

「./」は省略することも可能で今いる場所を表しており、例ではindex.htmlを指します。

上記ではindex.htmlからJSフォルダへ入り、main.jsを読み込んでいます。

階層の書き方は、以下にまとめました。

絶対パスと相対パスの使い分けポイント

絶対パスと相対パスの特徴を以下の表にまとめました。

使い分けのポイントは「外に出るなら絶対パス、家の中なら相対パス」です。

外部サイトへのリンクは絶対パス、自分のフォルダ内のファイルは相対パスと覚えましょう。

相対パスはフォルダごと別の場所にコピーしても、中のファイル同士のつながりは保たれます。

基本ルールを守れば、効率的で保守性の高いWebサイト制作が可能です。

HTMLリンクの実装例まとめ

HTMLリンクの実装例を紹介します。

• 新しいタブで開く
• 内部リンクを設置する
• ページ内リンクを貼る
• 画像リンクを作る
• ボタンリンクを設定する
• 電話リンクを作成する
• メールリンクを作る

実案件でもよくある例のため、ぜひチェックしてみてください。

新しいタブで開く

外部サイトへリンクするときは、新しいタブで開く「target=”_blank”」コードを追記すると、ユーザーが元のページに戻りやすくなります。

コピー<a href="https://daily-trial.com/web_site/" target="_blank" rel="noopener noreferrer">
新しいタブを開く
</a>

元のページを維持したまま外部サイトや別コンテンツに誘導できるため、自サイトの離脱率をコントロールしやすくなるメリットがあります。

また、セキュリティやパフォーマンス対策として「rel=”noopener noreferrer”」をセットで記述しましょう。

両方を組み合わせることで、ユーザー体験を損なわずに、安心して使えるリンクを設置できます。

それぞれの効果は以下の通りです。

内部リンクを設置する

同じサイト内のページへ移動するときは、内部リンクを使います。

トップページから会社概要ページへ移動するときなど、ユーザーがWebサイト内をスムーズに回遊できるようにしましょう。

たとえば、トップページから会社概要ページへ移動するときは以下のように記述します。

コピー<a href="/about.html">会社概要を見る</a>

上記のコード例では、現在のページからabout.htmlというファイルに移動させています。

ファイル名を打ち間違えたり、ファイルの階層を正しく指定できていないパスの指定ミスはよくあります。

パスを間違えると、ページが見つからない「404 Not Found」エラーの原因になるため注意しましょう。

ページ内リンクを貼る

ページ内リンクは、1ページに内容が多いときに、すぐ下の項目へジャンプできる便利なリンクです。

たとえば、ページ上部の目次からクリックで同じページ内の特定の見出しやコンテンツに移動させられます。

ユーザーが必要な情報に素早くアクセスできるように手助けする、ユーザビリティ向上のための重要な機能です。

目次から特定の見出しに移動するときは以下のように記述します。

コピー<li><a href="#section1">1. セクション1へ移動</a></li>
<h2 id="section1">セクション1</h2>

上記のコード例では、目次から見出しのセクション1へ移動させています。

ページ内リンクは、リンク元にaタグを使用し、href属性に “#リンクの目的地のID名” を指定します。

リンクの目的地には、ジャンプさせたい場所にある見出しや段落に、固有のidを記述しましょう。

スクロールの動きが速すぎる場合は、CSSやJSでスムーズスクロールを追記すると調整できます。

画像リンクを作る

画像そのものをリンクにすると、バナー広告や作品ギャラリーなどで直感的な誘導が可能です。

画像のimgタグをaタグで囲うと、画像リンクを設定できます。

コピー<a href="https://example.com">
<img src="sample.jpg" alt="新製品Aの詳細を見る" />
</a>

上記のコードでは、sample.jpgという画像が表示され、ユーザーが画像をクリックするとhttps://example.comへ遷移します。

imgタグのalt属性には、適切なテキストを記述するようにしましょう。

alt属性は、何らかの理由で画像が表示されなかったときに表示されるテキストを提供するだけでなく、画面上の文字情報を音声で読み上げるスクリーンリーダーの機能があります。

画像がリンクになっている場合、このalt属性のテキストは、アンカーテキストと同様の役割を果たします。

したがって、「新製品Aの詳細を見る」のように、リンク先の情報が推測できる具体的で分かりやすい説明をalt属性に記述することが、アクセシビリティとSEOの両面から有効です。

ボタンリンクを設定する

HTMLにはbuttonタグがありますが、主にフォームの送信などに使用します。

単純なページ遷移のためのボタンは、aタグにCSSで角を丸くしたり背景色をつけたりして装飾するのが一般的です。

コピー<a href="https://example.com/signup" class="custom-button-link">今すぐ無料登録</a>

コピー.custom-button-link {
margin-bottom: 400px;

display: inline-block;
padding: 12px 28px;
background: linear-gradient(45deg, #6fb1fc 0%, #4364f7 100%);
color: #fff;
font-weight: 600;
letter-spacing: 0.5px;
text-align: center;
text-decoration: none;
border-radius: 30px;
box-shadow: 0 4px 12px rgba(67, 100, 247, 0.3);
transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.custom-button-link:hover {
transform: translateY(-3px);
box-shadow: 0 6px 16px rgba(67, 100, 247, 0.4);
filter: brightness(1.05);
outline: none;
}

上記のHTMLとCSSを組み合わせて、「今すぐ無料登録」ボタンを実装しています。

青系のグラデーション背景に白い文字で表示し、丸みのある立体的なボタン風に仕上げています。

custom-button-linkのようにクラス名を付けると、スタイルをまとめて定義できるため、同じデザインのボタンをサイト内のどこでも何度でも利用可能です。

さらにホバーしたときの見た目を切り替えることで、ユーザーに「ここが押せる」ことが直感的に伝わり、操作のしやすさも向上します。

電話リンクを作成する

ユーザーがクリックすると、デバイスの電話発信機能が起動し、指定された電話番号に発信できます。

書き方は、href属性の値にtelを設定し、その後に半角数字で電話番号を記述します。

コピー<a href="tel:00-1234-5678">00-1234-5678</a>

ハイフンは視覚的な区切りとして入れてもよいですが、省略しても機能します。

また、電話をかけるユーザーの多くはスマホからのため、ユーザーを混乱させないよう工夫が必要です。

スマホでタップした場合のみに、電話発信するようにCSSで追記しておきましょう。

コピー@media (min-width: 768px) {
a[href^="tel:"] {
pointer-events: none; /* クリックを無効化 */
cursor: default;
text-decoration: none;
}
}

CSSに上記を記述しておくと、スマホユーザーは今まで通りワンタップで電話できます。

さらにPCユーザーは電話番号を確認できるだけで誤操作はしないという、誰にとっても快適な実装が可能です。

HTMLリンクのよくあるミスと対策

初心者の方がHTMLリンクを作成する際に陥りがちなミスには、いくつかの典型的なパターンがあります。

• ファイルパスの指定ミス
• target属性の不適切な使用
• リンクの入れ子

正しいリンク設定を覚えることで、ユーザーにとって使いやすく、安全なWebサイト制作ができます。

ファイルパスの指定ミス

よくあるミスの一つが、ファイルパスの指定ミスです。

リンク先を正しく指定しないと、クリックしてもページが見つからないときに表示される「404 Not Found」エラーになります。

たとえば、次のようなフォルダ構成で会社概要ページにリンクを貼る場合、ファイルの指定を間違えてしまうと、正しく表示されなかったり、エラーになったりすることがあります。

コピー<!-- 間違えたパス -->
<a href="page/about.html">会社概要</a>
<!-- 正しいパス -->
<a href="./pages/about.html">会社概要</a>

会社概要ページがpagesフォルダの中のabout.htmlにあるとき、正確なパスは「./pages/about.html」です。

「./」は「現在のフォルダから」という意味で、これを省略すると予期しない動作を引き起こすことがあります。

パス指定に慣れないうちは、フォルダ構造を紙に書いて、どのファイルがどのフォルダにあるのか視覚的に把握するのがおすすめです。

target属性の不適切な使用

target属性は、リンクをクリックしたときにページをどこで開くかを指定する属性です。

全てのリンクにtarget=”_blank”を設定して新しいタブで開くようにしてしまうと、スマホではタブの管理が難しく、使い勝手が悪化してしまう可能性があります。

同じサイト内は同じタブ、外部サイトのみを別タブで開くように設定しましょう。

内部リンクと外部リンクでtarget属性を使い分けることで、ユーザーは自分のサイト内では自然にナビゲーションでき、外部サイトに移動する際は元のページに戻りやすくなります。

ただし、外部リンクで新しいタブで開くときは、rel=”noopener noreferrer” をセットで使用してセキュリティ対策をしましょう。

リンクの入れ子

リンクを入れ子にすると、ブラウザが勝手にHTML構造を変更してしまいます。

表示が崩れたり、リンクが動作しなくなったりする問題が発生します。

たとえば、バナー全体を大きなリンクにしつつ、その中の一部を別のリンクにしたいと考え、以下のように書いてしまうケースです。

コピー<a href="campaign-list.html">
<img src="/img/sale-banner.png" alt="セール開催中">
<p>詳細は<a href="https://daily-trial.com/web_site/">こちら</a>を見てください</p>
</a>

上記のコードでは、テキストリンクに指定していない「詳細は」にリンクがついたり、外部リンクに飛ばしたくても内部リンクに遷移してしまうといった意図しない挙動になってしまう場合があります。

このような意図しない挙動を避けるため、HTML仕様ではaタグの入れ子を禁止しています。

aタグは入れ子にせずに、要素ごとに分割して書きましょう。

コピー<a href="campaign-list.html">
<img src="/img/sale-banner.png" alt="セール開催中">
</a>
<p>詳細は<a href="https://daily-trial.com/web_site/">こちら</a>を見てください</p>

リンクの入れ子は、ボタンやカード型のデザインを作るときにしてしまいがちなミスです。

aタグの中に、aタグを入れないことをしっかり覚えておきましょう。

まとめ：HTMLリンクで価値あるWebサイトを作ろう

HTMLリンクは「aタグ+href」を覚えるだけで、さまざまなページ遷移を自由に設計できます。

絶対パスと相対パスを適切に使い分けることで、後からメンテナンスしやすいサイト構造を作れます。

外部サイトへのリンクには、target=”_blank”とrel=”noopener noreferrer”を一緒に書いて、新しいタブを安全に開くようにしましょう。

さらに、画像やボタン、電話番号などのリンクの作り方を覚えれば、ユーザーを自然に目的のページへ誘導できる効果的な仕組みが作れます。

ただし、リンク切れやタグの入れ子などの基本的なミスは、サイトを公開する前にしっかりチェックして修正しておきましょう。

これらのルールを積み重ねていくことで、使いやすくてメンテナンスしやすいサイトに近づきます。

未経験からコーディングを学ぶならデイトラWeb制作コースがおすすめ！

デイトラWeb制作コースは、実務レベルの本格スキルを学び、Web制作を仕事にしたい方におすすめのコースです。

HTML/CSSやjavaScriptの言語の基本はもちろん、デザインカンプからのコーディング、WordPressのオリジナルテーマ作成までカリキュラムに含まれています。

さらに、中級・上級の最終課題はメンターによる課題レビューがあります。現場目線の品質チェックが受けられるため、大幅なスキルアップが期待できるでしょう。

Web制作のスキルを身につけたい方は、ぜひデイトラWeb制作コースをチェックしてみてください！