VIDEO LESSON

HTMLのaタグとは？属性・使い方・ブラウザー互換性と活用例の解説動画

再生時間 7:50動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00エイチティーエムエルリファレンス解説です。
0:04エイチティーエムエルタグ編の百十三本目、そして最終回は、エータグです。
0:09エーはアンカーと呼ばれ、ウェブページ同士をつなぐハイパーリンクを作る、最も基本的な要素です。
0:16エイチレフ属性に移動先のユーアールエルを指定すると、クリックやタップ、キーボード操作でその場所へ移動できます。
0:25今回は、エイチレフの基本から、ターゲットとレル、ページ内リンク、メールと電話のリンク、
0:31ダウンロード属性、互換性、よくある間違いまで順番に確認します。
0:37リンクはウェブの土台です。
0:39この仕組みを正しく理解することが、使いやすいサイト作りの第一歩になります。
0:45エーを使う場面を考えます。
0:47別のページへ進む、資料を開く、同じページの離れた見出しへ移動する。
0:52こうした、行き先がある移動にはエーが適しています。
0:55一方で、メニューを開く、送信する、削除するなど、その場で動作を実行するだけの操作には、
1:00ボタン要素を選んでください。
1:04記事もこの区別を強調しています。
1:06判断の目安は、押したあとに場所が変わるかどうかです。
1:10移動先があるならエー、処理を実行するならボタン、と分けて考えると、読み手にも支援技術にも意図が正しく伝わります。
1:19ナビゲーションや目次、本文中の参照など、エーが登場する場所はページのいたるところにあります。
1:26中心になるのがエイチレフ属性です。
1:28ここに移動先のユーアールエルを書きます。
1:31エイチティーティーピーエスから始まる完全なアドレスを書く方法と、今のページからの位置関係で書く相対ユーアールエルがあります。
1:40相対ユーアールエルは、文書の場所やベース要素の影響を受ける点に注意してください。
1:45エイチレフがないエーは、通常のリンクとして扱われません。
1:49また、リンクの文字は、こちら、だけにせず、移動先が具体的に分かる言葉にすることが大切です。
1:56読み手はクリックする前に行き先を判断できる必要があります。
2:00アドレスのタイプミスは、リンク切れの最も多い原因です。
2:04公開前に必ず自分でクリックして確かめてください。
2:07ターゲット属性は、リンク先をどこに表示するかを決めます。
2:11何も指定しなければ今のタブで開き、アンダースコアブランクを指定すると新しいタブやウィンドウで開きます。
2:20外部サイトを別タブで開く場合は、レル属性にノーオープナーを合わせて書くのが基本です。
2:26これにより、開いた先のページから元のページを操作されるリスクを避けられます。
2:32必要に応じてノーリファラーも検討します。
2:36別タブは便利な反面、読み手を驚かせることもあるため、本当に必要な場面に絞り、
2:42リンク文字で外部サイトであることや別タブであることが伝わるようにしてください。
2:48エーは、同じページの中の移動にも使えます。
2:51これがページ内リンクです。
2:53まず移動先の見出しなどにアイディーを付け、リンク側のエイチレフには、シャープとそのアイディーを続けて書きます。
3:01クリックすると、その要素の位置までスクロールします。
3:05長い記事の目次や、ページの先頭へ戻る導線でよく使われます。
3:10注意点は、アイディーは文書の中で一意であること、そしてシャープだけを書くとページ先頭へ戻る動きになることです。
3:18固定ヘッダーで見出しが隠れる場合は、シーエスエスのスクロールマージンなどで余白を調整します。
3:25目次リンクが正しく動くと、読み手は長いページでも迷わず目的の情報へたどり着けるようになります。
3:32エイチレフには、ウェブページ以外の行き先も書けます。
3:37代表例が、メイルトゥーとテルです。
3:39メイルトゥーのあとにメールアドレスを書くと、利用者のメールアプリが宛先入りで開きます。
3:47件名などの指定も可能ですが、長く複雑にしすぎないことが大切です。
3:52テルのあとに電話番号を書くと、スマートフォンでは発信確認につながります。
3:58パソコンでは電話アプリがない環境も多く、動作は環境で異なります。
4:03連絡先をリンクにする場合は、アドレスや番号そのものを文字として表示しておくと、
4:08リンクが使えない環境でも内容が伝わります。
4:13電話番号は、国番号を含む形式で書くと、海外からの利用でも正しく発信しやすくなります。
4:20記事の活用事例をもとに、コードを読みます。
4:24一つ目は、サイト内のページへのリンクです。
4:27エイチレフに相対ユーアールエルを書き、リンク文字は、エイチティーエムエル・シーエスエスの学習順を見る、
4:32と行き先が具体的に分かる言葉にしています。
4:38二つ目は、外部サイトを別タブで開く例です。
4:41ターゲットにアンダースコアブランク、レルにノーオープナーを指定しています。
4:47例の中のイグザンプルドットコムは説明用のドメインなので、実際に使うときは実在する移動先に置き換えてください。
4:55保存して再読み込みし、クリックで正しく移動するか確認しましょう。
5:00ダウンロード属性にも触れておきます。
5:03エーにダウンロードと書くと、リンク先をページとして開くのではなく、ファイルとして保存するようブラウザーに提案できます。
5:12値にファイル名を書くこともできます。
5:15ただし、これは必ず保存される保証ではありません。
5:19同一オリジンなどの制約があり、サーバーの応答によっても動きが変わります。
5:24そのほか、エイチレフラングはリンク先の言語を示すヒント、リファラーポリシーは参照元情報の送り方の方針です。
5:33属性は便利な補助ですが、要素の対応とは別に、属性ごとの対応状況を確認する習慣を持ってください。
5:40迷った場合は、まず基本のエイチレフだけでリンクを作り、必要な属性だけを少しずつ足していくのが安全です。
5:48もう一つの例として、ページ内リンクとダウンロードを組み合わせて見ます。
5:52最初のリンクは、シャープチェックと指定し、同じページにあるアイディーがチェックの見出しへ移動します。
5:59目次から各章へ飛ばすときに使う形です。
6:02次のリンクは、ガイドピーディーエフというファイルにダウンロード属性を付け、
6:06資料ピーディーエフを保存する、という文字にしています。
6:10どちらの例でも、リンク文字だけで行き先や動作が想像できることがポイントです。
6:15作ったあとは、キーボードのタブキーでリンクへ移動し、エンターキーで実行できるかも合わせて確認してください。
6:22ブラウザー互換性を確認します。
6:24記事が紹介するエムディーエヌのデータでは、エー要素本体は、クロームが一以降、
6:30エッジが十二以降、ファイアフォックスが一以降、サファリが一以降から対応しています。
6:36ウェブの初期からある基本要素なので、現在の主要ブラウザーで対応を心配する必要はほとんどありません。
6:44ただし属性ごとに見ると差があります。
6:46ダウンロードはクローム十四以降、サファリは十点一以降、リファラーポリシーはクローム五十一以降、
6:52サファリ十四以降と、比較的新しい対応です。
6:57新しい属性を使うときは、対象ブラウザーで個別に確認してください。
7:02スマートフォンのブラウザーでも基本動作は共通です。
7:06公開前には実機でもタップの反応を確認しておきましょう。
7:10まとめとして、よくある間違いを三つ挙げます。
7:13一つ目は、リンク文字が、こちら、だけで、行き先が伝わらないことです。
7:18二つ目は、ターゲットのアンダースコアブランクを使いながら、レルのノーオープナーを書き忘れることです。
7:25三つ目は、その場で処理を実行するだけの操作にまでエーを使ってしまうことです。
7:31操作にはボタンが適しています。
7:33エーは、エイチレフで行き先を示し、ページとページ、人と情報をつなぐ要素です。
7:38これでエイチティーエムエルタグ編百十三本、そしてエイチティーエムエル・シーエスエス編全二百四十八本の解説が完了です。
7:46お疲れさまでした。
7:48これで解説を終わります。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

aタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。href を指定して移動先へリンク。操作を実行するだけなら button を選びます。

解説記事・サンプルコードを読む：HTMLのaタグとは？属性・使い方・ブラウザー互換性と活用例 →