初心者でもわかるHTMLリンクの作り方｜基礎から応用までしっかり解説

ホームページやブログを作るとき、絶対に欠かせないのがリンク。リンクを使うことで、他のページに移動したり、ファイルをダウンロードできたりと、ウェブの大きな魅力を引き出せます。

「HTMLでリンクってどう書くの？」「新しいタブで開くには？」

そんな疑問を持つ方のために、この記事ではHTMLリンクの基礎からちょっと便利な使い方まで詳しく解説します。

この記事を読めば、すぐに自分のページにリンクを自由に設置できるようになりますよ。

HTMLリンクとは？
HTMLリンクの基本的な作り方
便利なリンクの応用テクニック
特殊なリンクの種類
リンクのスタイリング
1. CSSでリンクの見た目を変更
2. リンクの状態を示すCSS
アクセシビリティを考慮したリンク
SEOを意識したリンクの作り方
HTMLリンクの注意点
よくある問題と解決法
1. リンクが機能しない場合
2. アクセシビリティの問題
まとめ
1. 重要なポイント
2. ベストプラクティス

HTMLリンクとは？

リンクってなに？

リンク（正式にはハイパーリンク）は、ウェブ上で別のページやファイルへ飛ぶためのつながりです。

HTMLでは<a>というタグを使ってリンクを作ります。これをアンカータグと呼びます。

リンクの基本的な形

<a href="https://example.com">この文字をクリックすると移動します</a>

このように書くと、クリックしたときにhttps://example.comへ移動するリンクができます。

リンクの構成要素

リンクは以下の要素で構成されています：

要素	説明	例
`<a>`	アンカータグ（開始）	`<a>`
`href`	リンク先のURL	`href="https://example.com"`
リンクテキスト	クリックできる文字	`Googleへ移動`
`</a>`	アンカータグ（終了）	`</a>`

HTMLリンクの基本的な作り方

基本構造

<a href="URL">リンクテキスト</a>

hrefは「リンク先」を指定する属性です
リンクテキストの部分をクリックすると、指定したURLへ移動します

外部サイトへのリンク

<a href="https://www.google.com/">Googleを開く</a>
<a href="https://www.yahoo.co.jp/">Yahoo! JAPANを開く</a>
<a href="https://github.com/">GitHubを開く</a>

この場合、「Googleを開く」をクリックするとGoogleのトップページに移動します。

同じサイト内のページにリンク

絶対パス

<a href="/about.html">会社概要</a>
<a href="/contact/index.html">お問い合わせ</a>

相対パス

<!-- 同じフォルダ内のファイル -->
<a href="about.html">会社概要</a>

<!-- 上の階層のファイル -->
<a href="../index.html">トップページへ</a>

<!-- 下の階層のファイル -->
<a href="images/photo.html">写真ページ</a>

パスの種類と使い分け

パスの種類	書き方	使用場面
絶対URL	`https://example.com/page.html`	外部サイト
絶対パス	`/about.html`	同じサイト内（ルートから）
相対パス	`about.html`	同じフォルダ内
相対パス（上位）	`../index.html`	上の階層

便利なリンクの応用テクニック

新しいタブで開く

外部サイトへのリンクは、新しいタブで開くことが多いです：

<a href="https://example.com" target="_blank" rel="noopener">別タブで開くリンク</a>

target="_blank"をつけると新しいタブで開きます
rel="noopener"をつけるとセキュリティ面で安全です

なぜ`rel="noopener"`が必要？

新しいタブで開いたページから、元のページを操作される可能性があります。rel="noopener"はこれを防ぐセキュリティ対策です。

<!-- 推奨される書き方 -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  外部サイトへのリンク
</a>

ページ内リンク（アンカーリンク）

同じページ内の特定の場所に移動したいときに使います：

<!-- 目次部分 -->
<nav>
  <ul>
    <li><a href="#introduction">はじめに</a></li>
    <li><a href="#basic">基本的な使い方</a></li>
    <li><a href="#advanced">応用テクニック</a></li>
  </ul>
</nav>

<!-- 本文部分 -->
<section id="introduction">
  <h2>はじめに</h2>
  <p>内容...</p>
</section>

