<a>要素の使い方・サンプルコード
Sara
目次
<a>
<a>要素は
- 他のウェブページやファイル
- 同じページ内の指定箇所
- メールアドレス
- 電話番号
へのハイパーリンクを作成します。
デモ：a要素
属性
download
href 属性で指定したファイルをダウンロードするようにウェブブラウザに示します。
download 属性に指定した値がダウンロード時のファイル名になります。
ファイル名を指定しない場合（sample.png で保存されます。）
<a href="sample.png" download>画像を保存</a>ファイル名を指定した場合（image という名前で保存されます。）
<a href="sample.png" download="image">画像を保存</a>href
href 属性には
- 他のページへのリンク
- ダウンロードさせたいファイルのリンク
- id 属性の値
- メールアドレス
- 電話番号
を指定することができます。
① 他ページへのリンク
表示させたいリンクを指定することができます。
<a href="http://google.com">Googleへ移動</a>② ダウンロードリンク
ダウンロードできるファイルを指定することができます。
<a href="sample.png" download>画像を保存</a>③ id 属性の値
同じページ内にある id 属性の場所に移動することができます。
<a href="#message">「id="message"」の箇所へ移動</a>④ メールアドレス
mailto:メールアドレスを指定すると、メールソフトが起動してメールを作成できます。
<a href="mailto:test@mail.com">メール送信</a>⑤ 電話番号
携帯電話の場合は、tel:電話番号を指定するとそのまま発信することができます。
<a href="tel:0312345678">電話をかける</a>hreflang
リンク先のファイルの言語を指定します。補足メッセージのようなもので、組み込まれている機能はありません。
<a href="#" hreflang="ja">リンク</a>ping
ブラウザによって送信される URL のリストです。通常トラッキングに使用されます。
rel
リンク先の内容の役割をリンク種別の値で指定します。
<a href="#" rel="noreferrer">リンク</a>参考：HTML リンク種別まとめ – HTML リファレンス
target
リンク先のファイルを開く場所・コンテキスト（ブラウザのタブ・ウィンドウなど）を指定します。
| 値 | |
|---|---|
| _self（既定値） | 表示中のページと同じウィンドウにリンク先のページを表示します。 |
| _blank | 新しいタブ・ウィンドウでリンクを開きます。 |
| _parent | 現在閲覧中のタブ・ウィンドウの親コンテキストにリンク先のページを読み込みます。親がない場合は _self と同じ動きをします。 |
| _top | トップレベル（親を持たない）の閲覧コンテキストにリンク先のページを読み込みます。親がない場合は _self と同じ動きをします。 |
新しいタブでリンクを表示するサンプル
<a href="http://google.com" target="_blank">Googleを表示</a>type
リンク先の MIME タイプを指定します。補足メッセージのようなもので、組み込まれている機能はありません。
<a href="sample.png" type="image/png" download>PNG画像を保存</a>グローバル属性
全ての HTML 要素に共通して使用できるグローバル属性はこちら
廃止された属性
charset, coords, name, rev, shape 属性は廃止されました。
使用例
例① リンクを新しいタブで開く
<a href="http://google.com" target="_blank">Googleを表示</a>例② ファイルのダウンロードリンク
<a href="sample.png" download>画像を保存</a>例③ メールソフトの起動
<a href="mailto:test@mail.com">メール送信</a>例④ 電話をかける
<a href="tel:0312345678">電話をかける</a>対応ブラウザ
関連するタグ
Subscribe
0 Comments
ABOUT ME
書籍やオンライン講座でプログラミングを勉強してフリーランスのプログラマーになりました。
このサイトでは「わかりやすく・シンプル」をモットーに、プログラミングの基礎からアプリ開発まで紹介します。
独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています。
主な使用言語：Java / Kotlin / PHP
>> 詳しいプロフィールはこちら
>> 書籍を出版しました！
>> お問い合わせはこちら
このサイトでは「わかりやすく・シンプル」をモットーに、プログラミングの基礎からアプリ開発まで紹介します。
独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています。
主な使用言語：Java / Kotlin / PHP
>> 詳しいプロフィールはこちら
>> 書籍を出版しました！
>> お問い合わせはこちら
