リンクはほぼすべてのWebページにあります。リンクを使用すると、ユーザーはページ間を移動できます。
HTMLリンク – ハイパーリンク
HTMLリンクはハイパーリンクです。
リンクをクリックして他の文書にジャンプすることができます。
マウスをリンク上に移動するとマウスの矢印が小さな手の形に変わります。
ノート: リンクはテキストである必要はありません。画像か、他のHTMLの要素を指定してください
HTMLリンク – 構文
ハイパーリンクはHTML <a> タグで定義されます。:
<a href=”url“>link text</a>
例文
<a href=”https://youneedjp.com/14-html-link”>Visit HTML tutorial</a>
href 属性は、リンクの宛先アドレスを指定します。 (https://youneedjp.com/14-html-link)
リンクテキストは、実際のリンクURLではなく表示され目に見える部分です (詳しくはHTMLのチュートリアルを参照してください)
リンクテキストをクリックすると、指定されたアドレスにあなたを送ります。
ノート: サブフォルダアドレスの末尾にスラッシュがない場合は、
サーバーに対して2つのリクエストを生成する可能性があります。多くのサーバーは自動的にアドレスの最後にスラッシュを追加してから新しいリクエストを作成します。
ローカルリンク
上記の例では絶対URL（完全なパスのWebアドレス）を使用しました。
ローカルリンク（同じWebサイトへのリンク）は相対URL（https：// www ….なし）で指定できます。
例文
<a href=”html_images.asp”>HTML Images</a>
HTMLリンクの色
デフォルトで、リンクは（すべてのブラウザで）このように表示されます。:
- 未訪問のリンクには下線が引かれて、青く表示
- 訪問したリンクには下線が引かれて紫色表示
- アクティブなリンクは下線付きで赤表示
デフォルトの表示色はCSSを使って変更できます。
例文
<style>
a:link {
color: green;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: pink;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}
a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
</style>
リンクは、CSSを使用してボタンとしてスタイル設定されることがよくあります。マウスカーソルを合わせるとカーソルが変わります。:
This is a link
例文
<style>
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 15px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}
</style>
CSSの詳細については、 CSS チュートリアルを参照してください。
HTMLリンク – ターゲット属性
target 属性はリンクされた文章の場所を開く場所を指定します。
target 属性には、次のいずれかのん値を持つことが出来ます:
_blank– リンク先の文章を新しいウィンドウまたはタブで開く_self– Opens the linked document in the same window/tab as it was clicked (this is default)_parent– 親フレームにリンクされた文書を開く_top– リンクされた文書をウィンドウの本文全体で開く- framename – 名前付きフレームでリンクされた文書を開く
この例では、リンクされた文書を新しいブラウザウィンドウ/タブで開きます。:
例文
<a href=”https://www.berry.com/”
target=”_blank”>Visit berry!</a>
ヒント: Webページがフレーム内にロックされている場合に target="_top" を使えばフレームから抜け出すために使用できます。:
例文
<a href=”https://www.berry.com/html/”
target=”_top”>HTML5 tutorial!</a>
HTML Links – リンクアイコン画像
リンクとして画像を使用するのが一般的です。:
例文
<a href=”default.asp”>
<img src=”smiley.gif” alt=”HTML tutorial” style=”width:42px;height:42px;border:0;”>
</a>
ノート: border:0;IE9（およびそれ以前）が画像の周囲に境界線を表示しないようにするために追加されました（画像がリンクのとき）
リンクタイトル
title 属性は要素に関する追加情報を指定します。この情報は、マウスが要素のに移動した際にツールチップテキストとして
表示されることがほとんどです。
例文
<a href=”https://www.berry.com/html/” title=”Go to berry HTML
section”>HTML勉強ページを開く</a>
HTMLリンク – ブックマークを作成（ブラウザのブックマークではない）
HTMLブックマークは、読者がWebページの特定の部分にジャンプできるようにするために使用されます。
Webページが非常に長い場合は、ブックマーク（HTMLページのジャンプ機能）が便利です。
ブックマークを作成するには、まずブックマークを作成してから、それにリンクを追加する必要があります。
リンクをクリックすると、ページはブックマークのある場所までスクロールします。
例
まず、 id 属性を付けて要素にブックマークを作成します。:
<h2 id=”C4″>Chapter 4</h2>
次に、同じページ内からブックマークへのリンク (“Jump to Chapter 4”)を追加します。:
<a href=”#C4″>Jump to Chapter 4</a>
または、別のページからブックマークへのリンク (“Jump to Chapter 4”)を追加します。:
例文
<a href=”html_demo.html#C4″>Jump to Chapter 4</a>
外部パス
外部ページは、フルURLまたは現在のwebページからの相対パスで参照できます。
この例ではwebページのリンクに完全なURLを使用しています。:
例文
<a href=”https://www.berry.com/html/default.asp”>HTML tutorial</a>
この例では、現在のページと同じフォルダにあるページにリンクしています。:
例文
<a href=”/html/default.asp”>HTML tutorial</a>
This example links to a page located in the same folder as the current page:
例文
<a href=”default.asp”>HTML tutorial</a>
HTMLファイルパスの章でファイルパスについてもっと読むことができます。
まとめ
<a>要素を使ってリンクを定義するhref要素を使ってリンクアドレスを定義するtarget要素を使ってシンク文章を開く場所を定義する<img>要素は ( <a>の内側で) 画像をリンクとして使用するid属性で (id=”value“) ページ内のブックマークを定義するhrefを使用して (href=”#value“) リンクのブックマークを指定する
HTML リンクタグ
| Tag | 説明 |
|---|---|
| <a> | Defines a hyperlink |
さらにタグについてもっと知るには HTML Tag 辞典を参照して下さい