HTMLリンク
リンクはほぼすべてのWebページにあります。リンクを使用すると、ユーザーはページからページへとクリックで移動することができます。
HTMLリンク - ハイパーリンク
HTMLリンクはハイパーリンクです。
リンクをクリックすると、別のドキュメントにジャンプできます。
マウスをリンクの上に移動すると、マウスの矢印が小さな手の形に変わります。
注：リンクはテキストである必要はありません。リンクは、画像またはその他のHTML要素にすることができます。
HTMLリンク - 構文
HTML<a>タグはハイパーリンクを定義します。次の構文があります。
<a>要素の最も重要な属性は、リンク先を示すhref属性です。
リンクテキストは読者に表示される部分です。
リンクテキストをクリックすると、指定したURLアドレスにリーダーが送信されます。
デフォルトでは、リンクはすべてのブラウザで次のように表示されます。
・未訪問のリンクは下線付きで青く表示されます
・訪問したリンクは下線付きで紫色で表示されます
・アクティブなリンクは下線付きで赤く表示されます
ヒント：リンクはCSSでスタイルを設定して、別の外観にすることもできます。
HTMLリンク - target属性
デフォルトでは、リンクされたページは現在のブラウザウィンドウに表示されます。これを変更するには、リンクに別のターゲットを指定する必要があります。
target属性は、リンクされたドキュメントを開く場所を指定します。
target属性には、次のいずれかの値を指定できます。
・_self- デフォルト。クリックしたときと同じウィンドウ/タブでドキュメントを開きます
・_blank- ドキュメントを新しいウィンドウまたはタブで開きます
・_parent- ドキュメントを親フレームで開きます
・_top- ドキュメントをウィンドウ全体で開きます
例
target="_blank"を使用して、リンクされたドキュメントを新しいブラウザーウィンドウまたはタブで開きます。
絶対URLと相対URL
上記の両方の例では、href属性で絶対URL(完全なWebアドレス)を使用しています。
ローカルリンク(同じWebサイト内のページへのリンク)は、相対URL(「https://www」の部分を除く)で指定されます。
例
HTMLリンク - 画像をリンクとして使用
画像をリンクとして使用するには、<img>タグ内に<a>タグを挿入するだけです。
メールアドレスへのリンク
href属性内でmailto:を使用して、ユーザーの電子メールプログラムを開くリンクを作成します(ユーザーが新しい電子メールを送信できるようにするため)。
リンクとしてのボタン
HTMLボタンをリンクとして使用するには、JavaScriptコードを追加する必要があります。
JavaScriptを使用すると、ボタンのクリックなど、特定のイベントで何が起こるかを指定できます。
ヒント：JavaScriptチュートリアルでJavaScriptの詳細をご覧ください。
リンクタイトル
title属性は、要素に関する追加情報を指定します。この情報は、ほとんどの場合、マウスが要素の上に移動したときにツールヒントテキストとして表示されます。
例
絶対URLと相対URLの詳細
ファイルパスの詳細については、HTMLファイルパスの章を参照してください。
章のまとめ
・<a>要素を使用してリンクを定義する
・href属性を使用してリンクアドレスを定義する
・target属性を使用して、リンクされたドキュメントを開く場所を定義します
・<img>要素 (<a>内) を使用して、画像をリンクとして使用します
・href属性内でmailto:スキームを使用して、ユーザーの電子メール プログラムを開くリンクを作成します
HTMLリンクタグ
| タグ | 説明 |
|---|---|
| <a> | ハイパーリンクを定義します |
利用可能なHTMLタグの完全なリストについては、HTMLタグリファレンスを参照してください。
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。