<link>タグはHTMLで使用される要素の１つで、外部リソースをHTML文書にリンクするために使われます。→スタイルシート（CSSファイル）、アイコン、フォント、RSSフィードなどのリソースをページに組み込むことができます。<link>タグは通常、<head>セクション内に配置され、ページの見た目や振る舞いをカスタマイズするための外部ファイルへの参照を提供します。
<link>タグの主な属性には以下のものがあります。
href：リンク先のURLを指定。スタイルシートのパスやフォントファイルへのリンクなど、リソースの場所を示す。rel：現在の文書とリンクされたリソースとの関係を定義します。たとえば、rel="stylesheet"はリンクされたリソースがスタイルシートであることを示す。type：リンクされたリソースのMIMEタイプを指定します。CSSの場合はtype="text/css"。
このページでは、HTMLのlinkタグの意味や使い方・有用性を初心者向けに１から分かりやすく解説します。
HTML：linkタグとは？
<link>タグはHTMLの要素の１つで、外部リソース（例えばCSSファイル、フォント、アイコンセットなど）をWebページに組み込むために使われます。このタグは主にHTML文書の<head>セクション内に配置され、ページの外見や動作に影響を与えるリソースを指定します。
例えば、外部CSSファイルをHTML文書にリンクする場合、以下のように<link>タグを使用します。
<link rel="stylesheet" href="styles.css" type="text/css">
なぜ<link>タグが重要か？
Webページを作成するには際、内容（HTML）とスタイル（CSS）を分離することが一般的なベストプラクティスです。HTMLの中に直接CSSを記述することもできますが、その場合内容とスタイル（＝デザイン）が１つのファイルで管理されることになり、保守性や拡張性が低下します。
<link>タグを使用することで、スタイルシートをHTML文書から別のファイルとして分離することができ、管理や再利用が容易になります。また、複数のページが同じスタイルシートを共有できるため、一貫したデザインを維持しやすくなります。
<link>タグの使用例
サンプル１ スタイルシート（CSS）のリンク
<link rel="stylesheet" href="style.css" type="text/css">
rel="stylesheet": この属性はリンクされているリソースがスタイルシートであることを指示します。href="style.css": リソースの場所を指定します。この例では、同じディレクトリにあるstyle.cssファイルを指します。type="text/css": リソースのタイプを指定します。CSSファイルの場合、この属性は通常text/cssとなります。
サンプル２ アイコンのリンク
<link rel="icon" href="favicon.ico" type="image/x-icon">
rel="icon": この属性はリンクされているリソースがページのアイコン（例えばファビコン）であることを示します。href="favicon.ico": アイコンファイルへのパスです。type="image/x-icon": ファイルのMIMEタイプを指定します。
<link>タグは、Webページの見た目や動作を改善するために、外部リソースを組み込む際に非常に重要です。CSSファイルを分離してリンクすることで、スタイルの一貫性を保ちつつ、コードの保守性と再利用性を高めることができます。また、ファビコンやフォントのような他のリソースを簡単にWebページに追加することも可能になります。
<link>タグを利用する際の注意点
<link>タグを利用する際には、いくつかの注意点があります。以下の点を理解し、適切に対応することで、Webページのパフォーマンスやアクセシビリティ、保守性を高めましょう。
注意点１：リソースの読み込み順序とパフォーマンス
- 読み込み順序:
<link>タグは通常、HTML文書の<head>部分に配置されます。ブラウザはこれらのリソースをページのレンダリング前に読み込むため、大量のスタイルシートや遅いサーバーからのリソースは、ページの表示速度に影響を与える可能性があります。 - パフォーマンスへの影響: スタイルシートやフォントのような外部リソースの読み込みが完了するまで、ページのレンダリングがブロックされる場合があります。これを避けるため、必要なリソースの数を最小限に抑える、または非同期に読み込む方法を検討すると良いでしょう。
以下の例では、パフォーマンスを向上させるために、<link>タグのrel属性にpreloadを使用し、スタイルシートを非同期に先読み（プリロード）します。そして、JavaScriptを使用して実際に必要な時点でスタイルシートを適用します。
<link rel="preload" href="style.css" as="style" onload="this.rel='stylesheet'"> <noscript><link rel="stylesheet" href="style.css"></noscript>
注意点２：相対パスと絶対パス
- 相対パスと絶対パス:
href属性に指定するURLは、相対パスまたは絶対パスのいずれかを使用できます。相対パスは、同じサーバー内のリソースへのパスを簡略化しますが、Webサイトの構造が変更された場合にリンク切れを起こす可能性があります。一方、絶対パスは、サイトの構造が変わってもリソースへ正確にアクセスできる利点がありますが、移行や開発環境でのテストがやや複雑になる場合があります。
相対パスの使用例
<link rel="stylesheet" href="/css/style.css">
この例では、hrefに相対パスを指定しています。Webサイトのルートディレクトリからcssディレクトリ内のstyle.cssファイルを参照しています。
絶対パスの使用例
<link rel="stylesheet" href="https://example.com/css/style.css">
ここでは、hrefに絶対パスを使用して、完全なURLでスタイルシートを指定しています。これにより、どの場所からでも正確に同じリソースを読み込むことができます。
注意点3：セキュリティとプライバシー
- セキュリティ: 外部リソースを読み込む際には、信頼できるソースからのみリソースを取得することが重要です。悪意あるコードが含まれたリソースを読み込むと、Webサイトやユーザーに対するセキュリティリスクが生じる可能性があります。
- プライバシー: 特に外部のフォントやアナリティクスのスクリプトを読み込む場合、ユーザーのプライバシーに関わるデータが外部サービスに送信されることがあります。これらのサービスを使用する際には、プライバシーポリシーを適切に設定し、ユーザーに通知することが求められます。
例えば、外部のスクリプトやスタイルシートを安全に読み込むために、サブリソースの整合性（SRI）を使用することが推奨されます。これにより、ファイルが意図したものであることを確認し、改ざんされたリソースの読み込みを防ぎます。
<link rel="stylesheet" href="https://example.com/css/style.css" integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6JkQmSymbianclY6HPK7LroJG37g6fOP4M" crossorigin="anonymous">
integrity属性では、ファイルのハッシュ値を指定します。ブラウザはこのハッシュ値を使用してダウンロードしたファイルを検証し、一致しない場合は読み込みを拒否。crossorigin属性は、CORS（Cross-Origin Resource Sharing）ポリシーを遵守するために必要です。
これらのサンプルコードは、各注意点に対応した具体的な対処法を示しています。適切に使用することで、Webページのパフォーマンス、セキュリティ、そしてユーザー体験を向上させることができます。