1. 開発者向けのウェブ技術
  2. HTML
  3. リファレンス
  4. 要素
  5. <link>

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

<link>: 外部リソースへのリンク要素

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015年7月⁩.

* Some parts of this feature may have varying levels of support.

<link> は HTML の要素で、現在の文書と外部のリソースとの関係を指定します。 この要素はスタイルシートへのリンクに最もよく使用されますが、サイトのアイコン（"favicon" スタイルのアイコンと、モバイル端末のホーム画面やアプリのアイコンの両方）の確立や、その他のことにも使用されます。

試してみましょう

<link href="/shared-assets/misc/link-element-example.css" rel="stylesheet" />

<p>このテキストは外部スタイルシートで定義されている通り赤になります。</p>
<p style="color: blue">
  ただし <code>style</code> 属性で上書きすることは可能です。
</p>

外部スタイルシートへリンクするには、 <head> の中に次のような <link> 要素を入れてください。

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

この例では、href 属性内にスタイルシートへのパスを提供し、rel 属性の値を stylesheet にしています。rel は "relationship" を意味し、<link> 要素の重要な機能の一つです。 — 値はこれを含んでいる文書にどのように関係するかを示します。

他にも見かけるであろう他の一般的な種別はたくさんあります。例えば、サイトのファビコンへのリンクがあります。

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

他にもアイコンの rel 値はいくつもあり、以下のように主に様々なモバイルプラットフォーム上で特殊なアイコンの種別を示すために使用されます。

html
<link
  rel="apple-touch-icon"
  sizes="114x114"
  href="apple-icon-114.png"
  type="image/png" />

sizes 属性はアイコンの寸法を表し、 type はリンクされようとしているリソースの MIME タイプが入ります。これらはブラウザーが利用できる最も適切なアイコンを選択するための有益なヒントを提供します。

media 属性でメディア種別やクエリーを指定することもできます。このリソースはメディアの条件が真になった場合のみ読み込まれます。

html
<link href="print.css" rel="stylesheet" media="print" />
<link href="mobile.css" rel="stylesheet" media="screen and (width <= 600px)" />

<link> 要素には、興味深いパフォーマンスやセキュリティの機能もいくつか追加されています。以下の例を見てみましょう。

html
<link
  rel="preload"
  href="myFont.woff2"
  as="font"
  type="font/woff2"
  crossorigin="anonymous" />

rel が preload の値であることは、ブラウザーがこのリソースを先読みすることを指示しており (詳しくは rel="preload"を参照)、 as 属性がコンテンツが読み込まれるされる特定のクラスを示します。 crossorigin 属性はリソースが CORS リクエストによって読み込まれるかどうかを示します。

その他の使い方のメモです。

  • <link> 要素はリンク種別が body-ok であるかどうかによって、 <head> 要素または <body> 要素のどちらかに置くことができます。例えば stylesheet リンク種別は body-ok であり、<link rel="stylesheet"> を body 要素内に置くことができます。しかし、これは従うべき良い方法ではありません。 <link> 要素は <head> に入れて本文から離した方が分かりやすくなります。
  • サイトにファビコンを設定するために <link> を使用する場合で、サイトがセキュリティの強化のためにコンテンツセキュリティポリシー (CSP) を使用している場合、ファビコンにポリシーが適用されます。 ファビコンが読み込まれないという問題が発生したら、 Content-Security-Policy ヘッダーの img-src ディレクティブがアクセスを禁止していないかどうか確認してください。
  • HTML および XHTML の仕様では <link> 要素向けのイベントハンドラーを定義していますが、それらがどのように使用されるかは不明確です。
  • XHTML 1.0 では <link> のような空要素では、 <link /> のように末尾のスラッシュが必要です。
  • WebTV は rel に next の値を使用して、一連の文書の次のページを先読みすることに対応しています。

属性

この要素にはグローバル属性があります。

as

この属性は、 rel="preload" を <link> 要素に設定した場合に必要となり、また rel="modulepreload" を設定した場合はオプションですが、それ以外は使用すべきではありません。 これは <link> によって読み込まれるコンテンツのタイプを指定する属性であり、リクエストの照合、正しいコンテンツセキュリティポリシーの適用、正しい Accept リクエストヘッダーの設定のために必要です。

さらに、 rel="preload" はこれをリクエストの優先度付の信号として使用します。下記の表はこの属性に有効な値と、適用先の要素またはリソースの一覧です。

値 適用先
audio <audio> 要素
document <iframe> および <frame> 要素
embed <embed> 要素
fetch

fetch, XHR

メモ: この値では <link> に crossorigin 属性をつける必要があります。CORS を使用した取得を 参照してください。

font

CSS @font-face

