WEBVTT

1
00:00:00.000 --> 00:00:00.943
こんにちは。

2
00:00:00.943 --> 00:00:04.245
エイチティーエムエルリファレンス解説です。

3
00:00:04.245 --> 00:00:09.748
エイチティーエムエルタグ編の百十三本目、そして最終回は、エータグです。

4
00:00:09.748 --> 00:00:16.980
エーはアンカーと呼ばれ、ウェブページ同士をつなぐハイパーリンクを作る、最も基本的な要素です。

5
00:00:16.980 --> 00:00:25.628
エイチレフ属性に移動先のユーアールエルを指定すると、クリックやタップ、キーボード操作でその場所へ移動できます。

6
00:00:25.628 --> 00:00:31.445
今回は、エイチレフの基本から、ターゲットとレル、ページ内リンク、メールと電話のリンク、

7
00:00:31.445 --> 00:00:37.263
ダウンロード属性、互換性、よくある間違いまで順番に確認します。

8
00:00:37.263 --> 00:00:39.307
リンクはウェブの土台です。

9
00:00:39.307 --> 00:00:45.124
この仕組みを正しく理解することが、使いやすいサイト作りの第一歩になります。

10
00:00:45.124 --> 00:00:47.088
エーを使う場面を考えます。

11
00:00:47.088 --> 00:00:52.073
別のページへ進む、資料を開く、同じページの離れた見出しへ移動する。

12
00:00:52.073 --> 00:00:55.850
こうした、行き先がある移動にはエーが適しています。

13
00:00:55.850 --> 00:01:00.156
一方で、メニューを開く、送信する、削除するなど、その場で動作を実行するだけの操作には、

14
00:01:00.156 --> 00:01:04.461
ボタン要素を選んでください。

15
00:01:04.461 --> 00:01:06.879
記事もこの区別を強調しています。

16
00:01:06.879 --> 00:01:10.806
判断の目安は、押したあとに場所が変わるかどうかです。

17
00:01:10.806 --> 00:01:19.267
移動先があるならエー、処理を実行するならボタン、と分けて考えると、読み手にも支援技術にも意図が正しく伝わります。

18
00:01:19.267 --> 00:01:26.216
ナビゲーションや目次、本文中の参照など、エーが登場する場所はページのいたるところにあります。

19
00:01:26.216 --> 00:01:28.614
中心になるのがエイチレフ属性です。

20
00:01:28.614 --> 00:01:31.435
ここに移動先のユーアールエルを書きます。

21
00:01:31.435 --> 00:01:40.180
エイチティーティーピーエスから始まる完全なアドレスを書く方法と、今のページからの位置関係で書く相対ユーアールエルがあります。

22
00:01:40.180 --> 00:01:45.823
相対ユーアールエルは、文書の場所やベース要素の影響を受ける点に注意してください。

23
00:01:45.823 --> 00:01:49.772
エイチレフがないエーは、通常のリンクとして扱われません。

24
00:01:49.772 --> 00:01:56.120
また、リンクの文字は、こちら、だけにせず、移動先が具体的に分かる言葉にすることが大切です。

25
00:01:56.120 --> 00:02:00.210
読み手はクリックする前に行き先を判断できる必要があります。

26
00:02:00.210 --> 00:02:04.019
アドレスのタイプミスは、リンク切れの最も多い原因です。

27
00:02:04.019 --> 00:02:07.404
公開前に必ず自分でクリックして確かめてください。

28
00:02:07.404 --> 00:02:11.896
ターゲット属性は、リンク先をどこに表示するかを決めます。

29
00:02:11.896 --> 00:02:20.077
何も指定しなければ今のタブで開き、アンダースコアブランクを指定すると新しいタブやウィンドウで開きます。

30
00:02:20.077 --> 00:02:26.815
外部サイトを別タブで開く場合は、レル属性にノーオープナーを合わせて書くのが基本です。

31
00:02:26.815 --> 00:02:32.911
これにより、開いた先のページから元のページを操作されるリスクを避けられます。

32
00:02:32.911 --> 00:02:36.120
必要に応じてノーリファラーも検討します。

