アンカータグ

<a>はアンカー要素と呼ばれる。href属性を使って、別のwebページ、ファイル、メールアドレス、同じページ内の場所、または他のURLへのハイパーリンクを作成する

href属性

hypertext referenceの略。ハイバーリンクのリンク先を指定する属性。

<a href="http://roy.e.koeki-u.ac.jp/">東北公益文科大学 学生専用サーバ</a>

• 要素
• 属性
• リンク先のファイルパス
• テキストや画像

例

• テキストをクリックするとリンク先に飛ぶ
このテキストを押すとCSSを教える用のページに飛びます。
(htmlコード)

<a href="https://www.yatex.org/gitbucket/C1220118/Program-Storage/pages/css-teaching/css.html">

• 画像をクリックするとリンク先に飛ぶ

htmlコード

<a href="https://one-piece.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT5_y_GQUjG04b62izbowYZU8UWbZrc3Rmbai1L2FuT1YcdHSWtRF9ili2UaMANjFaQYFYeFRN1rePW8Hos7tI20vKaVZGgmf4QgtyckfQ5z84qFJt-WsgDOYXKIdrsxPyw_GddpsFXISL/s600/onepiece20_santaisyou.png" alt="One Piece"></a>

※alt属性：Webブラウザで画像が表示できないときに、画像の代わりに表示されるテキストを指定するために使われるもの。画像を使用するときは、alt=""を使おう！

• 指定メールアドレス(ここでは私の公益メールを指定）が入力されたメールソフトを開く(mailtoを使用)
お問い合わせはこちらをクリック
(htmlコード)

<a href="mailto:c122011@f.koeki-u.ac.jp">お問い合わせはこちらをクリック</a>

• クリックすると電話がかかる(telを使用)
メリーさんの電話番号(らしい)
(htmlコード)

<a href="tel:09024109679">メリーさんの電話番号らしい</a>

target属性

リンク先を表示する場所を指定する属性。

<a href= "http://roy.e.koeki-u.ac.jp/" target="_blank"></a>

• 要素
• 属性
• リンク先のファイルパス
• 属性値

例

• target="_blank"を使用
GitBucketを別タブに開くよ
(htmlコード)

<a href="https://www.yatex.org/gitbucket/" target="_blank">GitBucketを別タブに開くよ</a>

• target="_blank"を使用
初期値のため、target="_self"が無くても同じ動作をするよ
(htmlコード)

<a href="https://www.yatex.org/gitbucket/" target="_self">初期値のため、target="_self"が無くても同じ動作をするよ</a>

• target="_parent"を使用
親ページがある場合、親のウインドウ・タブに表示されるよ
(htmlコード)

<a href="https://www.yatex.org/gitbucket/" target="_parent">親ページがある場合、親のウインドウ・タブに表示されるよ</a>

• taraget="_top"を使用
親ページがある場合、最も上位の親ウインドウ・タブに表示されるよ
(htmlコード)

<a href="https://www.yatex.org/gitbucket/" target="_top">親ページがある場合、最も上位の親ウインドウ・タブに表示されるよ</a>

download属性

ユーザーがクリックしたときに、href属性で指定したファイルをダウンロードするように指定する属性

<a href="html.html" download="html.html">

• 要素
• 属性
• ダウンロードするファイルパス
• ファイル名

例