メモ: この値では <link> に crossorigin 属性をつける必要があります。CORS を使用した取得を 参照してください。

image <img> および <picture> 要素で srcset または imageset 属性が付いているもの、 SVG の <image> 属性、 CSS の *-image ルール
object <object> 属性
script <script> 要素、ワーカーの importScripts
style <link rel=stylesheet> 要素、 CSS の @import
track <track> 要素
video <video> 要素
worker ワーカー、共有ワーカー
blocking

この属性は、特定の条件が満たされるまで特定の操作をブロックすべきであることを明示的に示します。rel 属性に expect または stylesheet キーワードが含まれる場合にのみ使用する必要があります。rel="expect" の場合、特定の DOM ノードが構文解析されるまで操作をブロックすべきことを示します。rel="stylesheet" では、外部スタイルシートとその重要なサブリソースが取得され、文書に適用されるまで操作をブロックすべきことを示します。ブロックすべき操作は、以下に列挙するブロック対象トークンの空白区切りリストでなければなりません。今のところ、トークンは 1 つだけです。

  • render: 画面へのコンテンツの描画がブロックされます。

メモ: 文書の <head> 内にある link 要素のみがレンダリングをブロックする可能性があります。既定では、 <head> 内の rel="stylesheet" を持つ link 要素は、ブラウザーが構文解析中にこれを検出すると、レンダリングをブロックします。スクリプト経由で動的に追加されたそのような link 要素がレンダリングをブロックするには、追加で blocking = "render" を設定する必要があります。

crossorigin

列挙型の属性で、関連リソースを取得する際に CORS を使用しなければならないかを示します。 CORS が有効な画像は、汚染されることなく <canvas> 要素で再利用できます。次の値が使用できます。

anonymous

オリジン間リクエスト (つまり、 HTTP の Origin ヘッダーを持つリクエスト) が実行されます。ただし、資格情報は送信されません（Cookie、X.509 証明書、 HTTP ベーシック認証は利用されません）。 サーバーがそのオリジンのサイトに資格情報を付与していない（HTTP の Access-Control-Allow-Origin ヘッダーの設定がない）場合、リソースが汚染され、その使用も制限されます。

use-credentials

オリジン間リクエスト (つまり、 HTTP の Origin ヘッダーを持つリクエスト) が実行され、資格情報が送信されます (Cookie、証明書、HTTP ベーシック認証が利用されます)。 サーバーが元のサイトに資格情報を付与しない場合 (HTTP の Access-Control-Allow-Credentials ヘッダーに関わらず)、画像が汚染され、その使用も制限されます。

この属性が存在しない場合、リソースは CORS リクエストなしで (Origin HTTP ヘッダーを送信せずに) 取得され、汚染されない使用が妨げられます。これが無効な場合、列挙型のキーワード anonymous が指定されたものとして扱われます。 それ以上の情報は CORS 設定属性 を参照してください。

disabled

rel="stylesheet" の場合のみ、 disabled は論理属性であり、指定されたスタイルシートを読み込んで文書に適用するかどうかを示します。 disabled が HTML に読み込み時点で指定されていた場合、そのスタイルシートはページ読み込み処理の間に読み込まれません。代わりに、そのスタイルシートは disabled 属性が false に変更されたか削除された場合にオンデマンドで読み込まれます。

DOM から disabled プロパティの値を変更すると、そのスタイルシートを文書の Document.styleSheets の一覧から削除します。

fetchpriority

特定の種類のリソースを取得する際に使用する、相対的な優先度の目安を提供します。使用できる値は次の通りです。

high

他の同種のリソースと比較して、優先度を高く設定してリソースを取得する。

low

他の同種のリソースと比較して、優先度を低く設定してリソースを取得する。

auto

取得の優先度の設定を行わない。 これが既定値です。 値が設定されていない場合、または無効な値が設定されている場合に使用されます。

href

この属性は、リンクしたリソースの URL を指定します。 URL は絶対・相対のどちらでもかまいません。

hreflang

この属性は、リンク先のリソースの言語を示します。 これは単なる助言です。 値は、有効な BCP 47 言語タグであるべきです。 この属性は、href 属性が提供されている場合にのみ使用します。

imagesizes

rel="preload" および as="image" が付いている場合にのみ、 imagesizes 属性は sizes 属性と同様の構文と意味を持ち、img 要素によって使用される適切なリソースを、その srcset および sizes 属性に対応する値で先読みすることを示します。

imagesrcset

rel="preload" および as="image" が付いている場合にのみ、 imagesrcset 属性は srcset 属性と同様の構文と意味を持ち、img 要素によって使用される適切なリソースを、その srcset および sizes 属性に対応する値で先読みすることを示します。

integrity

