コンテンツにスキップ

HTML/ハイパーリンク

出典: フリー教科書『ウィキブックス(Wikibooks)』

ハイパーリンクの基本

[編集]

ハイパーリンク(リンク)は、ユーザーがクリックすることで、別のウェブページや同じページ内の別の場所に移動できる要素です。リンクを使用することで、ウェブ全体のナビゲーションが可能になります。リンクは通常、<a>要素を使用して作成されます。

ハイパーリンクの基本構造

[編集]

ハイパーリンクは以下のように記述します。

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

href属性にリンク先のURLを指定し、その間のテキストがリンクとして表示されます。

ハイパーリンクの種類

[編集]

ハイパーリンクには主に以下の種類があります。

絶対URL
完全なURLを指定します。外部サイトへのリンクに使用されます。
<a href="https://www.example.com">Example</a>
相対URL
現在の文書を基準にリンク先を指定します。サイト内の他のページへのリンクに使用されます。
<a href="about.html">About Us</a>
ページ内リンク
同じページ内の特定の位置にリンクします。href属性にハッシュ(#)とIDを指定します。
<a href="#section1">セクション1へ移動</a>
リンク先のセクションにはid属性を指定します。
<h2 id="section1">セクション1</h2>

ハイパーリンクの属性

[編集]

<a>要素には、以下のような属性を追加することで、リンクの動作や表示を制御することができます。

target属性
リンク先の表示方法を指定します。
_blank: 新しいタブまたはウィンドウでリンク先を開きます。
<a href="https://www.example.com" target="_blank">Example</a>
_self: 同じフレームでリンク先を開きます(デフォルト)。
<a href="about.html" target="_self">About Us</a>
rel属性
リンク先との関係を指定します。特にtarget="_blank"を使用する場合は、noopenerおよびnoreferrerを指定することが推奨されます。
<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">Example</a>
title属性
リンクの追加情報を提供します。リンクにホバーした際にツールチップとして表示されます。
<a href="about.html" title="私たちについて">About Us</a>

アンカーテキストの重要性

[編集]

リンクテキスト(アンカーテキスト)は、リンクの内容をわかりやすく説明することが重要です。良いアンカーテキストは、ユーザーがリンク先の内容を予測できるようにします。検索エンジン最適化(SEO)においても、適切なアンカーテキストは重要です。

良い例
<a href="contact.html">お問い合わせページへ</a>
悪い例
<a href="contact.html">ここをクリック</a>

ハイパーリンクのスタイル

[編集]

リンクのスタイルは、CSSを使用してカスタマイズできます。一般的には、リンクは青色で下線が引かれているスタイルですが、CSSを使用して変更することが可能です。

a {
    color: blue;
    text-decoration: underline;
}

a:hover {
    color: red;
    text-decoration: none;
}

ハイパーリンクの例

[編集]

以下は、さまざまなハイパーリンクの具体的な例です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ハイパーリンクの例</title>
    <style>
        a {
            color: blue;
            text-decoration: underline;
        }
        a:hover {
            color: red;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <h1>ハイパーリンクの例</h1>
    <p>以下は、さまざまな種類のハイパーリンクの例です。</p>

    <h2>絶対URL</h2>
    <p><a href="https://www.example.com" target="_blank" rel="noopener noreferrer">Example</a></p>

    <h2>相対URL</h2>
    <p><a href="about.html">About Us</a></p>

    <h2>ページ内リンク</h2>
    <p><a href="#section1">セクション1へ移動</a></p>

    <h2 id="section1">セクション1</h2>
    <p>これはセクション1の内容です。</p>

    <p><a href="#top">ページのトップへ戻る</a></p>
</body>
</html>

まとめ

[編集]

ハイパーリンクは、ウェブページ間のナビゲーションを実現するための基本的な要素です。適切な属性の使用とわかりやすいアンカーテキストを用いることで、ユーザーの利便性を向上させることができます。CSSを使用してリンクのスタイルをカスタマイズすることで、サイトのデザインに合わせたリンク表示が可能です。

外部リンク

[編集]
Wikipedia
Wikipedia
ウィキペディアハイパーリンクの記事があります。