May 2nd,2015
＃
要素について
| カテゴリー | メタデータ・コンテンツ |
“body”要素に配置できる場合、フロー・コンテンツ、フレージング・コンテンツ |
|
| 利用場所 | 本文参照 |
| 内容 | 空 |
| タグの省略 | 終了タグはありません |
“link”要素はリンクを生成して文書を他の外部リソースや他の文書と関連付ける要素です。
外部スタイルシートの読み込みにもっともよく使用されますが、“rel”属性の値によってウェブページのアイコンの指定や先行して読み込むべき外部リソースの指定などさまざまな役割があります。
関連付けられる外部リソースは“href”属性もしくは“imagesrcset”属性によって指定されます。
サンプルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="alternate" hreflang="en" href="en/banana.html">
<link rel="icon" href="image/favicon.ico">
<meta name="robots" content="index,follow">
<meta name="keywords" content="バナナ,栄養素,産地">
<meta name="description" content="黄色くて栄養満点な果物であるバナナについて解説します。">
<link rel="stylesheet" href="css/stylesheet-sp.css" media="( max-width: 640px )">
<link rel="stylesheet" href="css/stylesheet-tab.css" media="( min-width: 640px ) and ( max-width: 1280px )">
<link rel="stylesheet" href="css/stylesheet-pc.css" media="( min-width: 1280px )">
<title>黄色いフルーツバナナ - 果物を食べる</title>
</head>
<body>
...
＃
属性と値
| 属性 | 値 | ||
|---|---|---|---|
| 属性 | 説明 | 値 | 説明 |
| 必須属性(いずれか一つ) | |||
| rel="" | 文書と外部リソースの関係 | alternate | リンク先は現在の文書の代替文書 |
author |
リンク先は著者情報 | ||
canonical |
リンク先が類似する文書の中で最も推奨される文書 | ||
| dns-prefetch |
リンク先のDNSによる名前解決を事前に行う | ||
| help | リンク先は詳細なヘルプを提供する文書 | ||
| icon |
リンク先は現在の文書を表すアイコン | ||
| license |
リンク先はライセンス情報を説明する文書 | ||
| manifest |
リンク先はウェブアプリマニフェスト | ||
| modulepreload |
リンク先のモジュールスクリプトを先行して読み込む | ||
| next | リンク先は一連の文書の中で現在の文書の次の文書 | ||
| pingback |
リンク先は現在の文書のピンバックを扱うピンバックサーバー | ||
| preconnect |
リンク先への接続を事前に確立する | ||
| prefetch |
リンク先を事前に取得する | ||
| preload |
リンク先を先行して読み込む | ||
| prev | リンク先は一連の文書の中で現在の文書の前の文書 | ||
| search |
リンク先現在の文書と関連する文書内を検索するための機能 | ||
| stylesheet | リンク先は現在の文書に適用する外部スタイルシート | ||
| リンクタイプ | その他のリンクタイプ | ||
| itemprop="" |
マイクロデータのプロパティ名を指定する | プロパティ名 | “itemtype”属性で指定された定義に基づくプロパティ名 |
| 必須属性(少なくとも一つ) | |||
| href="" | 文書と関連付ける外部リソース | URL | 文書と関連付ける外部リソースのURL |
| imagesrcset="" |
使用可能な画像ファイルのセット | URL 画像の横幅w,URL 画像の横幅w,... | ビューポートの幅ごとの表示する画像のURL |
| URL デバイスピクセル比x,URL デバイスピクセル比x,... | デバイスピクセル比ごとの表示する画像のURL | ||
| 任意属性 | |||
| グローバル属性 | |||
| crossorigin="" |
外部リソースを読み込む時のCORSリクエストを設定 | anonymous | CORSリクエストを実行するが、SSL証明書、HTTP認証などの認証情報は使用しない |
| use-credentials | CORSリクエストを実行し、SSL証明書、HTTP認証などの認証情報を使用する | ||
| media="" | 外部リソースが対象とするメディア | メディアクエリ | 外部リソースが対象とするメディア条件 |
| integrity="" |
外部リソースの整合性を確認 | ハッシュ値 | BASE64でエンコードした外部リソースのハッシュ値 |
| hreflang="" | 外部リソースが記述されている言語 | 言語コード | 外部リソースが記述されている言語 |
| type="" | 外部リソースのデータの種類 | MIMEタイプ | 外部リソースのMIMEタイプ |
| referrerpolicy="" |
リファラーポリシーを指定 | リファラーポリシー | リファラーポリシーを指定 |
| sizes="" |
アイコンのサイズ | any | サイズの調整が可能 |
| 横幅x高さ | アイコンのサイズのピクセル数 | ||
| imagesizes="" |
画像を表示するサイズ | 長さ | 【“imagesrcset”属性を幅記述子(“w”)で指定した時】画像の表示サイズの横幅 |
| メディアクエリ 長さ,メディアクエリ 長さ,...,長さ | 【“imagesrcset”属性を幅記述子(“w”)で指定した時】メディア条件ごとの画像の表示サイズの横幅 | ||
| as="" |
先行して読み込む外部リソースの利用先 | audio | “audio”要素で埋め込まれる音声ファイル |
| video | “video”要素で埋め込まれる動画ファイル | ||
| track | “track”要素で埋め込まれる動画ファイル | ||
| script | “script”要素などで埋め込まれる外部スクリプト | ||
| style | “link”要素で読み込まれるスタイルシート | ||
| font | “@font-face”ルールで読み込まれるフォントファイル | ||
| image | “picture”要素や“img”要素で埋め込まれる画像ファイル | ||
| embed | “embed”要素で埋め込めれるリソース | ||
| object | “object”要素で埋め込めれるリソース | ||
| document | “frame”要素や“iframe”要素で埋め込まれるHTML文書 | ||
| リクエストデスティネーション | “Fetch”仕様書に定義されたキーワード | ||
| fetch | フェッチまたはXHR要求でアクセスされるリソース | ||
| blocking="" |
外部リソースの読み込み時に妨げるべき処理を示す | render | レンダリングを妨げる |
| color="" |
Safariのページピンアイコンの色を指定 | 色 | CSSの“<color>”値 |
| disabled="" |
外部スタイルシートへのリンクの無効化 | disabled | 外部スタイルシートへのリンクの無効化 |
| fetchpriority="" |
外部リソースの読み込み時の優先度を指定する | high | 同じ種類の外部リソースと比較して取得の優先度が高いことを示す |
| low | 同じ種類の外部リソースと比較して取得の優先度が低いことを示す | ||
| auto | 同じ種類の外部リソースと比較時の優先度を自動的に判断すべきであることを示す | ||
| title="" | 【“rel”属性の値に“stylesheet”を含む時】代替スタイルシートの名前 | テキスト | 代替スタイルシートの名前 |
| 【“rel”属性の値に“stylesheet”を含まない時】外部リソースに補足情報を付ける | テキスト | 補足情報 | |
“rel”属性とマイクロデータ属性の“itemprop”属性のうちいずれか一つが必須です。ただし、これらの属性を同時に指定することはできません。
“href”属性と“imagesrcset”属性のいずれか、もしくは両方を指定しなければなりません。
“rel”属性の値に“preload”が指定されている場合は“as”属性は必須属性です。
一部の属性は“rel”属性に特定の値が指定されている場合にのみ指定することができます。
グローバル属性の“title”属性は“rel”属性の値に“stylesheet”が指定された“link”要素に指定した場合は他の要素に指定した場合と意味合いが異なります。
過去に定義されていた属性
| 属性 | 値 | ||
|---|---|---|---|
| 属性 | 説明 | 値 | 説明 |
charset="" |
外部リソースの文字エンコーディング | 文字エンコーディング | 外部リソースの文字エンコーディング |
| rev="" |
リンク先から見た現在の文書との関係 | リンクタイプ | リンク先から見た現在の文書との関係 |
| nonce="" |
コンテンツセキュリティポリシーのためのワンタイムトークン | ワンタイムトークン | 自動生成したBASE64でエンコードされた暗号 |
| scope="" |
Service Workerが対象とするスコープURL | URL | Service Workerが対象とするスコープURL |
| usecache="" |
Service Workerがキャッシュを使用できるようにする | usecache | Service Workerがキャッシュを使用できるようにする |
| workertype="" |
Service workerの種類 | classic | モジュールスクリプトでない |
| module | モジュールスクリプト | ||
＃
利用場所
通常“link”要素を配置できる場所は以下の2箇所です。
- メタデータ・コンテンツが置ける場所
- “head”要素の中にある“noscript”要素の子要素として
ただし、“rel”属性の値が“body-ok”な値のみである場合、もしくはマイクロデータ属性の“itemprop”属性が指定されている場合は“link”要素をフレージング・コンテンツが置ける場所にも配置することができます。
＃
＃
仕様書
“link”要素はHTML2.0から定義されている要素です。現行の仕様であるHTML Living Standardでも定義されています。
定義されている仕様書
 |
 |
 |
 |
  |