インラインメタデータを格納します。ブラウザーに取得するよう指示するリソース (ファイル) の、base64 エンコードされた暗号化ハッシュです。 ブラウザーはこれを使用して、取得したリソースが予期せぬ操作なしに配信されたことを確認することができます。 この属性は、rel 属性が stylesheet、preload、modulepreload を指定した場合にのみ指定する必要があります。 サブリソース完全性を参照してください。

media

この属性は、リンク先のリソースが適用されるメディアを指定します。この値はメディアクエリーでなければなりません。 この属性は主に外部のスタイルシートから、実行中のデバイスに最適なものをユーザーエージェントが選択できるようにリンクするときに役立ちます。

referrerpolicy

リソースを読み込む際にどのリファラーを使用するかを示す文字列です。

  • no-referrer は、Referer ヘッダーを送信しないことを表します。
  • no-referrer-when-downgrade は、TLS (HTTPS) を使用せずにオリジンへナビゲートする場合は Referer ヘッダーを送信しないことを表します。これは他にポリシーが定められていない場合の、ユーザーエージェントの既定の動作です。
  • origin は、ページのオリジン (大まかにいえばスキーム、ホスト、ポート) をリファラーとすることを表します。
  • origin-when-cross-origin は、異なるオリジンへの移動ではリファラーをスキーム、ホスト、ポートに制限します。同一オリジンへの移動では、リファラーのパスも含めます。
  • unsafe-url は、リファラーにオリジンとパスを含めることを表します (ただし、フラグメント、パスワード、ユーザー名は含めません)。これはオリジンやパスの情報が TLS で保護されたリソースからセキュアでないオリジンへ漏えいしますので、安全ではありません。
rel

この属性は現在の文書に対する、リンクされた文書の関係を示します。属性値は、空白で区切られたリンク種別の値のリストでなければなりません。

sizes

この属性は、リソースに含まれる映像メディア向けのアイコンのサイズを定義します。これは、 rel の値が icon または Apple の apple-touch-icon のような標準外の種別が含まれている場合にのみ指定することができます。以下の値を指定できます。

  • any: image/svg+xml のようなベクター画像であるため、どのようなサイズにも調整可能であることを示します。
  • ホワイトスペースで区切られたサイズのリスト。サイズはそれぞれ <幅のピクセル数>x<高さのピクセル数> または <幅のピクセル数>X<高さのピクセル数> という形式です。それぞれのサイズがリソースに含まれていることが必要です。

メモ: ほとんどのアイコン形式は 1 個のアイコンのみ保存可能です。よってほとんどの場合、 sizes 属性は高億が 1 個だけになります。 Microsoft の ICO 形式と Apple の ICNS 形式は、単一のファイルに複数のアイコンサイズを保存できます。ICO はブラウザーの対応状況が良いので、ブラウザー間の対応を気にする場合はこの形式を使用すべきです。

title

title 属性は、<link> 要素では特別な意味があります。<link rel="stylesheet"> で使用すると、既定のスタイルシートか代替スタイルシートか を定義します。

type

この属性は、リンク先コンテンツの種類を定義します。この属性の値は text/html や text/css などの MIME タイプにします。 この属性の一般的な使用法は、参照されるスタイルシートのタイプ（text/css など）の定義ですが、 CSS はウェブ上の唯一のスタイルシート言語であるため、type 属性を省略できるばかりでなく、それが実際に推奨される習慣になっています。 また rel="preload" リンク種別で、ブラウザーが対応するファイルタイプのみダウンロードさせるためにも使用します。

標準外の属性

target

定義されたリンク関係を持つ、またはリンクしたリソースを表示するフレームまたはウィンドウの名前を定義します。

廃止された属性

charset

この属性は、リンク先のリソースの文字エンコーディングを定義します。この値は RFC 2045 で定義されている文字セットの、空白またはカンマで区切られたリストです。 既定値は iso-8859-1 です。

メモ: この廃止された属性と同じ効果を生み出すためには、リンク先のリソースで HTTP の Content-Type ヘッダーを使用してください。

rev

この属性の値は、href 属性で定義したリンク先文書に対する、現在の文書の関係を示します。 従って、この属性は rel 属性の値と比べたときに逆向きの関係を定義します。 この属性向けのリンク種別の値は、rel 向けの値と似ています。

メモ: rev の代わりに、逆の意味のリンク種別の値を与えた rel 属性を使用してください。 例えば made は author に置き換えます。また、この属性は「リビジョン」 (revision) を表すものではないので、バージョン番号を指定してはいけませんが、残念ながらいくつものサイトでそのように使用されています。

例

スタイルシートの読み込み

ページにスタイルシートを読み込むには、以下の構文を使用します。

html
<link href="style.css" rel="stylesheet" />

代替スタイルシートの提供

代替スタイルシートも提示できます。

