• HOME > 
  • HTML > 
  • HTMLのアンカー要素(aタグ)の使い方【href属性やペー...

HTMLのアンカー要素(aタグ)の使い方【href属性やページ内リンクの設定方法】

投稿日:

アンカー要素(aタグ)とは?

アンカー要素(aタグ)は、ユーザーがクリックしたら任意のページや場所に遷移させる、ハイパーリンクを作成します。

aタグの「a」は「船の錨(いかり)」を意味する「anchor」の頭文字です。

anchorのイメージ

テキストによるリンクをはじめ、ページメニューなどWebサイトにおいて欠かすことのできない役割を担います。

アンカー要素は、リンクできることがわかりやすいようにアンダーラインの付いた色付きのテキストとして表示されます。CSSを使ってボタンの形状などにに表示をカスタマイズすることも可能です。またアイコンなどの画像にリンクを貼ることもできます。

ハイパーリンクの例

アンカー要素の使い方【href属性の記述】

アンカー要素は開始タグと終了タグからなる要素です。アンカー要素の遷移先の指定は「href属性」に記述して行います。

自分のサイトのないの別ページや外部サイト(もしくはその特定のページ)のURLをhrefに記述します。

href属性の書き方

HTML

<a href="https://web.skipjack.tokyo/html/html_a">このページのURLを指定しています。</a>

画像にハイパーリンクを設定する

aタグは子要素を持つことができるので、テキストだけでなくimgタグなどを記述して、画像をクリックしたら遷移させることもできます。

HTML

<a href="hhttps://web.skipjack.tokyo/html/html_a"><img src="sample.jpg" alt="この画像をクリック"></a>

プレビュー

この画像をクリック

ページ内リンクを設定する

ハイパーリンクは同じページの中の特定の位置まで遷移させることもできます。一般的に「ページ内リンク」と呼ばれます。

ページ内リンクのためには、事前に遷移先にしたい要素に対してid属性を使って識別名を設定しておく必要があります。

id属性の書き方

id属性に設定する識別名は何でも構いませんが、同じ識別名が重複して存在していると正しく遷移できませんのでご注意ください。

続いて、アンカー要素のhref属性に「#(ハッシュ)+識別名」という形で遷移先を指定すれば完了です。

ページ内リンクの書き方

遷移先のHTML

<div id="sampleA">遷移させたい場所A</a>

遷移元のHTML

<a href="#sampleA">Aの位置まで移動します</a>

別ページの特定の位置まで遷移させる

遷移先の指定に識別名を利用すれば別ページの中の特定の位置へ遷移させるということも可能です。

ページ内での遷移先を特定させるためにid属性を使って識別名を設定しておくことは同様です。

別ページの場合は、href属性に「遷移先ページのURL」の末尾に「#(ハッシュ)+識別名」という形で記述して指定します。

別ページ内リンクの書き方

例えばexample.comというサイトのトップページ内を指定する場合は「https://example.com#sampleA」、example.comのpageBというページ内を指定する場合は「https://example.com/pageB#sampleA」という書き方になります。

遷移先のHTML

<div id="sampleA">Bページの遷移させたい場所A</a>

遷移元のHTML

<a href="https://sample.com/pageB#sample1">Bページ内のAの位置を開きます</a>

リンクを別タブで開くには?

これまでの遷移方法は同じタブを使っての遷移でしたが、アンカー要素のtarget属性を使えば別タブを開いて遷移させることができます。

リンクを別タブで開くメリットには次のようなものがあります。

ユーザーが遷移元のページに戻りやすい

同じタブを使って遷移されてしまうと、遷移元のページに戻るためにはブラウザの戻るボタンなどを使って遡ってもらわなくてはなりません。

一方で別タブで開くようにしておけば、戻りたい時に簡単に遷移元のページを開くことができます。

(※何でも別タブで開くようにしてしまうとユーザーにわずらわしさを感じさせてしまいますのでご注意ください)

外部サイトを開いたことが伝わりやすい

同じタブを使って外部サイトに遷移させてしまうと、ユーザーによっては同じサイトの別ページだと勘違いしてしまう恐れがあります。

別タブを開くことによってユーザーがサイト自体を移動したと認識しやすくさせる効果があります。

target属性の使い方

リンクを別タブで開くようにするには、target属性に「_blank」を指定します。

target属性の書き方

HTML

<a href="https://web.skipjack.tokyo" target="_blank">別タブで開きます。</a>

まとめ

以上がHTMLのアンカー要素(aタグ)の使い方です。

Webサイト制作を行う上で必須となる要素ですのでしっかりと理解しておきましょう。

関連する記事

サムネイル

HTMLのpタグ(段落)の使い方【改行タグbrとの違い】

2023年03月15日
pタグの「p」は段落・節を意味するParagraphの頭文字で、ひとかたまりの文章であることを指定するためのタグです。開始タグと終了タグからなる要素で、pタグを使用して段落を分けると前後の要素と改行されます。
サムネイル

Google Chromeのデベロッパーツールの使い方【画像……

2022年01月15日
最終更新日:2022年02月12日
デベロッパーツールとはWEBブラウザであるGoogle Chromeにはじめから備わっている機能の一つです。閲覧中のWEBサイトのページを構成しているHTMLやCSSといったソースコードを確認することができます
サムネイル

HTMLとCSSだけでアコーディオンメニューを作る方法【初心……

2020年12月18日
最終更新日:2022年07月05日
アコーディオンメニューとは、メニューの項目名をクリックすると非表示にされていたコンテンツが項目名の下に広がって表示される機能のことです。HTMLとCSSだけで簡単に実装することが可能です。
サムネイル

HTMLでスクロールバーを表示させる方法

2020年12月17日
最終更新日:2022年01月28日
HTMLで表示させるスクロールバーとは? HTMLとCSSを用いることでサイト内のコンテンツを一部だけ見えるようにし隠れた部分をスクロールして見るようにすること […]
サムネイル

HTMLにGoogle MAP(グーグルマップ)の埋め込みを……

2020年12月16日
最終更新日:2022年01月28日
Google MAPとは? 埋め込みとは? 自身のサイトのページの中に特定の場所を示したGoogle MAPを表示させることが出来ます。 簡単かつ無料なうえ、ペ […]
サムネイル

HTMLのtable(テーブル)タグの使い方

2020年12月15日
最終更新日:2022年01月27日
<table>タグとは? WEBサイトに表を表示させたい場合にHTMLの<table>(テーブル)タグを使用します。 単に表の作成に利用 […]
サムネイル

HTMLのformタグで入力フォームを作る方法

2020年12月14日
最終更新日:2022年01月28日
<form>タグとは? 「フォームで入力した内容を送信する」機能をもつHTMLタグです。 問い合わせフォームは、別に集計してメールを送る処理を記述し […]