<link>－HTML Living Standard リファレンス

トップページ > HTML Living Standard > <link>

★HTML Living Standard リファレンス

<link> …… 文書から外部リソースにリンクする
Internet Explorer

link要素の配置ルール

link要素には、少なくともhref属性かimagesrcset属性のいずれかが必要です。 href属性とimagesrcset属性の両方が存在しないlink要素はリンクを定義しません。

link要素には、rel属性かitemprop属性のいずれかを含める必要がありますが、両方を含めることはできません。

■使用例

以下は、典型的なlink要素の使用例です。 link要素は、外部CSSファイルの読み込みや、アイコンファイルの読み込みによく使用されます。（apple-touch-iconは拡張機能ですが、アップル社のサービスなどで利用される場面も多いため、現実的には重要なキーワードと言えるかもしれません。）

HTMLソース

<!doctype html>
<html>
<head>
<title>link要素の使用例</title>

 <link rel="stylesheet" href="default.css">
 <link rel="stylesheet" href="green.css" title="グリーンスタイル">

 <link rel="icon" href="favicon.ico">
 <link rel="apple-touch-icon" href="apple-touch-icon.png">

</head>
<body>
 <p>link要素のrel属性とhref属性を使って、文書に外部CSSファイルとアイコンファイルを読み込んでいます。</p>
</body>
</html>

link要素は、ひとつの文書内に複数指定できます。例えば、rel="stylesheet" を持つ複数のlink要素がある場合、それらはそれぞれ別の外部リソースとしてカウントされ、それぞれが独自の属性の影響を受けます。文書からリンクしている複数の外部CSSファイルのスタイル指定は、すべて有効となります。

link要素の属性の意味や使い方

href属性には、リンク先のアドレスとして有効なURLを指定します。

rel属性には、キーワードでリンクのタイプ（関係）を指定します。キーワードには、スタイルシートであることを表すstylesheetや、アイコンであることを表すiconなどが定義されています。

itemprop属性には、その要素に関するマイクロデータ（詳細情報）を指定します。これは、検索エンジンのクローラーなどに詳細情報を提供することで、文書内容を解析しやすくすることを目的としています。

type属性には、ユーザーエージェントへのヒントとして MIMEタイプ（例 text/plain、text/html、text/css、application/pdf、image/bmp、video/ogg など）を指定します。 type属性の値に適切なMIMEタイプを指定しておくことで、外部ファイルの種類が正しく認識されて誤作動が起きにくくなるでしょう。

title属性には、リンクのタイトルを指定します。 title属性は様々な要素で使用できる汎用的な属性ですが、 link要素のtitle属性にスタイルシートのセット名を指定すると、スタイルの名称としてブラウザなどで利用されることがあります。

他にも、外部リソースが適用されるメディアを指定するmedia属性、外部リソースの言語を指定するhreflang属性、 rel="icon" の場合にアイコンのサイズを指定するsizes属性などが用意されています。

■属性

href属性

外部リソースのアドレス

crossorigin属性

要素が crossoriginリクエストをどのように処理するか

rel属性

文書とリンク先のリソースとの関係をキーワードで指定します。 link要素のrel属性に指定できる値は、以下の通りです。キーワードは、大文字・小文字を区別しません。キーワードによっては、一般的なブラウザでサポートされていない可能性があります。

alternate …… 現在のドキュメントの代替表現を提供します。
canonical …… 現在のドキュメントの優先URLを指定します。
author …… 現在のドキュメントまたは記事の作成者へのリンクを提供します。
dns-prefetch …… ユーザーエージェントがターゲットリソースのオリジンに対して、DNS解決を先制的に実行する必要があることを指定します。
help …… ヘルプへのリンクを提供します。
icon …… 現在のドキュメントを表すアイコンをインポートします。
manifest …… アプリケーションマニフェストをインポートまたはリンクします。
modulepreload …… ユーザーエージェントがモジュールスクリプトを事前に取得して、後で評価できるようにドキュメントのモジュールマップに保存する必要があることを指定します。オプションで、モジュールの依存関係もフェッチできます。
license …… 現在のドキュメントの主な内容が、参照ドキュメントに記載されている著作権ライセンスの対象であることを示します。
next …… 現在のドキュメントがシリーズの一部であり、シリーズの次のドキュメントが参照ドキュメントであることを示します。
pingback …… 現在のドキュメントへのピンバックを処理するピンバックサーバーのアドレスを指定します。
preconnect …… ユーザーエージェントがターゲットリソースのオリジンに事前に接続する必要があることを指定します。
prefetch …… フォローアップナビゲーションに必要になる可能性が高いターゲットリソースを、ユーザーエージェントが事前に取得してキャッシュする必要があることを指定します。
preload …… ユーザーエージェントが、as属性で指定された潜在的な目的地（および対応する目的地に関連付けられた優先度）に従って、現在のナビゲーションのターゲットリソースを事前に取得してキャッシュする必要があることを指定します。
prev …… 現在のドキュメントがシリーズの一部であり、シリーズの前のドキュメントが参照ドキュメントであることを示します。
search …… 現在のドキュメントとその関連ページを検索するために使用できるリソースへのリンクを提供します。
stylesheet …… スタイルシートをインポートします。

media属性

リンク先のリソースがどのメディアに適用されるのかを指定します。 media属性が省略された場合のデフォルトは「all」です。これは、デフォルトではすべてのメディアに適用されうることを意味します。