ユーザーはメニューの 表示 > スタイルシート で、使用するスタイルシートを選択できます。 これは、ユーザーがページをさまざまなバージョンで閲覧する手段を提供します。

html
<link href="default.css" rel="stylesheet" title="Default Style" />
<link href="fancy.css" rel="alternate stylesheet" title="Fancy" />
<link href="basic.css" rel="alternate stylesheet" title="Basic" />

さまざまな利用場面のアイコンの提供

同じページにいくつかの異なるアイコンへのリンクを含めて、ブラウザーが rel や sizes の値をヒントとして使用し、特定の場面で最適に動作する一つを選択するようにすることができます。

html
<!-- iPad Pro （高解像度 Retina ディスプレイ搭載）: -->
<link
  rel="apple-touch-icon"
  sizes="167x167"
  href="/apple-touch-icon-167x167.png" />
<!-- 3x 解像度の iPhone: -->
<link
  rel="apple-touch-icon"
  sizes="180x180"
  href="/apple-touch-icon-180x180.png" />
<!-- Retina ではない iPad, iPad mini, など: -->
<link
  rel="apple-touch-icon"
  sizes="152x152"
  href="/apple-touch-icon-152x152.png" />
<!-- 2x 解像度の iPhone およびその他の端末: -->
<link rel="apple-touch-icon" href="/apple-touch-icon-120x120.png" />
<!-- 基本的なファビコン -->
<link rel="icon" href="/favicon.ico" />

Apple アイコンの適切なサイズ選択については、Apple のウェブアプリケーションの構成に関するドキュメント および参照されている Apple ヒューマンインターフェースガイドラインを参照してください。通常は 192x192 などの大きな画像を用意し、ブラウザーが必要に応じて縮小表示させるだけで十分ですが、Apple のデザインガイドラインが推奨するように、サイズごとに異なる詳細レベルの画像を用意したい場合もあるでしょう。低解像度向けに小さいアイコンを用意すれば、帯域幅の節約にもなります。

<link> 要素を全く提供する必要がない場合もあります。例えば、ブラウザーはサイトのルートから自動的に /favicon.ico をリクエストし、Apple も自動的に /apple-touch-icon-[size].png や /apple-touch-icon.png などを要求します。ただし、明示的なリンクを提供することで、これらの慣習の変更に対して保護されます。

メディアクエリーのついた条件付きのリソース読み込み

以下のように、メディア種別やクエリーを media 属性で指定することができます。このリソースはメディア条件が真の場合にのみ読み込まれます。

html
<link href="print.css" rel="stylesheet" media="print" />
<link href="mobile.css" rel="stylesheet" media="all" />
<link href="desktop.css" rel="stylesheet" media="screen and (width >= 600px)" />
<link
  href="highres.css"
  rel="stylesheet"
  media="screen and (resolution >= 300dpi)" />

スタイルシートの load イベント

load イベントの発生を確認することで、スタイルシートが読み込まれた時を判断できます。同様に error イベントを確認することで、スタイルシートを処理する際のエラー発生を検出できます。

html
<link rel="stylesheet" href="mystylesheet.css" id="my-stylesheet" />
js
const stylesheet = document.getElementById("my-stylesheet");

stylesheet.onload = () => {
  // 何か興味深いことをする。シートが読み込まれた。
};

stylesheet.onerror = () => {
  console.log("スタイルシートの読み込みでエラーが発生しました。");
};

メモ: load イベントはスタイルシートとスタイルシートがインポートするすべてのコンテンツの読み込みと解析が行われた後、スタイルシートがコンテンツに適用される直前に発生します。

先読みの例

<link rel="preload"> の例は、 rel="preload" によるコンテンツの先読みにいくつかあります。

リソースが読み込まれるまで描画をブロック

render トークンを blocking 属性に設定することができます。 指定すると、リソースが取り込まれるまでページのレンダリングがブロックされます。

html
<link blocking="render" rel="stylesheet" href="example.css" crossorigin />

技術的概要

コンテンツカテゴリー メタデータコンテンツ。 itemprop が存在する場合は、 フローコンテンツおよび記述コンテンツ。
許可されている内容 なし。これは空要素です。
タグの省略 開始タグは必須であり、終了タグを置いてはいけません。
許可されている親要素 メタデータ要素を受け入れるすべての要素。 itemprop 属性がある場合は記述コンテンツを受け入れるすべての要素。
暗黙の ARIA ロール href 属性つきの link
許可されている ARIA ロール 許可されている role なし
DOM インターフェイス HTMLLinkElement

仕様書

Specification
HTML
# the-link-element

ブラウザーの互換性

関連情報

  • HTTP の Link ヘッダー

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

View this page on GitHub • Report a problem with this content