|
|---|---|---|---|---|---|
| <link> |   |
|
|
|
|
| alternate | |
|
|
|
|
| author |   |
|
|
|
|
| canonical | |
|
|
|
|
| dns-prefetch | |
|
|
|
|
| help | |
|
|
|
|
| icon | |
|
|
|
|
| license | |
|
|
|
|
| manifest | |
|
|
|
|
| modulepreload | |
|
|
|
|
| next | |
|
|
|
|
| pingback | |
|
|
|
|
| preconnect | |
|
|
|
|
| prefetch | |
|
 |
|
|
| preload | |
|
|
|
|
| prerender | |
|
|
|
|
| prev | |
|
|
|
|
| search | |
|
|
|
|
| serviceworker | |
|
|
|
|
| stylesheet | |
|
|
|
|
DOMインターフェース
[Exposed=Window]
interface HTMLLinkElement : HTMLElement {
[HTMLConstructor] constructor();
[CEReactions] attribute USVString href;
[CEReactions] attribute DOMString? crossOrigin;
[CEReactions] attribute DOMString rel;
[CEReactions] attribute DOMString as;
[SameObject, PutForwards=value] readonly attribute DOMTokenList relList;
[CEReactions] attribute DOMString media;
[CEReactions] attribute DOMString integrity;
[CEReactions] attribute DOMString hreflang;
[CEReactions] attribute DOMString type;
[SameObject, PutForwards=value] readonly attribute DOMTokenList sizes;
[CEReactions] attribute USVString imageSrcset;
[CEReactions] attribute DOMString imageSizes;
[CEReactions] attribute DOMString referrerPolicy;
[SameObject, PutForwards=value] readonly attribute DOMTokenList blocking;
[CEReactions] attribute boolean disabled;
[CEReactions] attribute DOMString fetchPriority;
// also has obsolete members
};
HTMLLinkElement includes LinkStyle;
UAスタイルシート
@namespace url(http://www.w3.org/1999/xhtml);
link {
display: none;
}
