link 要素文書を他の外部リソースと関連付ける

link 要素は文書を他の外部リソースと関連付けます。

外部スタイルシートを読み込む目的で利用されるケースはおなじみですが、スタイルシートだけでなく、外部リソースと文書を関連付けることができます。対応しているブラウザでは、この link 要素を使用してナビゲーションリンクを表示したりすることもできます。

さらに詳細な説明を見る

サンプルソースを見る

link 要素の仕様

カテゴリ
コンテンツモデル
この要素を使用できる文脈
  • head 要素の子要素である noscript 要素の子要素として
  • メタデータ・コンテンツが期待される場所
  • itemprop 属性が付与された場合はフロー・コンテンツ、またはフレージング・コンテンツが期待される場所
この要素で使用できる属性

この要素に対して使用される title 属性は、特別な意味をもちます。

DOM インタフェース
interface HTMLLinkElement : HTMLElement {
  attribute DOMString href;
  attribute DOMString? crossOrigin;
  attribute DOMString rel;
  attribute DOMString rev;
  [SameObject, PutForwards=value]readonly attribute DOMTokenList relList;
  attribute DOMString media;
  attribute DOMString hreflang;
  attribute DOMString type;
  [SameObject, PutForwards=value] readonly attribute DOMTokenList sizes;
};
HTMLLinkElement implements LinkStyle;

詳細説明

link 要素に指定できる属性

属性 概要
href 属性 リンク先の URI を指定します。
rel 属性 現在の文書からみた、リンク先となるリソースの位置づけを指定します。
rev 属性 rel 属性とは逆に、参照されるリソースから見た、現在の文書の位置づけを指定します。
media 属性 リンク先の外部リソースが、どのメディアに適用するのかを指定します。
hreflang 属性 リンク先文書の記述言語を指定します。
type 属性 リンク先の MIME タイプを指定します。
sizes 属性 関連付けられた画像ファイルなどのサイズを指定します。
crossorigin 属性 crossorigin 属性は CORS (Cross-Origin Resource Sharing / クロスドメイン通信) 設定属性です。サードパーティ (元の文書とは異なるオリジン) から読み込んだ画像などのリソースを利用する際のルールを指定します。

link 要素によるスタイルシートの読み込み

link 要素に rel="stylesheet" を指定することでスタイルシートファイルと文書を関連付けることができますが、この際、rel属性値に alternate stylesheet 値と、title 属性によって名前を与えることで、閲覧者によって切り替え可能な代替スタイルシートを提供することができます。

固定 / 優先 / 代替スタイルシート

文書に読み込まれるスタイルシートには 3種類の優先順位があります。通常は title 属性を付与せずに読み込まれる固定スタイルシートです。下記のように読み込みます。

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

これに対して title 属性を付与すると、そのスタイルシートは優先スタイルシートとして扱われます。下記のように 3つのスタイルシートを文書内で読み込むと、1行目の固定スタイルシートは通常通り読み込まれますが、2行目、3行目の優先スタイルシートは、先に記述された 「スタイル01」 だけが読み込まれることになります。

<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="style01.css" title="スタイル01" />
<link rel="stylesheet" href="style02.css" title="スタイル02" />

さらに、代替スタイルシートは閲覧者が選択できるスタイルとして提供されます。rel属性値に alternate stylesheet 値を与え、title 属性をあわせて指定します。

<link rel="stylesheet" href="style.css" />
<link rel="alternate stylesheet" href="style01.css" title="スタイル01" />
<link rel="alternate stylesheet" href="style02.css" title="スタイル02" />

これにより、閲覧者は、ブラウザのメニューなどから、「スタイル01」、「スタイル02」 という代替スタイルを選択することができるようになります。

また、同じ title 属性値を持った優先スタイルシート、代替スタイルシートはグループとして扱われますので、下記のように記述した場合、初期状態で固定スタイルシートと優先スタイルシートのうち 「スタイル01」 が読み込まれ、閲覧者が代替スタイルシート 「スタイル02」 を選択すると、代替スタイルシート 「スタイル02」 と優先スタイルシート 「スタイル02」 が、優先スタイルシート 「スタイル01」 に替わって読み込まれることになります。

<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="style01.css" title="スタイル01" />
<link rel="stylesheet" href="style02.css" title="スタイル02" />
<link rel="alternate stylesheet" href="alt-style02.css" title="スタイル02" />

ただし、この仕組みに対応していないブラウザにおいては、優先スタイルシートがすべて初期状態で読み込まれてしまったりと、意図しない動作になる場合がありますので注意が必要です。

link 要素のサンプルソース

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>サンプル</title>
  <link rel="stylesheet" href="css/style.css" />
  <link rel="alternate" type="application/rss+xml" title="フィード" href="feed/" />
  <link rel="apple-touch-icon" href="img/apple-touch-icon.png" />
  <link rel="author" href="author.html" />
  <link rel="icon" type="image/png" href="img/favicon.png" />
  <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" />
  <link rel="next" title="次の記事" href="new.html" />
  <link rel="prev" title="前の記事" href="old.html" />
 </head>
 <body>

関連する要素

W3C HTML5 仕様書

4.2.4. The link element