このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
<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> ただし <code>style</code> 属性で上書きすることは可能です。</p>外部スタイルシートへリンクするには、<head> の中に次のような<link> 要素を入れてください。
<link href="main.css" rel="stylesheet" />この例では、href 属性内にスタイルシートへのパスを提供し、rel 属性の値をstylesheet にしています。rel は "relationship" を意味し、<link> 要素の重要な機能の一つです。 — 値はこれを含んでいる文書にどのように関係するかを示します。
他にも見かけるであろう他の一般的な種別はたくさんあります。例えば、サイトのファビコンへのリンクがあります。
<link rel="icon" href="favicon.ico" />他にもアイコンのrel 値はいくつもあり、以下のように主に様々なモバイルプラットフォーム上で特殊なアイコンの種別を示すために使用されます。
<link rel="apple-touch-icon" sizes="114x114" href="apple-icon-114.png" type="image/png" />sizes 属性はアイコンの寸法を表し、type はリンクされようとしているリソースの MIME タイプが入ります。これらはブラウザーが利用できる最も適切なアイコンを選択するための有益なヒントを提供します。
media 属性でメディア種別やクエリーを指定することもできます。このリソースはメディアの条件が真になった場合のみ読み込まれます。
<link href="print.css" rel="stylesheet" media="print" /><link href="mobile.css" rel="stylesheet" media="screen and (width <= 600px)" /><link> 要素には、興味深いパフォーマンスやセキュリティの機能もいくつか追加されています。以下の例を見てみましょう。
<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>要素、ワーカーのimportScriptsstyle <link rel=stylesheet>要素、 CSS の@importtrack <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 リクエストなしで (
OriginHTTP ヘッダーを送信せずに) 取得され、汚染されない使用が妨げられます。これが無効な場合、列挙型のキーワードanonymous が指定されたものとして扱われます。それ以上の情報はCORS 設定属性 を参照してください。disabledrel="stylesheet"の場合のみ、disabledは論理属性であり、指定されたスタイルシートを読み込んで文書に適用するかどうかを示します。disabledが HTML に読み込み時点で指定されていた場合、そのスタイルシートはページ読み込み処理の間に読み込まれません。代わりに、そのスタイルシートはdisabled属性がfalseに変更されたか削除された場合にオンデマンドで読み込まれます。DOM から
disabledプロパティの値を変更すると、そのスタイルシートを文書のDocument.styleSheetsの一覧から削除します。fetchpriority特定の種類のリソースを取得する際に使用する、相対的な優先度の目安を提供します。使用できる値は次の通りです。
high他の同種のリソースと比較して、優先度を高く設定してリソースを取得する。
low他の同種のリソースと比較して、優先度を低く設定してリソースを取得する。
auto取得の優先度の設定を行わない。これが既定値です。値が設定されていない場合、または無効な値が設定されている場合に使用されます。
詳しくは
HTMLLinkElement.fetchPriorityを参照してください。hrefこの属性は、リンクしたリソースのURL を指定します。 URL は絶対・相対のどちらでもかまいません。
hreflangこの属性は、リンク先のリソースの言語を示します。これは単なる助言です。値は、有効なBCP 47 言語タグであるべきです。この属性は、
href属性が提供されている場合にのみ使用します。imagesizesrel="preload"およびas="image"が付いている場合にのみ、imagesizes属性はsizes属性と同様の構文と意味を持ち、img要素によって使用される適切なリソースを、そのsrcsetおよびsizes属性に対応する値で先読みすることを示します。imagesrcsetrel="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 はブラウザーのサポートが良いので、ブラウザー間の対応を気にする場合はこの形式を使用すべきです。titletitle属性は、<link>要素では特別な意味があります。<link rel="stylesheet">で使用すると、既定のスタイルシートか代替スタイルシートか を定義します。typeこの属性は、リンク先コンテンツの種類を定義します。この属性の値はtext/html やtext/css などの MIME タイプにします。この属性の一般的な使用法は、参照されるスタイルシートのタイプ（text/css など）の定義ですが、 CSS はウェブ上の唯一のスタイルシート言語であるため、
type属性を省略できるばかりでなく、それが実際に推奨される習慣になっています。またrel="preload"リンク種別で、ブラウザーが対応するファイルタイプのみダウンロードさせるためにも使用します。
標準外の属性
廃止された属性
charset非推奨;この属性は、リンク先のリソースの文字エンコーディングを定義します。この値はRFC 2045 で定義されている文字セットの、空白またはカンマで区切られたリストです。既定値は
iso-8859-1です。メモ:この廃止された属性と同じ効果を生み出すためには、リンク先のリソースで HTTP の
Content-Typeヘッダーを使用してください。rev非推奨;この属性の値は、
href属性で定義したリンク先文書に対する、現在の文書の関係を示します。従って、この属性はrel属性の値と比べたときに逆向きの関係を定義します。この属性向けのリンク種別の値は、rel向けの値と似ています。
例
スタイルシートの読み込み
ページにスタイルシートを読み込むには、以下の構文を使用します。
<link href="style.css" rel="stylesheet" />代替スタイルシートの提供
代替スタイルシートも提示できます。
ユーザーはメニューの表示 > スタイルシート で、使用するスタイルシートを選択できます。これは、ユーザーがページをさまざまなバージョンで閲覧する手段を提供します。
<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 の値をヒントとして使用し、特定の場面で最適に動作する一つを選択するようにすることができます。
<!-- 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 属性で指定することができます。このリソースはメディア条件が真の場合にのみ読み込まれます。
<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 イベントを確認することで、スタイルシートを処理する際のエラー発生を検出できます。
<link rel="stylesheet" href="mystylesheet.css" />const stylesheet = document.getElementById("my-stylesheet");stylesheet.onload = () => { // 何か興味深いことをする。シートが読み込まれた。};stylesheet.onerror = () => { console.log("スタイルシートの読み込みでエラーが発生しました。");};メモ:load イベントはスタイルシートとスタイルシートがインポートするすべてのコンテンツの読み込みと解析が行われた後、スタイルシートがコンテンツに適用される直前に発生します。
先読みの例
<link rel="preload"> の例は、rel="preload" によるコンテンツの先読みにいくつかあります。
リソースが読み込まれるまで描画をブロック
render トークンをblocking 属性に設定することができます。指定すると、リソースが取り込まれるまでページのレンダリングがブロックされます。
<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ヘッダー