aタグとは?|HTMLでリンクを設定しよう

aタグとは?|HTMLでリンクを設定しよう
博士
リンゴくん、HTMLでリンクを設定する方法はわかるかの?
リンゴ
<a>タグを使うんですよね!
href属性でリンクしたいページのURLを指定して。
博士
そうじゃ。
その他にも<a>タグでは、リンク先の開き方を指定したり、特定の位置に移動するリンクを作成したりということもできるんじゃ。
リンゴ
そうなんですね。
<a>タグについてもっと詳しく知りたいです!
博士
よし。
それでは今回は、<a>タグの基本的な使い方と様々な属性について解説しようかの。
 
 
リンゴ
リンゴ
ブログを書くことが大好きな少年。
世界にたった一つのWordPressテーマを作るため、HTML/CSSについて日々勉強中!
博士
博士
リンゴが師と仰ぐ人物。
毎日HTML/CSSデザインの研究をしており、その知識を余すことなくリンゴに教えてくれる。

スポンサーリンク

<a>タグとは

 

<a>

対応ブラウザ Internet Explorer / Firefox / Google Chrome / Safari / Opera
分類 フロー・コンテンツ / フレージング・コンテンツ / インタラクティブ・コンテンツ / パルパブル・コンテンツ
利用場所 フレージング・コンテンツが期待される場所
内容 トランスペアレント(ただし、インタラクティブ・コンテンツを入れることは不可)


 
 
<a>タグは、ハイパーリンクを指定する際に使うタグです。
Webページ内のテキストや画像などを<a>~</a>で囲んで属性値を指定することで、 ハイパーリンクの出発点や到達点を指定することができます。
 
 
博士
<a>は「anchor(船の錨・つなぎ止めて固定する)」の略なんじゃ。
 
 

href属性

a要素にhref属性を指定すると、リンクを設定できます。
 
 

使用例

 
 

表示例

 
 
リンゴ
a要素の基本となる属性ですね。
 
 

特定の位置へ移動する

<a>タグでは、特定の位置へ移動するリンクを作成できます。
まず、移動先の要素にid属性で名前を付けます。

 
 
この名前を、リンク元(出発点)の<a href=”#〇〇”>〜</a>の値に指定します。

 
 
これで、「ABCの位置へ移動」のリンクをクリックすると、同一ページ内の「abc」という位置へ移動できるようになります。
 
 

表示例

 
 
また、別のページの特定の場所へ移動したい場合は、以下のように記述します。

 
 

メールソフトを起動する

a要素にhref=”mailto:メールアドレス”を指定すると、リンクをクリックした時にメールソフトが立ち上がるようになります。

 
 

表示例

 
 
博士
href属性に指定したメールアドレスが、メールの宛先に入力されるぞ。
リンゴ
これは便利ですね!
 
 

target属性

a要素にtarget属性を指定すると、リンク先をどのように開くかを指定できます。
指定できる値は以下の通りです。
 
 

_blank 新規のウィンドウ(フレーム)に表示
_self 現在のウィンドウ(フレーム)に表示
_parent 現在のウィンドウ(フレーム)に親があれば、その親ウィンドウ(フレーム)に表示
_top フレームを解除してウィンドウ全体に表示
ターゲット名 任意の名前を付けたウィンドウ(フレーム)で表示

 
 

使用例

 
 

表示例

 
 

スポンサーリンク

まとめ

<a>タグは、ハイパーリンクを指定する際に使うタグです。
a要素に属性を指定することで、リンク先の開き方や特定の移動先などを指定することができます。
 
 

リンゴ
ページのユーザビリティやSEOを向上させるためにも、とっても重要ですね!
 
 
HTML5 タグ図鑑

HTML5タグ全種類を図鑑としてまとめています。タグの意味や使い方でわからないことがあれば、ぜひこのページをご活用ください。

HTML5 タグ図鑑へ

 
HTML5 タグ図鑑

スポンサーリンク








aタグとは?|HTMLでリンクを設定しよう