<section id="basic">
  <h2>基本的な使い方</h2>
  <p>内容...</p>
</section>

<section id="advanced">
  <h2>応用テクニック</h2>
  <p>内容...</p>
</section>

href="#ID名"とid="ID名"をセットで使うのがポイントです。

ページトップへ戻るリンク

<!-- ページの上部 -->
<header id="top">
  <h1>サイトタイトル</h1>
</header>

<!-- ページの下部 -->
<footer>
  <a href="#top">ページトップへ戻る</a>
</footer>

メールリンク

クリックするとメールソフトが開くリンクです：

<a href="mailto:info@example.com">お問い合わせはこちら</a>

メールリンクの詳細設定

<!-- 件名と本文を指定 -->
<a href="mailto:info@example.com?subject=お問い合わせ&body=お名前：%0D%0A内容：">
  メール送信
</a>

<!-- CC、BCCも指定可能 -->
<a href="mailto:info@example.com?cc=manager@example.com&bcc=admin@example.com">
  複数宛先メール
</a>

電話リンク

スマートフォンで電話をかけられるリンクです：

<a href="tel:03-1234-5678">03-1234-5678</a>
<a href="tel:+81312345678">+81-3-1234-5678（国際表記）</a>

ファイルダウンロードリンク

基本的なダウンロードリンク

<a href="files/document.pdf">PDFをダウンロード</a>
<a href="files/image.jpg">画像をダウンロード</a>
<a href="files/archive.zip">ZIPファイルをダウンロード</a>

ダウンロード時のファイル名を指定

<a href="files/report2024.pdf" download="年次報告書2024.pdf">
  年次報告書をダウンロード
</a>

download属性を使うと、ダウンロード時のファイル名を指定できます。

特殊なリンクの種類

JavaScriptリンク

<!-- JavaScriptを実行するリンク -->
<a href="javascript:void(0)" onclick="alert('こんにちは')">
  アラートを表示
</a>

<!-- より良い書き方：hrefは使わずonclickのみ -->
<button onclick="alert('こんにちは')">アラートを表示</button>

何もしないリンク

<!-- プレースホルダーとして使用 -->
<a href="#">準備中</a>
<a href="javascript:void(0)">準備中</a>

外部アプリケーションリンク

<!-- LINEで共有 -->
<a href="https://social-plugins.line.me/lineit/share?url=https://example.com">
  LINEで共有
</a>

<!-- Twitterで共有 -->
<a href="https://twitter.com/intent/tweet?url=https://example.com&text=記事タイトル">
  Twitterで共有
</a>

<!-- Skypeで通話 -->
<a href="skype:username?call">Skypeで通話</a>

リンクのスタイリング

CSSでリンクの見た目を変更

<style>
/* 通常のリンク */
a {
  color: #007bff;
  text-decoration: none;
}

/* マウスを乗せたとき */
a:hover {
  color: #0056b3;
  text-decoration: underline;
}

/* 訪問済みのリンク */
a:visited {
  color: #6c757d;
}

/* ボタン風のリンク */
.btn-link {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border-radius: 5px;
  text-decoration: none;
}

.btn-link:hover {
  background-color: #0056b3;
  color: white;
}
</style>

<!-- HTMLでの使用例 -->
<a href="https://example.com" class="btn-link">ボタン風リンク</a>

リンクの状態を示すCSS

/* リンクの4つの状態 */
a:link { color: blue; }      /* 未訪問 */
a:visited { color: purple; } /* 訪問済み */
a:hover { color: red; }      /* マウスオーバー */
a:active { color: yellow; }  /* クリック中 */

アクセシビリティを考慮したリンク

わかりやすいリンクテキスト

悪い例

<a href="/menu.html">こちらをクリック</a>
<a href="/download.pdf">ダウンロード</a>

良い例

<a href="/menu.html">メニュー一覧ページへ</a>
<a href="/download.pdf">製品カタログ（PDF形式）をダウンロード</a>

スクリーンリーダー対応

<!-- aria-label で追加説明 -->
<a href="https://twitter.com/username" aria-label="Twitterプロフィールを新しいタブで開く">
  Twitter
</a>

<!-- title属性でツールチップ表示 -->
<a href="/contact.html" title="お問い合わせフォームへ移動します">
  お問い合わせ