33
00:02:36.120 --> 00:02:42.296
別タブは便利な反面、読み手を驚かせることもあるため、本当に必要な場面に絞り、

34
00:02:42.296 --> 00:02:48.472
リンク文字で外部サイトであることや別タブであることが伝わるようにしてください。

35
00:02:48.472 --> 00:02:51.652
エーは、同じページの中の移動にも使えます。

36
00:02:51.652 --> 00:02:53.620
これがページ内リンクです。

37
00:02:53.620 --> 00:03:01.948
まず移動先の見出しなどにアイディーを付け、リンク側のエイチレフには、シャープとそのアイディーを続けて書きます。

38
00:03:01.948 --> 00:03:05.884
クリックすると、その要素の位置までスクロールします。

39
00:03:05.884 --> 00:03:10.275
長い記事の目次や、ページの先頭へ戻る導線でよく使われます。

40
00:03:10.275 --> 00:03:18.603
注意点は、アイディーは文書の中で一意であること、そしてシャープだけを書くとページ先頭へ戻る動きになることです。

41
00:03:18.603 --> 00:03:25.568
固定ヘッダーで見出しが隠れる場合は、シーエスエスのスクロールマージンなどで余白を調整します。

42
00:03:25.568 --> 00:03:32.684
目次リンクが正しく動くと、読み手は長いページでも迷わず目的の情報へたどり着けるようになります。

43
00:03:32.684 --> 00:03:37.022
エイチレフには、ウェブページ以外の行き先も書けます。

44
00:03:37.022 --> 00:03:39.858
代表例が、メイルトゥーとテルです。

45
00:03:39.858 --> 00:03:47.033
メイルトゥーのあとにメールアドレスを書くと、利用者のメールアプリが宛先入りで開きます。

46
00:03:47.033 --> 00:03:52.372
件名などの指定も可能ですが、長く複雑にしすぎないことが大切です。

47
00:03:52.372 --> 00:03:58.378
テルのあとに電話番号を書くと、スマートフォンでは発信確認につながります。

48
00:03:58.378 --> 00:04:03.718
パソコンでは電話アプリがない環境も多く、動作は環境で異なります。

49
00:04:03.718 --> 00:04:08.723
連絡先をリンクにする場合は、アドレスや番号そのものを文字として表示しておくと、

50
00:04:08.723 --> 00:04:13.728
リンクが使えない環境でも内容が伝わります。

51
00:04:13.728 --> 00:04:20.736
電話番号は、国番号を含む形式で書くと、海外からの利用でも正しく発信しやすくなります。

52
00:04:20.736 --> 00:04:24.010
記事の活用事例をもとに、コードを読みます。

53
00:04:24.010 --> 00:04:27.285
一つ目は、サイト内のページへのリンクです。

54
00:04:27.285 --> 00:04:32.898
エイチレフに相対ユーアールエルを書き、リンク文字は、エイチティーエムエル・シーエスエスの学習順を見る、

55
00:04:32.898 --> 00:04:38.511
と行き先が具体的に分かる言葉にしています。

56
00:04:38.511 --> 00:04:41.786
二つ目は、外部サイトを別タブで開く例です。

57
00:04:41.786 --> 00:04:47.555
ターゲットにアンダースコアブランク、レルにノーオープナーを指定しています。

58
00:04:47.555 --> 00:04:55.974
例の中のイグザンプルドットコムは説明用のドメインなので、実際に使うときは実在する移動先に置き換えてください。

59
00:04:55.974 --> 00:05:00.964
保存して再読み込みし、クリックで正しく移動するか確認しましょう。

60
00:05:00.964 --> 00:05:03.754
ダウンロード属性にも触れておきます。

61
00:05:03.754 --> 00:05:12.898
エーにダウンロードと書くと、リンク先をページとして開くのではなく、ファイルとして保存するようブラウザーに提案できます。

62
00:05:12.898 --> 00:05:15.688
値にファイル名を書くこともできます。

63
00:05:15.688 --> 00:05:19.408
ただし、これは必ず保存される保証ではありません。

