SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

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

再生時間 7:26動画を別のタブで開く ↗
動画の字幕・文字起こしを読む

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

  1. 0:00こんにちは。
  2. 0:00エイチティーエムエル、リファレンス解説です。
  3. 0:03エイチティーエムエルタグ編の五十五本目は、リンクタグです。
  4. 0:07リンクは、今開いている文書と、外部にあるファイルとの関係を宣言するためのタグです。
  5. 0:13代表的な役割は、外部シーエスエスを読み込むことと、ブラウザーのタブに表示される小さなアイコン、
  6. 0:17ファビコンを指定することです。
  7. 0:22リンク自体は画面に文字や図として表示されませんが、ページの見た目と使い心地を裏側で支える、
  8. 0:26とても重要な存在です。
  9. 0:30今回は、基本の書き方から属性の使い分け、クリックするリンクとの違いまで順に学んでいきましょう。
  10. 0:36見えないからこそ、書き忘れると見た目が崩れてしまう点にも注意が必要です。
  11. 0:41まず、どんな場面で使うかを整理します。
  12. 0:44最も多いのは、デザインをまとめた外部シーエスエスファイルを読み込む場面です。
  13. 0:49シーエスエスを別ファイルに分けておけば、複数ページで同じ見た目を共有でき、
  14. 0:52一か所直すだけで全体に反映できます。
  15. 0:56次に、サイトの目印になるファビコンの指定です。
  16. 0:59タブやブックマークで小さなアイコンが表示されると、利用者が自分のサイトを見つけやすくなります。
  17. 1:05そのほか、ウェブフォントの読み込みや、次に使うファイルを早めに用意する事前読み込みにもリンクが使われます。
  18. 1:12裏方の読み込み役、と覚えておきましょう。
  19. 1:14逆に、ページの中に直接シーエスエスを書く方法もありますが、共通化したい場合は外部ファイルとリンクの組み合わせが基本になります。
  20. 1:23基本の形を確認します。
  21. 1:24画面の例のように、リンクは通常、ヘッドの中に書きます。
  22. 1:28ヘッドは文書の設定を置く場所なので、外部ファイルとの関係もここで宣言するのが自然です。
  23. 1:34リンクは空要素と呼ばれる種類で、終了タグは書きませんし、開始タグと終了タグの間に文字を挟むこともありません。
  24. 1:42短い一行で完結するのが特徴です。
  25. 1:44ボディに本文を書く前に、ヘッドで必要なファイルをそろえる、という流れを覚えてください。
  26. 1:51この配置を間違えてボディに書くと、ブラウザーが想定外の動きをすることがあるため注意が必要です。
  27. 1:58ヘッドに書く順番は、文字コードの指定を先にし、その後にタイトルやリンクを続けるのが読みやすい並びです。
  28. 2:05リンクで最も大切な属性が、レルです。
  29. 2:08レルは、この文書と読み込むファイルが、どんな関係にあるかを示します。
  30. 2:13値がスタイルシートなら、相手は見た目を決めるシーエスエスファイルです。
  31. 2:19値がアイコンなら、相手はファビコン用の画像です。
  32. 2:23ブラウザーはレルの値を見て、ファイルをどう扱うべきかを判断します。
  33. 2:28レルを書き忘れたり、つづりを間違えたりすると、ファイルが正しく読み込まれません。
  34. 2:34リンクを書くときは、まずレルで関係をはっきりさせる、という順番で考えましょう。
  35. 2:41関係の種類によって、合わせて使う属性も変わってきます。
  36. 2:45次に、場所と条件を指定する属性を見ていきます。
  37. 2:48エイチレフは、読み込むファイルのユーアールエルを指定します。
  38. 2:53相対パスで書いた場合は、今の文書の場所を基準に解決されるため、フォルダー構成を意識して書く必要があります。
  39. 3:01メディア属性は、どんな条件のときに適用するかを、メディアクエリーで指定します。
  40. 3:07たとえば画面幅が一定以上なら大きな画面向けのシーエスエス、印刷なら印刷向けのシーエスエス、
  41. 3:11というように切り分けられます。
  42. 3:16タイプ属性はファイルの種類を示すもので、アイコンなどで形式を伝えるときに使います。
  43. 3:22エイチレフのパスが一文字でも違うと、ファイルは静かに読み込まれず、見た目だけが崩れるため、
  44. 3:27特に丁寧に確認しましょう。
  45. 3:31記事の活用事例を読み解きます。
  46. 3:33画面の例は、共通シーエスエスとアイコンを、ヘッドに二行並べて読み込む定番の形です。
  47. 3:39一行目でスタイルシートを読み込み、サイト全体の文字色や余白、レイアウトが決まります。
  48. 3:45二行目でファビコンを指定し、ブラウザーのタブに小さな目印が付きます。
  49. 3:50練習するときは、エイチティーエムエル入門で作った練習ファイルをコピーし、
  50. 3:54ヘッドにこの二行を追加して保存し直してください。
  51. 3:58再読み込みして見た目が変わり、タブにアイコンが出れば成功です。
  52. 4:02開発者ツールでファイルが見つからないというエラーが出ていないかも、あわせて確認しましょう。
  53. 4:09ここで、初心者が混同しやすい違いを押さえます。
  54. 4:13本文の中でクリックして別ページへ移動するためのリンクは、エータグの役割です。
  55. 4:19エータグはボディに書き、文字が表示されて、利用者が押すことができます。
  56. 4:25一方、今回のリンクタグはヘッドに書き、画面には何も表示されず、外部ファイルとの関係を宣言するだけです。
  57. 4:34英語のリンクという同じ言葉が使われているため紛らわしいのですが、移動のためのアンカーと、
  58. 4:39宣言のためのリンクは別物だと区別してください。
  59. 4:45迷ったら、人が押すものかどうかで判断すると分かりやすくなります。
  60. 4:50リンクの応用として、表示を速くする使い方を紹介します。
  61. 4:55プリロードは、このページで確実に使う重要なファイルを、ブラウザーに早めに読み込ませる指定です。
  62. 5:02プリコネクトは、外部サーバーのファイルを取りに行く前に、接続だけ先に準備しておく指定で、
  63. 5:07フォントなど外部配信を使うときに役立ちます。
  64. 5:12どちらも便利ですが、何でもかんでも先読みさせると、かえって通信が混み合って遅くなることがあります。
  65. 5:20本当に最初に必要なファイルだけに絞って使うのがコツです。
  66. 5:24初心者のうちは、こうした値があることを知っておくだけで十分です。
  67. 5:29外部サーバーからファイルを借りるときに知っておきたい属性が二つあります。
  68. 5:34インテグリティは、ファイルの内容が改ざんされていないかを確認するための、
  69. 5:38指紋のようなハッシュ値を指定します。
  70. 5:42ブラウザーが受け取った内容とハッシュが一致しなければ、そのファイルは使われません。
  71. 5:47クロスオリジンは、別オリジンから取得するときのシーオーアールエスの扱いを指定するものです。
  72. 5:54この二つは主にシーディーエヌを使う場面でセットで検討します。
  73. 5:58自分のサーバーにある通常のシーエスエスでは、無理に付ける必要はありません。
  74. 6:03配信元の案内に沿って、正しい値を設定することが大切です。
  75. 6:07ブラウザー互換性を確認します。
  76. 6:09記事が参照するエムディーエヌの記録では、リンク要素自体はクロームが一以降、
  77. 6:14エッジが十二以降、ファイアフォックスが一以降、サファリが四以前から対応しており、
  78. 6:18現在の主要ブラウザーでは安心して使えます。
  79. 6:23ただし、新しい属性は別です。
  80. 6:24たとえばインテグリティは比較的新しいため、古いブラウザーでは使えない場合があります。
  81. 6:30実装後の確認では、スタイルシートのユーアールエルが間違っていて四百四エラーになっていないか、
  82. 6:35開発者ツールのネットワークやコンソールで必ずチェックしてください。
  83. 6:41パスの一文字違いが、最も多いつまずきです。
  84. 6:44あわせて、三百二十ピクセル程度の細い画面や文字拡大でも、読み込んだスタイルが崩れていないかを確認しておくと安心です。
  85. 6:51最後にまとめです。
  86. 6:53リンクタグは、外部ファイルとの関係をヘッドで宣言する、画面には見えない裏方の要素でした。
  87. 6:59ポイントは三つです。
  88. 7:00一つ目、レルで関係の種類を、エイチレフでファイルの場所を示すのが基本形であること。
  89. 7:05二つ目、スタイルシートとアイコンが最も身近な用途で、メディア属性で適用条件も切り分けられること。
  90. 7:12三つ目、本文でクリックする移動リンクはエータグであり、リンクタグとは役割が違うことです。
  91. 7:18練習として、自分のページのヘッドに共通シーエスエスとファビコンの二行を追加してみてください。
  92. 7:24お疲れさまでした。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

linkタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。外部CSSやアイコンとの関係を宣言します。ページ内の移動リンクには a を使います。

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