WEBVTT

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

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

3
00:00:03.893 --> 00:00:07.925
エイチティーエムエルタグ編の五十五本目は、リンクタグです。

4
00:00:07.925 --> 00:00:13.626
リンクは、今開いている文書と、外部にあるファイルとの関係を宣言するためのタグです。

5
00:00:13.626 --> 00:00:17.936
代表的な役割は、外部シーエスエスを読み込むことと、ブラウザーのタブに表示される小さなアイコン、

6
00:00:17.936 --> 00:00:22.246
ファビコンを指定することです。

7
00:00:22.246 --> 00:00:26.139
リンク自体は画面に文字や図として表示されませんが、ページの見た目と使い心地を裏側で支える、

8
00:00:26.139 --> 00:00:30.032
とても重要な存在です。

9
00:00:30.032 --> 00:00:36.567
今回は、基本の書き方から属性の使い分け、クリックするリンクとの違いまで順に学んでいきましょう。

10
00:00:36.567 --> 00:00:41.572
見えないからこそ、書き忘れると見た目が崩れてしまう点にも注意が必要です。

11
00:00:41.572 --> 00:00:44.054
まず、どんな場面で使うかを整理します。

12
00:00:44.054 --> 00:00:49.019
最も多いのは、デザインをまとめた外部シーエスエスファイルを読み込む場面です。

13
00:00:49.019 --> 00:00:52.612
シーエスエスを別ファイルに分けておけば、複数ページで同じ見た目を共有でき、

14
00:00:52.612 --> 00:00:56.205
一か所直すだけで全体に反映できます。

15
00:00:56.205 --> 00:00:59.210
次に、サイトの目印になるファビコンの指定です。

16
00:00:59.210 --> 00:01:05.351
タブやブックマークで小さなアイコンが表示されると、利用者が自分のサイトを見つけやすくなります。

17
00:01:05.351 --> 00:01:12.276
そのほか、ウェブフォントの読み込みや、次に使うファイルを早めに用意する事前読み込みにもリンクが使われます。

18
00:01:12.276 --> 00:01:14.889
裏方の読み込み役、と覚えておきましょう。

19
00:01:14.889 --> 00:01:23.120
逆に、ページの中に直接シーエスエスを書く方法もありますが、共通化したい場合は外部ファイルとリンクの組み合わせが基本になります。

20
00:01:23.120 --> 00:01:24.712
基本の形を確認します。

21
00:01:24.712 --> 00:01:28.621
画面の例のように、リンクは通常、ヘッドの中に書きます。

22
00:01:28.621 --> 00:01:34.845
ヘッドは文書の設定を置く場所なので、外部ファイルとの関係もここで宣言するのが自然です。

23
00:01:34.845 --> 00:01:42.662
リンクは空要素と呼ばれる種類で、終了タグは書きませんし、開始タグと終了タグの間に文字を挟むこともありません。

24
00:01:42.662 --> 00:01:44.978
短い一行で完結するのが特徴です。

25
00:01:44.978 --> 00:01:51.202
ボディに本文を書く前に、ヘッドで必要なファイルをそろえる、という流れを覚えてください。

26
00:01:51.202 --> 00:01:58.006
この配置を間違えてボディに書くと、ブラウザーが想定外の動きをすることがあるため注意が必要です。

27
00:01:58.006 --> 00:02:05.388
ヘッドに書く順番は、文字コードの指定を先にし、その後にタイトルやリンクを続けるのが読みやすい並びです。

28
00:02:05.388 --> 00:02:08.276
リンクで最も大切な属性が、レルです。

29
00:02:08.276 --> 00:02:13.730
レルは、この文書と読み込むファイルが、どんな関係にあるかを示します。

30
00:02:13.730 --> 00:02:19.346
値がスタイルシートなら、相手は見た目を決めるシーエスエスファイルです。

31
00:02:19.346 --> 00:02:23.196
値がアイコンなら、相手はファビコン用の画像です。