64
00:05:19.408 --> 00:05:24.988
同一オリジンなどの制約があり、サーバーの応答によっても動きが変わります。

65
00:05:24.988 --> 00:05:33.203
そのほか、エイチレフラングはリンク先の言語を示すヒント、リファラーポリシーは参照元情報の送り方の方針です。

66
00:05:33.203 --> 00:05:40.487
属性は便利な補助ですが、要素の対応とは別に、属性ごとの対応状況を確認する習慣を持ってください。

67
00:05:40.487 --> 00:05:48.392
迷った場合は、まず基本のエイチレフだけでリンクを作り、必要な属性だけを少しずつ足していくのが安全です。

68
00:05:48.392 --> 00:05:52.972
もう一つの例として、ページ内リンクとダウンロードを組み合わせて見ます。

69
00:05:52.972 --> 00:05:59.515
最初のリンクは、シャープチェックと指定し、同じページにあるアイディーがチェックの見出しへ移動します。

70
00:05:59.515 --> 00:06:02.001
目次から各章へ飛ばすときに使う形です。

71
00:06:02.001 --> 00:06:06.189
次のリンクは、ガイドピーディーエフというファイルにダウンロード属性を付け、

72
00:06:06.189 --> 00:06:10.376
資料ピーディーエフを保存する、という文字にしています。

73
00:06:10.376 --> 00:06:15.349
どちらの例でも、リンク文字だけで行き先や動作が想像できることがポイントです。

74
00:06:15.349 --> 00:06:22.284
作ったあとは、キーボードのタブキーでリンクへ移動し、エンターキーで実行できるかも合わせて確認してください。

75
00:06:22.284 --> 00:06:24.586
ブラウザー互換性を確認します。

76
00:06:24.586 --> 00:06:30.647
記事が紹介するエムディーエヌのデータでは、エー要素本体は、クロームが一以降、

77
00:06:30.647 --> 00:06:36.708
エッジが十二以降、ファイアフォックスが一以降、サファリが一以降から対応しています。

78
00:06:36.708 --> 00:06:44.227
ウェブの初期からある基本要素なので、現在の主要ブラウザーで対応を心配する必要はほとんどありません。

79
00:06:44.227 --> 00:06:46.988
ただし属性ごとに見ると差があります。

80
00:06:46.988 --> 00:06:52.206
ダウンロードはクローム十四以降、サファリは十点一以降、リファラーポリシーはクローム五十一以降、

81
00:06:52.206 --> 00:06:57.423
サファリ十四以降と、比較的新しい対応です。

82
00:06:57.423 --> 00:07:02.333
新しい属性を使うときは、対象ブラウザーで個別に確認してください。

83
00:07:02.333 --> 00:07:06.169
スマートフォンのブラウザーでも基本動作は共通です。

84
00:07:06.169 --> 00:07:10.312
公開前には実機でもタップの反応を確認しておきましょう。

85
00:07:10.312 --> 00:07:13.476
まとめとして、よくある間違いを三つ挙げます。

86
00:07:13.476 --> 00:07:18.367
一つ目は、リンク文字が、こちら、だけで、行き先が伝わらないことです。

87
00:07:18.367 --> 00:07:25.559
二つ目は、ターゲットのアンダースコアブランクを使いながら、レルのノーオープナーを書き忘れることです。

88
00:07:25.559 --> 00:07:31.025
三つ目は、その場で処理を実行するだけの操作にまでエーを使ってしまうことです。

89
00:07:31.025 --> 00:07:33.183
操作にはボタンが適しています。

90
00:07:33.183 --> 00:07:38.649
エーは、エイチレフで行き先を示し、ページとページ、人と情報をつなぐ要素です。

91
00:07:38.649 --> 00:07:46.991
これでエイチティーエムエルタグ編百十三本、そしてエイチティーエムエル・シーエスエス編全二百四十八本の解説が完了です。

92
00:07:46.991 --> 00:07:48.286
お疲れさまでした。

93
00:07:48.286 --> 00:07:50.012
これで解説を終わります。