link 要素

概要

HTML <link> 要素は、現在の文書と外部のリソースとの関係を明示します。考えられる要素として、ナビゲーションのための関係構造の定義があります。この要素は、スタイルシートをリンクするためにもっとも使用されます。

• コンテンツカテゴリ メタデータコンテンツ。itemprop 属性を与えた場合: フローコンテンツ、フレージングコンテンツ。
• 許可された内容 なし。これは空要素です。
• タグの省略 空要素であるため開始タグは必須であり、終了タグは置いてはいけません。
• 許可された親要素 メタデータ要素を受け入れるすべての要素。itemprop 属性を与えた場合: フレージングコンテンツを受け入れるすべての要素。
• DOM インターフェイス HTMLLinkElement

属性

他のすべての要素と同様に、この要素はグローバル属性を持ちます。

charset

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

使用上の注意: この属性は HTML5 で廃止されており、ページ作者が使用してはいけません。この属性と同じ効果を得るには、リンク先のリソースで Content-Type: HTTP ヘッダを使用してください。

crossorigin HTML5

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

anonymous

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

use-credentials

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

この属性が提供されない場合、リソースは CORS 要求なしで取得され (Origin: HTTP ヘッダを送信せずに取得)、<canvas> 要素での汚染されない使用が妨げられます。これが無効な場合、列挙型のキーワードに anonymous が指定されたものとして扱われます。追加の情報は CORS 設定属性を参照してください。

disabled

この属性は、リンクの関係を無効化するために使用します。スクリプトと連携して、さまざまなスタイルシートの関係を有効化・無効化するためにこの属性を使用できます。

注記: HTML 標準に disabled 属性は存在しませんが、HTMLLinkElement DOM オブジェクトに disabled 属性が存在します。

HTML の属性として disabled を使用することは非標準であり、一部のブラウザにしか使用されません。この属性は使用しないでください。。同様の効果を得るには、以下の手法のいずれかを使用してください:

• ページ上の要素に disabled 属性が直接追加されている場合は、<link> 要素を含めないようにしてください。
• スクリプトで、StyleSheet DOM オブジェクトの disabled プロパティ を設定してください。

href

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

hreflang

この属性は、リンク先のリソースの言語を示します。これは単なる助言です。許容される値は、HTML5 向けは BCP47 で、HTML4 向けは RFC1766 で定めています。この属性は、href 属性が提供されている場合にのみ使用します。

media

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

使用上の注意:

• HTML 4 では、単純なホワイトスペースで区切られたメディアリテラルのリストのみ記述できます。これはメディアタイプとグループで、print、screen、aural、braille などの使用可能な値が定義されています。HTML5 ではこれがあらゆるメディアクエリに拡張され、HTML 4 で使用できる値の上位互換となっています。
• CSS3 メディアクエリをサポートしていないブラウザは、必ずしもリンクを適切に理解するとは限りません。フォールバックリンクを設定することを忘れないでください。制限されたメディアクエリのセットは、HTML 4 で定義されています。

methods

この属性の値は、オブジェクト上で動作する関数についての情報を提供します。この値は基本的に HTTP プロトコルが利用されたときに与えられますが、(title 属性と同じような理由で) リンク先の情報を前もって含めるときに役立ちます。例えば定義されたメソッドの機能によって、異なるリンクの描画をブラウザが選択します。検索可能なリンクで異なるアイコンを取得したり、外部リンクには現在のサイトから去ることを示す描画にしたりできます。この属性は、定義された Internet Explorer 4 ですら、あまり理解されておらずサポートもされていません。Methods プロパティ (MSDN) をご覧ください。

rel

この属性は現在の文書に対する、リンクされた文書の関係を示します。属性値は、空白で区切られたリンクタイプ値のリストでなければなりません。この属性のもっとも一般的な使用法は、外部スタイルシートへのリンクを明示することです。 rel 属性に stylesheet を設定して、href 属性にページを整形する外部スタイルシートの URL を設定します。WebTV は一連の文書の次のページをプリロードするために、rel で値 next の使用もサポートしています。

rev

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

使用上の注意: この属性は HTML5 で廃止されました。この属性は使用しないでください。同じ効果を得るには、逆の意味のリンクタイプ値を与えた rel 属性を使用してください。例えば made は author に置き換えます。また、この属性はリビジョン (revision) を表すものではなくバージョン番号を指定してはいけませんが、残念ながら多くのサイトでそのように使用されています。

sizes HTML5

この属性は、リソースに含まれる映像メディア向けのアイコンのサイズを定義します。これは、rel が icon リンクタイプ値である場合にのみ与えなければなりません。以下の値を指定できます:

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

使用上の注意:

• ほとんどのアイコン形式は 1 個のアイコンのみ保存可能です。よってほとんどの場合、sizes はエントリが 1 個だけになります。主要なブラウザの中では Apple の ICNS 形式のみが複数のアイコンを収容でき、また WebKit だけがこの形式をサポートします。
• Apple の iOS はこの属性をサポートしていないため、Apple の iPhone および iPad は Web Clip やスタートアッププレースホルダとして使用するアイコンを定義するための、特殊な非標準のリンクタイプ値を使用します。それは apple-touch-icon および apple-touch-startup-icon です。

target

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

type

この属性は、リンク先コンテンツの種類を定義します。この属性の値は text/html や text/css などの MIME type にします。この属性の一般的な使用法はリンクしたスタイルシートの種類の定義であり、現在もっとも一般的な値は text/css です。これはカスケーディングスタイルシート形式を示します。

例

スタイルシートのインクルード

ページにスタイルシートをインクルードするには、以下の構文を使用します:

<link href="style.css" rel="stylesheet" type="text/css" media="all">

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

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

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

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

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

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

<script>
function sheetLoaded() {
  // Do something interesting; the sheet has been loaded
}

function sheetError() {
  alert("An error occurred loading the stylesheet!");
}
</script>

<link rel="stylesheet" href="mystylesheet.css" type="text/css" onload="sheetLoaded()" onerror="sheetError()">

注記

• <link> タグは head 要素内にのみ置けます。ただし、<link> は複数置くことができます。
• HTML 3.2 では link 要素の属性として href、rel、rev、title のみ定義しています。
• HTML 2 では <link> 要素の属性として href、methods、rel、rev、title、urn のみ定義しています。methods 属性および urn 属性は、後に仕様から削除されました。
• HTML および XHTML の仕様では <link> 要素向けのイベントハンドラを定義していますが、それらがどのように使用されるかは不明確です。
• XHTML 1.0 では <link> のような空要素で、末尾のスラッシュが必要です: <link />

仕様

ブラウザ実装状況

関連情報

• Ryan Grove's <script> and <link> node event compatibility chart