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

★HTML Living Standard リファレンス

<link> …… 文書から外部リソースにリンクする
Internet Explorer Microsoft Edge Google Chrome Safari Firefox Opera
広告

<link>タグは、文書から外部リソースにリンクする際に使用します。 外部リソースとは、スタイルシートを記述した外部CSSファイルなど、その文書に関連する何らかのリソース(手助けとなる資源)です。

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スタイルシートを文書に埋め込む
広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる!【A8.net】
Node.jsコース
はじめてのプログラミングコース
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