備忘録的プログラミングリファレンス

a タグエレメント

 a タグエレメントは、ハイパーリンク(リンク)を作成する HTML タグエレメントです。
 ハイパーリンクとは別のページやサイトへ誘う(いざなう)ものでリンクとも呼ばれます。リンクを辿ることで他のページやサイト、ページ内の任意の箇所に移動できます。

リンク
<a href="example_page.html">他のページにリンク</a>
表示例

他のページにリンク

詳しくは 動作の確認 を参照してください

 a タグエレメントはアンカー( anchor )の略称で、アンカーリンク、ハイパーリンク、リンク、リンクタグなどと呼ばれています。

 リンク先にメールアドレスを設定するとメール送信を、ファイルを設定するとダウンロードを行います。

 CSS の color や text-decoration プロパティでリンクの色や下線を変更することができます。
 JavaScript で遷移を無効にすることや遷移先を替えることもできます。無効にするには href="javascript:void(0);" と属性を指定します。 ただし、バブル機能はそのまま機能します。
 a タグエレメントと JavaScript や CSS についてはその他を参照してください。

a タグエレメントについて

絶対指定と相対指定

 URLには、絶対指定と相対指定が使えます。

 絶対指定は、https://example.net/といったドメイン名から指定するような指定方法です。
 他のサイトへの指定に使用されます。自サイト内では <base> に使用される場合があるでしょう。自サイト内では多くの場合、相対指定のリンクを使用します。

URLの絶対指定
<a href="https://www.smpl-rfrns.net/HTML/a.html">URLの絶対指定</a>

 相対指定は、リンクのあるページからの位置になります。
 そのファイルと同じディレクトリ内のファイルやディレクトリを指定するには./、ひとつ上のディレクトリは../といった指定です。

URLの相対指定
<a href="example.html">URLの相対指定</a>

 例えば上記の例は、このページと同じディレクトリ内の example.html へのリンクです。こちらの指定方法がよく使われると思います。

属性

グローバル属性も持ちます。以下に主な属性のみを示します。

AttributeValueExtra information
idcssにも使えます。エレメントをユニークとします。
classcssに使います。同名のclassは同じスタイルが適応されます。
href移動先のURLです。
target

target 属性について

 target 属性は、Window や iframe をその name 属性値で指定することができます。
 他にも以下の指定ができます。

  • _blank... 別タブまたはウィンドウに表示
  • _self... リンク元に表示
  • _parent... ひとつ上の親フレームに表示
  • _top... フレームがあれば全て解除して表示

 target を _blank に設定する場合は、rel 属性を noopener に指定します。

別タブでウィンドウを開く
target="_blank" rel="noopener"

動作の確認

 a タグエレメントは、ハイパーリンク(リンク)を作成する HTML タグエレメントです。

 以下に入力するテキストに上記の属性の値から<a> エレメントを作成します。
 確認をクリックするとどのように表示されるかを実行します。


その他

CSS、styleについて

 <a> エレメント、リンクテキスト特有の下線の消し方や色、カーソルがのったとき、訪問済みリンクの装飾をCSS、styleで変更することができます。

 例えば a タグエレメントの文字色を黒、下線を非表示に、ポインターが来たら指定の色で下線を表示するには以下のようにします。

a タグエレメントの装飾を変更
a {
	color: black;
	text-decoration: none;
}

a:hover {
	color: #0000ee;
	text-decoration: underline;
}

 詳しくは、リンク <a> とスタイルを参照してください。

JavaScript

 JavaScript で <a> エレメンを利用する場合は、 HTMLAnchorElement インターフェイスも参照するとよいでしょう。

遷移を無効に

 以下のようにhref="javascript:void(0);"で遷移を無効にすることができます。

遷移を無効に
<a href="javascript:void(0);">このリンクは遷移が無効になります。<a>

 ただし、バブリングは機能します。onclick="event.stopPropagation();" や onclick="event.stopImmediatePropagation();" を使用する必要があるかもしれません。
 バブリングについてはバブリング・キャプチャリングについてを参照してください。

JavaScript コード中から遷移

 JavaScript によるURLの遷移は、Window オブジェクトのプロパティまたはメソッドを利用します。

 .location プロパティによる移動は href に値を指定することでその URL に遷移します。

コード中から遷移
window.location.href = 'URL';

 open() メソッドで開くウィンドウを指定して URL に遷移をすることもできます。

開くウィンドウを指定して遷移
window.open('URL', '_blank');