32
00:02:23.196 --> 00:02:28.490
ブラウザーはレルの値を見て、ファイルをどう扱うべきかを判断します。

33
00:02:28.490 --> 00:02:34.907
レルを書き忘れたり、つづりを間違えたりすると、ファイルが正しく読み込まれません。

34
00:02:34.907 --> 00:02:41.164
リンクを書くときは、まずレルで関係をはっきりさせる、という順番で考えましょう。

35
00:02:41.164 --> 00:02:45.496
関係の種類によって、合わせて使う属性も変わってきます。

36
00:02:45.496 --> 00:02:48.975
次に、場所と条件を指定する属性を見ていきます。

37
00:02:48.975 --> 00:02:53.514
エイチレフは、読み込むファイルのユーアールエルを指定します。

38
00:02:53.514 --> 00:03:01.531
相対パスで書いた場合は、今の文書の場所を基準に解決されるため、フォルダー構成を意識して書く必要があります。

39
00:03:01.531 --> 00:03:07.431
メディア属性は、どんな条件のときに適用するかを、メディアクエリーで指定します。

40
00:03:07.431 --> 00:03:11.969
たとえば画面幅が一定以上なら大きな画面向けのシーエスエス、印刷なら印刷向けのシーエスエス、

41
00:03:11.969 --> 00:03:16.508
というように切り分けられます。

42
00:03:16.508 --> 00:03:22.710
タイプ属性はファイルの種類を示すもので、アイコンなどで形式を伝えるときに使います。

43
00:03:22.710 --> 00:03:27.097
エイチレフのパスが一文字でも違うと、ファイルは静かに読み込まれず、見た目だけが崩れるため、

44
00:03:27.097 --> 00:03:31.484
特に丁寧に確認しましょう。

45
00:03:31.484 --> 00:03:33.603
記事の活用事例を読み解きます。

46
00:03:33.603 --> 00:03:39.393
画面の例は、共通シーエスエスとアイコンを、ヘッドに二行並べて読み込む定番の形です。

47
00:03:39.393 --> 00:03:45.325
一行目でスタイルシートを読み込み、サイト全体の文字色や余白、レイアウトが決まります。

48
00:03:45.325 --> 00:03:50.128
二行目でファビコンを指定し、ブラウザーのタブに小さな目印が付きます。

49
00:03:50.128 --> 00:03:54.365
練習するときは、エイチティーエムエル入門で作った練習ファイルをコピーし、

50
00:03:54.365 --> 00:03:58.602
ヘッドにこの二行を追加して保存し直してください。

51
00:03:58.602 --> 00:04:02.980
再読み込みして見た目が変わり、タブにアイコンが出れば成功です。

52
00:04:02.980 --> 00:04:09.336
開発者ツールでファイルが見つからないというエラーが出ていないかも、あわせて確認しましょう。

53
00:04:09.336 --> 00:04:13.227
ここで、初心者が混同しやすい違いを押さえます。

54
00:04:13.227 --> 00:04:19.656
本文の中でクリックして別ページへ移動するためのリンクは、エータグの役割です。

55
00:04:19.656 --> 00:04:25.578
エータグはボディに書き、文字が表示されて、利用者が押すことができます。

56
00:04:25.578 --> 00:04:34.206
一方、今回のリンクタグはヘッドに書き、画面には何も表示されず、外部ファイルとの関係を宣言するだけです。

57
00:04:34.206 --> 00:04:39.874
英語のリンクという同じ言葉が使われているため紛らわしいのですが、移動のためのアンカーと、

58
00:04:39.874 --> 00:04:45.542
宣言のためのリンクは別物だと区別してください。

59
00:04:45.542 --> 00:04:50.956
迷ったら、人が押すものかどうかで判断すると分かりやすくなります。

60
00:04:50.956 --> 00:04:55.118
リンクの応用として、表示を速くする使い方を紹介します。

61
00:04:55.118 --> 00:05:02.362
プリロードは、このページで確実に使う重要なファイルを、ブラウザーに早めに読み込ませる指定です。

