<link>: LINK 要素
最終更新：2026-10-13
<link>LINK 要素
現在の文書と外部リソースの関係を定義します。最も多いのは CSS スタイルシートですが、アイコンやプリロードにも使われます。
| カテゴリ | メタデータ |
|---|---|
| コンテンツモデル | フローコンテンツ |
| 許可される親要素 | フローコンテンツを受け入れる要素 |
| 閉じタグ | 自己完結 — 閉じタグ不要 |
| ステータス | 標準 |
📝 構文
<link rel="stylesheet" href="style.css">⚙️ 属性
この要素はグローバル属性に加え、以下の属性をサポートします：
| 属性 | 値 | 説明 |
|---|---|---|
rel | Relationship: stylesheet, icon, preload, alternate, etc. | |
href | URL of the external resource. | |
type | MIME type of the resource (e.g. text/css). | |
media | Media/device condition the resource applies to. | |
sizes | Icon sizes for rel=icon (e.g. 32x32). |
▶ サンプル
下のコードを編集して、playground でリアルタイム結果を確認：
🌐 ブラウザサポート
| ブラウザ |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <link> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| すべての主要ブラウザでサポート | |||||
ヒント： link は空要素です。rel="stylesheet" が最も一般的な使い方です。
❓ よくある質問
Qlink の rel 属性にはどんなよく使う値がありますか？
Aスタイルシートの
stylesheet、サイトアイコンの icon、先読みの preload/prefetch/preconnect、正規 URL の canonical、多言語表記の alternate、RSS の alternate type='application/rss+xml' など。rel が link の用途を決める、いわば魂の属性です。Qpreload と prefetch の違いは何ですか？
A
preload は「今のページですぐ使う」重要リソース（初屏のフォント、重要な CSS）を高優先度で即読み込みます。prefetch は「次のページで使うかもしれない」リソースを、空き時間に低優先度で読み込みます。使い分けを誤ると帯域の無駄です。今のページの資源は preload、ページをまたぐ資源は prefetch です。Qfavicon は link でどう設定しますか？
A現代的な書き方は、
<link rel='icon' href='/favicon.ico' sizes='any'> に <link rel='icon' type='image/svg+xml' href='/icon.svg'> を組み合わせる形です。Apple のタッチアイコンは rel='apple-touch-icon' を使います。link を書かなくても、ブラウザはデフォルトで /favicon.ico を要求します。🏷️ 関連タグ
💡 関連ケース
今後さらにケーススタディを追加予定です。
📚 関連チュートリアル
