過去バージョン

この本文には実行可能なタグ等が含まれるため、安全のためHTMLソースとして表示しています。本文データは変更していません。

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;background:#fffbea;border:1px solid #f4c430;margin:1em 0;width:100%"><tr><td style="background:#f4c430;color:#000;font-weight:bold;padding:8px">この記事の要点</td></tr><tr><td style="padding:10px"><ul><li><strong><link></strong> は HTML から<strong>外部リソースとの関係</strong>を宣言する空要素（閉じタグなし）</li><li><strong><head> 内</strong>に置く。ページに表示はされない</li><li>主な用途: <strong>外部CSS</strong>（<code>rel="stylesheet"</code>）、<strong>favicon</strong>（<code>rel="icon"</code>）、<strong>プリロード</strong>（<code>rel="preload"</code>）</li><li>画面に表示される<strong>リンク（クリック可能）</strong>は <a> 要素であり、<link> とは別物</li><li><code>media</code> 属性や <code>integrity</code>（SRI）属性で<strong>条件付き読み込み・改ざん検知</strong>もできる</li></ul></td></tr></table>
<h2>link要素とは</h2>

<p><strong><link></strong> は HTML 文書と外部リソースの関係（<strong>rel</strong>ationship）を宣言する要素です。<code><head></code> 内に書き、画面には表示されません。CSS の読み込み、favicon の指定、リソースのプリロード、RSS フィードの宣言などに使われます。<strong>クリックできる「リンク」とは別物</strong>で、それは <code><a></code> 要素です。</p>

<h2>基本構文</h2>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><head>
  <!-- 外部 CSS の読み込み -->
  <link rel="stylesheet" href="/css/style.css">

  <!-- favicon -->
  <link rel="icon" href="/favicon.ico">

  <!-- スマホ向けアイコン（iOS） -->
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">

  <!-- RSS フィード -->
  <link rel="alternate" type="application/rss+xml"
        href="/feed.xml" title="このサイトのRSS">

  <!-- 正規URL -->
  <link rel="canonical" href="https://example.com/article/123">
</head></code></pre>
<h2>主な属性</h2>

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#e3f2fd"><th>属性</th><th>意味</th><th>例</th></tr></thead>
<tbody>
<tr><td><code>rel</code></td><td>リソースとの関係（必須）</td><td><code>stylesheet</code> / <code>icon</code> / <code>preload</code> / <code>canonical</code></td></tr>
<tr><td><code>href</code></td><td>リソースの URL</td><td><code>/css/style.css</code></td></tr>
<tr><td><code>type</code></td><td>MIME タイプ</td><td><code>text/css</code> / <code>image/x-icon</code></td></tr>
<tr><td><code>media</code></td><td>適用条件（メディアクエリ）</td><td><code>(max-width: 600px)</code></td></tr>
<tr><td><code>as</code></td><td>preload 時のリソース種別</td><td><code>script</code> / <code>style</code> / <code>font</code></td></tr>
<tr><td><code>crossorigin</code></td><td>CORS / プリロード設定</td><td><code>anonymous</code></td></tr>
<tr><td><code>integrity</code></td><td>SRI ハッシュ（改ざん検知）</td><td><code>sha384-...</code></td></tr>
<tr><td><code>hreflang</code></td><td>リソースの言語</td><td><code>en</code></td></tr>
</tbody>
</table>

<h2>rel 属性の代表値</h2>

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#e3f2fd"><th>値</th><th>用途</th></tr></thead>
<tbody>
<tr><td><code>stylesheet</code></td><td>外部スタイルシート（CSS）</td></tr>
<tr><td><code>icon</code></td><td>favicon</td></tr>
<tr><td><code>apple-touch-icon</code></td><td>iOS ホーム画面用アイコン</td></tr>
<tr><td><code>manifest</code></td><td>PWA のマニフェスト</td></tr>
<tr><td><code>canonical</code></td><td>正規 URL（SEO）</td></tr>
<tr><td><code>alternate</code></td><td>RSS フィード / 多言語ページ</td></tr>
<tr><td><code>preload</code></td><td>後で使うリソースを<strong>早期取得</strong></td></tr>
<tr><td><code>prefetch</code></td><td>次のページ遷移を見越して<strong>事前取得</strong></td></tr>
<tr><td><code>preconnect</code></td><td>外部ホストに<strong>早めに接続</strong>（DNS+TCP+TLS）</td></tr>
<tr><td><code>dns-prefetch</code></td><td>DNS だけ事前解決</td></tr>
</tbody>
</table>

<h2>media 属性で条件付き読み込み</h2>

<p><code>media</code> 属性は、画面幅や印刷時など<strong>条件にマッチしたときだけ</strong>CSS を適用する仕組みです。マッチしない CSS は<strong>レンダリングをブロックしない</strong>ため、表示パフォーマンスにも有利です。</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><!-- すべての画面 -->
<link rel="stylesheet" href="/css/main.css">

<!-- スマホ用 -->
<link rel="stylesheet" href="/css/mobile.css"
      media="(max-width: 600px)">

<!-- 印刷用 -->
<link rel="stylesheet" href="/css/print.css" media="print"></code></pre>
<h2>preload で早期取得</h2>

<p>あとで使うとわかっているリソース（フォント、重要画像、JS）を<strong>早めに取得</strong>させ、レンダリング開始を待たせない用途で使います。<code>as</code> 属性で種別を指定する必要があります。</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><!-- Web フォントを先に取りに行く -->
<link rel="preload" href="/fonts/main.woff2"
      as="font" type="font/woff2" crossorigin>

<!-- 重要画像 -->
<link rel="preload" href="/img/hero.jpg" as="image">

<!-- 後で使う JS -->
<link rel="preload" href="/js/dashboard.js" as="script"></code></pre>
<h2>SRI（改ざん検知）</h2>

<p>CDN から CSS / JS を読み込むときに、<strong>ハッシュ値で内容を検証</strong>できます。改ざんされたファイルが配信された場合、ブラウザは読み込みを拒否します。</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><link rel="stylesheet"
      href="https://cdn.example.com/lib.css"
      integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"
      crossorigin="anonymous"></code></pre>
<h2><link> と <a> の違い</h2>

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#e3f2fd"><th>項目</th><th><link></th><th><a></th></tr></thead>
<tbody>
<tr><td>表示</td><td>されない</td><td>される</td></tr>
<tr><td>クリック</td><td>不可</td><td>可</td></tr>
<tr><td>置く場所</td><td><head> 内</td><td><body> 内</td></tr>
<tr><td>用途</td><td>リソース・関係の宣言</td><td>ユーザーが押すリンク</td></tr>
</tbody>
</table>

<h2>よくある落とし穴</h2>

<ul>
<li><strong><body> に書くと無視されがち</strong> &mdash; <code><head></code> 内に置く</li>
<li><strong>閉じタグは書かない</strong>（空要素）。XHTML 時代の <code><link ... /></code> は HTML5 では不要</li>
<li>preload に <code>as</code> を付け忘れると<strong>2 度ダウンロード</strong>される</li>
<li>CDN フォント等で <code>crossorigin</code> を忘れると preload が効かない</li>
</ul>

<h2>関連</h2>

<ul>
<li><a href="/article/10626">リンク・ボタン</a> &mdash; 親カテゴリ</li>
<li><a href="/article/10084">a要素</a></li>
<li><a href="/article/20647">button要素</a></li>
<li><a href="/article/10599">meta要素</a></li>
<li><a href="/article/10595">head要素</a></li>
<li><a href="/article/10377">style要素</a></li>
</ul>