62
00:05:02.362 --> 00:05:07.449
プリコネクトは、外部サーバーのファイルを取りに行く前に、接続だけ先に準備しておく指定で、

63
00:05:07.449 --> 00:05:12.535
フォントなど外部配信を使うときに役立ちます。

64
00:05:12.535 --> 00:05:20.088
どちらも便利ですが、何でもかんでも先読みさせると、かえって通信が混み合って遅くなることがあります。

65
00:05:20.088 --> 00:05:24.404
本当に最初に必要なファイルだけに絞って使うのがコツです。

66
00:05:24.404 --> 00:05:29.336
初心者のうちは、こうした値があることを知っておくだけで十分です。

67
00:05:29.336 --> 00:05:34.457
外部サーバーからファイルを借りるときに知っておきたい属性が二つあります。

68
00:05:34.457 --> 00:05:38.297
インテグリティは、ファイルの内容が改ざんされていないかを確認するための、

69
00:05:38.297 --> 00:05:42.138
指紋のようなハッシュ値を指定します。

70
00:05:42.138 --> 00:05:47.970
ブラウザーが受け取った内容とハッシュが一致しなければ、そのファイルは使われません。

71
00:05:47.970 --> 00:05:54.371
クロスオリジンは、別オリジンから取得するときのシーオーアールエスの扱いを指定するものです。

72
00:05:54.371 --> 00:05:58.638
この二つは主にシーディーエヌを使う場面でセットで検討します。

73
00:05:58.638 --> 00:06:03.901
自分のサーバーにある通常のシーエスエスでは、無理に付ける必要はありません。

74
00:06:03.901 --> 00:06:07.884
配信元の案内に沿って、正しい値を設定することが大切です。

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

76
00:06:09.903 --> 00:06:14.301
記事が参照するエムディーエヌの記録では、リンク要素自体はクロームが一以降、

77
00:06:14.301 --> 00:06:18.698
エッジが十二以降、ファイアフォックスが一以降、サファリが四以前から対応しており、

78
00:06:18.698 --> 00:06:23.096
現在の主要ブラウザーでは安心して使えます。

79
00:06:23.096 --> 00:06:24.980
ただし、新しい属性は別です。

80
00:06:24.980 --> 00:06:30.634
たとえばインテグリティは比較的新しいため、古いブラウザーでは使えない場合があります。

81
00:06:30.634 --> 00:06:35.952
実装後の確認では、スタイルシートのユーアールエルが間違っていて四百四エラーになっていないか、

82
00:06:35.952 --> 00:06:41.269
開発者ツールのネットワークやコンソールで必ずチェックしてください。

83
00:06:41.269 --> 00:06:44.096
パスの一文字違いが、最も多いつまずきです。

84
00:06:44.096 --> 00:06:51.904
あわせて、三百二十ピクセル程度の細い画面や文字拡大でも、読み込んだスタイルが崩れていないかを確認しておくと安心です。

85
00:06:51.904 --> 00:06:53.124
最後にまとめです。

86
00:06:53.124 --> 00:06:59.086
リンクタグは、外部ファイルとの関係をヘッドで宣言する、画面には見えない裏方の要素でした。

87
00:06:59.086 --> 00:07:00.441
ポイントは三つです。

88
00:07:00.441 --> 00:07:05.997
一つ目、レルで関係の種類を、エイチレフでファイルの場所を示すのが基本形であること。

89
00:07:05.997 --> 00:07:12.501
二つ目、スタイルシートとアイコンが最も身近な用途で、メディア属性で適用条件も切り分けられること。

90
00:07:12.501 --> 00:07:18.463
三つ目、本文でクリックする移動リンクはエータグであり、リンクタグとは役割が違うことです。

91
00:07:18.463 --> 00:07:24.696
練習として、自分のページのヘッドに共通シーエスエスとファビコンの二行を追加してみてください。

92
00:07:24.696 --> 00:07:25.916
お疲れさまでした。