他のウェブページやファイル・同じページ内の指定箇所・メールアドレス・電話番号などへのハイパーリンクを作成します。
目次
属性
全ての HTML に共通して使用できるグローバル属性はこちら
<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>
target
リンク先のファイルを開く場所・コンテキスト（ブラウザのタブ・ウィンドウなど）を指定します。
| 属性値 | |
|---|---|
| _self（既定値） | 表示中のページと同じウィンドウにリンク先のページを表示します。 |
| _blank | 新しいタブ・ウィンドウでリンクを開きます。 |
| _parent | 現在閲覧中のタブ・ウィンドウの親コンテキストにリンク先のページを読み込みます。親がない場合は _self と同じ動きをします。 |
| _top | トップレベル（親を持たない）の閲覧コンテキストにリンク先のページを読み込みます。親がない場合は _self と同じ動きをします。 |
新しいタブでリンクを表示するサンプル
<a href="http://google.com" target="_blank">Googleを表示</a>
type
リンク先の MIME タイプを指定します。補足メッセージのようなもので、組み込まれている機能はありません。
MIME タイプについてはこちら
<a href="sample.png" type="image/png" download>PNG画像を保存</a>
廃止された属性
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>
対応ブラウザ
独学でプログラミングを勉強するのは難しそう、効率的にプログラミングを学びたいという方はオンラインスクールがオススメです。
オンラインスクールを選ぶときのポイント
- 無料体験があること
- 個別サポートがあること
自分にあったスタイルを見つけるために、無料体験のご利用をオススメします。（無料体験後に自分には合わないなと感じたらハッキリ断ってしまって問題ありません。）
個別サポートもプログラミング学習に挫折しないために重要なポイントです。エラーや困った時にすぐに個別対応をしてくれるスクールを利用して下さい。
ここでは3つのオンラインスクールを紹介します。
全て無料体験がありますので、ぜひ自分に合ったスクールを見つけてみて下さい🙂
1. TechAcademy（テックアカデミー）
オンライン完結で勉強できるスクールで、コースがとても充実しています。チャットで質問すればすぐに回答を得られるのが一番のおすすめポイントです。
オリジナルのサービスやアプリの開発もサポートしてくれるので、開発したいものが決まっている人にもオススメです。
2. CodeCamp（コードキャンプ）
一対一で受講できる個別指導のプログラミングスクールです。
Webデザイン・Webサービス開発・アプリ開発などを幅広く学習することができます。
マンツーマンなので自分のペースで学習できて、質問もその都度できるのがメリットです。
3. Treehouse
英語でも良い、英語とプログラミングを同時に勉強したいという方は Treehouse がオススメです。月25ドルで始めることができて、たくさんのプログラミング言語を学ぶことができます。
個別サポートはありませんが、掲示板が充実しています。ほとんどの場合、質問してから30分程度で回答を得ることができます。