all …… すべてのデバイス（初期値）
print …… プリンタ、および、「印刷プレビュー」で文書を表示するブラウザなど、印刷された表示を再現することを目的としたデバイス
screen …… print で一致しないすべてのデバイス（≒一般的なディスプレイ）

以下は、メディアタイプとして定義されていますが、非推奨となっています。可能ならば、使用を避けた方が良いでしょう。

tty …… 固定文字サイズの端末
tv …… テレビ
projection …… プロジェクタ
handheld …… ハンドヘルドデバイス
braille …… 点字の触角デバイス
embossed …… 点字プリンタ
aural …… 音声出力デバイス
speech …… 読み上げブラウザ

integrity属性

サブリソースの整合性チェックで使用される整合性メタデータ

hreflang属性

リンク先のリソースの言語

type属性

リンク先のリソースのMIMEタイプ

referrerpolicy属性

要素によって開始された取得（フェッチ）のリファラーポリシー

sizes属性

アイコンのサイズ（rel="icon" の場合）

imagesrcset属性

高解像度ディスプレイや小型モニターなど、状況によって使い分ける画像セット（rel="preload" の場合）

imagesizes属性

異なるページレイアウト向けの画像サイズ（rel="preload" の場合）

as属性

プリロードリクエスト（先読み）のリンク先（rel="preload" および rel="modulepreload" の場合）

blocking属性

要素がレンダリングをブロックする可能性があるかどうか

color属性

サイトのアイコンをカスタマイズするときに使用する色（rel="mask-icon" の場合）

disabled属性

リンクが無効になっているかどうか

title属性

リンクのタイトル（link要素のtitle属性を指定すると、CSSスタイルシートのセット名を表します）

■使用例

以下のサンプルでは、link要素のrel属性の値にpreloadを指定して、適切なリソースをプリロード（先読み）しています。プリロードされたリソースは、後でimg要素によって使用されますが、img要素のsrcset属性とsize属性に対応する値を持っています。

HTMLソース

<!-- imagesrcset属性があるのでhref属性は省略しています -->
<link rel="preload" as="image"
      imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w"
      imagesizes="50vw">

<!-- 後で動的に画像リソースが挿入されます -->
<img src="wolf.jpg" alt="美しい狼"
     srcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w"
     sizes="50vw">

■使用例

以下のサンプルでは、link要素の imagesrcset属性と media属性を組み合わせて、画面の横幅に応じた適切なリソースをプリロード（先読み）しています。プリロードされたリソースは、後でpicture要素で画面の横幅に応じて使用されます。

HTMLソース

<!-- link要素のmagesrcset属性をmedia属性と組み合わせています -->
<link rel="preload" as="image"
      imagesrcset="dog-cropped-1x.jpg, dog-cropped-2x.jpg 2x"
      media="(max-width: 800px)">
<link rel="preload" as="image"
      imagesrcset="dog-wide-1x.jpg, dog-wide-2x.jpg 2x"
      media="(min-width: 801px)">

<!-- 後で動的に画像リソースが挿入されます -->
<picture>
  <source srcset="dog-cropped-1x.jpg, dog-cropped-2x.jpg 2x"
          media="(max-width: 800px)">
  <img src="dog-wide-1x.jpg" srcset="dog-wide-2x.jpg 2x"
       alt="すごい犬">
</picture>

■使用例

以下のサンプルでは、link要素のdisabled属性を指定することで、デフォルトではスタイルシートの読み込みを無効にしています。 document.querySelector("link").removeAttribute("disabled") などのコードによってdisabled属性を動的に削除することで代替スタイルシートが適用されます。

HTMLソース

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <style>
  body {background-color:#ccccff;}
  </style>
  <link disabled rel="alternate stylesheet" href="alt1.css" title="代替スタイルシート">
  <title>基本スタイルシートと代替スタイルシート</title>
  <script>
  function buttonClick(){
    document.querySelector("link").removeAttribute("disabled");
  }
  </script>
</head>
<body>
  <p>スタイルシートを切り替えることができます。</p>
  <input type="button" value="スタイル切替" onclick="buttonClick()">
</body>
</html>

↓↓↓

ブラウザ上の表示

上記サンプルを新規ページで開きます。

■使用例

以下のサンプルは、type属性にMIMEタイプを指定した例と、type属性によるMIMEタイプ指定を省略した例です。どちらも誤りではありません。 CSSスタイルシートのデフォルトタイプは text/css ですから、type属性によるMIMEタイプの指定を省略してもスタイルシートは適用されます。

HTMLソース

<link rel="stylesheet" href="styleA.css" type="text/css">
<link rel="stylesheet" href="styleB.css">

■関連項目

<head> …… 文書のヘッダ情報を表す
<title> …… 文書のタイトルや文書名を表す
<base> …… 文書の基準URLや基準ターゲットを指定する
<link> …… 文書から外部リソースにリンクする
<meta> …… 文書に関するメタデータを表す
<style> …… CSSスタイルシートを文書に埋め込む

★HTML Living Standard リファレンス

link要素の配置ルール

■使用例

HTMLソース

link要素の属性の意味や使い方

■属性

■使用例

HTMLソース

■使用例

HTMLソース

■使用例

HTMLソース

ブラウザ上の表示

■使用例

HTMLソース

■関連項目

Sponsors