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

a タグエレメント

 a タグエレメントは、ハイパーリンク(リンク)を作成する HTML タグエレメントです。リンクを辿ることで他のページやページ内の任意の箇所に移動できます。

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

他のページにリンク

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

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

 JavaScript で遷移を無効にすることや遷移先を替えることもできます。無効にするには、"javascript:void(0)" です。 詳しくはその他 JavaScriptを参照してください。

- ad -

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

ページ内リンク

 #をつけるとページ内リンクです。
 以下のようなリンクに加えて、#の移動先のエレメントに id 属性を設定しておきます。
 移動先の id には#は付けません。

ページ内リンク
<a href="#EXAMPLE">ページ内のリンク</a>

<section id="EXAMPLE">ページ内のリンク</section>

 ページ内リンクと他のページへのリンクは組み合わせることができます。組み合わせるとそのページの#で指定した位置に移動します。

ページ内リンク
<a href="example_page.html#EXAMPLE">他のページの指定位置へのリンク</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... フレームがあれば全て解除して表示

動作の確認

 以下に入力するテキストに上記の属性の値から<a> エレメントを作成します。


その他

CSS、styleについて

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

JavaScript

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

遷移を無効に

 JavaScript で遷移を無効にすることができます。

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

JavaScript コード中から遷移

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

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

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

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

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

- ad -