HTML辞書ホームへ
HTML要素 辞書 by Sentaro

<link>

外部リソースリンク要素。現在のドキュメントと外部リソース（スタイルシートなど）を関連付けます。

info

概要

<link> 要素は通常 <head> 要素内に配置され、現在の HTML ドキュメントと外部リソースとの関係（関連付け）を指定します。
外部 **CSS ファイル**の読み込みや、**ファビコン**の指定、**プリロード/プリフェッチ**によるパフォーマンス最適化などに用いられます。
終了タグは不要な**空要素**です。

play_circle

デモ (静的表示)

HTML (Source)
<!-- 外部CSSの読み込み --> <link rel="stylesheet" href="/style.css"> <!-- ファビコンの指定 --> <link rel="icon" href="/favicon.ico"> <!-- リソースの事前読み込み (Preload) --> <link rel="preload" as="font" href="/font.woff2" crossorigin>
Preview (Result)

※ link要素は主にhead内に記述され、ブラウザの描画に直接的な影響を与えないため、このデモでは視覚的な変化はありません。

list

属性 (Attributes)

属性名 説明
rel リンク先ドキュメントと現在のドキュメントとの**関係**を指定します。最も重要な属性です。
例: stylesheet, icon, preload, prefetch, alternate, canonical
href リンク先リソースのURLを指定します。（``要素の`href`と同じ役割です）
as rel="preload", rel="modulepreload" の場合、読み込むコンテンツの種別（style, script, font, imageなど）を指定します。
type リンク先リソースのMIMEタイプ（例: text/css, image/png）を示します。
media リソースが適用されるメディアタイプ（例: screen, print, max-width: 600px）を指定します。
crossorigin CORS (Cross-Origin Resource Sharing) の設定を行います。フォントのプリロードなどに必要です。
code

実用例

1. 外部スタイルシートの読み込み

<link rel="stylesheet" href="/css/main.css"> <link rel="stylesheet" href="/css/print.css" media="print">

2. ページパフォーマンス最適化 (Preload/Prefetch)

<!-- 次のナビゲーションで必要になるリソースを事前に読み込む --> <link rel="preload" as="image" href="/images/hero.jpg"> <!-- 将来的に必要になる可能性のあるリソースをアイドル時に取得 --> <link rel="prefetch" href="/pages/next-page.html">

3. SEO/クローラー向け (Canonical/Alternate)

<!-- このページの正規URLを指定 (SEO対策) --> <link rel="canonical" href="https://example.com/item/1"> <!-- 翻訳版のページを指定 --> <link rel="alternate" hreflang="en" href="https://example.com/en/item/1">
lightbulb

知っておくべき重要事項

speed
パフォーマンス最適化
rel="preload" は、現在のページで確実に必要となるリソースを**早期に**取得させるために使用されます。ただし、乱用するとかえってパフォーマンスが低下する可能性があるため、クリティカルなリソースに限定して使用すべきです。
security
セキュリティとプライバシー (Integrity)
外部からスタイルシートやスクリプトを読み込む場合、**サブリソース完全性 (SRI)** のために integrity 属性と crossorigin 属性を付与することで、ファイルが改ざんされていないことを検証できます。
私について 利用規約 プライバシーポリシー