</a>

外部リンクの明示

<!-- 外部リンクであることを明示 -->
<a href="https://example.com" target="_blank" rel="noopener">
  外部サイト <span aria-label="新しいタブで開きます">↗</span>
</a>

SEOを意識したリンクの作り方

内部リンクの最適化

<!-- キーワードを含むアンカーテキスト -->
<a href="/html-tutorial.html">HTML初心者向けチュートリアル</a>

<!-- 関連ページへの内部リンク -->
<a href="/css-basics.html">CSSの基礎も合わせて学習しましょう</a>

外部リンクのSEO対策

<!-- 信頼できるサイトへのリンク -->
<a href="https://developer.mozilla.org/docs/Web/HTML" rel="noopener">
  MDN Web Docs（HTMLリファレンス）
</a>

<!-- nofollowを使用する場合 -->
<a href="https://affiliate-link.com" rel="nofollow noopener">
  アフィリエイトリンク
</a>

パンくずリストの実装

<nav aria-label="パンくずリスト">
  <ol>
    <li><a href="/">ホーム</a></li>
    <li><a href="/category/">カテゴリー</a></li>
    <li aria-current="page">現在のページ</li>
  </ol>
</nav>

HTMLリンクの注意点

セキュリティに関する注意

`target="_blank"`の安全な使用

<!-- 必ずrel属性を追加 -->
<a href="https://external-site.com" target="_blank" rel="noopener noreferrer">
  外部サイト
</a>

信頼できないサイトへのリンク

<!-- nofollow を追加してSEO上の関連性を断つ -->
<a href="https://untrusted-site.com" rel="nofollow noopener">
  信頼性の低いサイト
</a>

リンク切れ対策

定期的なチェック

<!-- コメントで確認日を記録 -->
<!-- 最終確認日: 2024-12-25 -->
<a href="https://example.com/page.html">外部リンク</a>

404エラーページの設定

リンク切れが発生した場合に備えて、わかりやすい404エラーページを用意しましょう。

パフォーマンスへの配慮

画像リンクの最適化

<!-- 画像サイズを指定 -->
<a href="/large-image.html">
  <img src="thumbnail.jpg" alt="大きな画像を見る" width="150" height="100">
</a>

<!-- 遅延読み込み -->
<a href="/gallery.html">
  <img src="thumbnail.jpg" alt="ギャラリーページ" loading="lazy">
</a>

プリロード機能の活用

<!-- 重要なページを事前読み込み -->
<link rel="prefetch" href="/important-page.html">

<!-- DNSプリフェッチ -->
<link rel="dns-prefetch" href="//external-domain.com">

よくある問題と解決法

リンクが機能しない場合

チェックポイント

URLの記述ミス

<!-- NG: httpが抜けている -->
<a href="//example.com">リンク</a>

<!-- OK: 完全なURL -->
<a href="https://example.com">リンク</a>

ファイルパスの間違い

<!-- NG: ファイルが存在しない -->
<a href="nonexistent-page.html">リンク</a>

<!-- OK: 正しいパス -->
<a href="existing-page.html">リンク</a>

アンカータグの閉じ忘れ

<!-- NG: 閉じタグがない -->
<a href="page.html">リンク

<!-- OK: 正しく閉じている -->
<a href="page.html">リンク</a>

アクセシビリティの問題

キーボードナビゲーション

<!-- tabindex で順序を制御 -->
<a href="/important.html" tabindex="1">重要なリンク</a>
<a href="/normal.html" tabindex="2">通常のリンク</a>

<!-- フォーカス表示のCSS -->
<style>
a:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}
</style>

まとめ

HTMLリンクの作成は、ウェブサイト構築の基本中の基本です。

重要なポイント

基本構文：<a href="URL">テキスト</a>
新しいタブ：target="_blank" rel="noopener"
ページ内リンク：href="#id"とセット
特殊リンク：mailto:、tel:、download属性

ベストプラクティス

わかりやすいリンクテキストを使用
セキュリティ属性（rel="noopener"）を忘れずに
アクセシビリティを考慮した設計
SEO効果を意識したアンカーテキスト
定期的なリンク切れチェック