<link> - リンク
トップ >
HTMLリファレンス >
<link>
概要
説明
<link> は、href 属性で指定した文書を参照します。<head>~</head>の間に記述し、いろいろな目的で使用されます。
属性
【共通属性】
【重要属性】
- rel=rel
- LS/H2/e3/Ch/Fx/Sa/Op/N4
- この文書から見た参照先の文書との関係を指定します。stylesheet(スタイルシート)、fontdef(フォント定義ファイル)、Contents(目次)、Index(索引)、Glossay(用語集)、Copyright(著作権情報)、Next(次の文書)、Prev(前の文書)、Parent(上位の文書)、Help(ヘルプ)、Bookmark(ブックマーク)などがあります。
- rev=rel
- H5.1/H2-H4
- 参照先の文書から見たこの文書との関係を指定します。HTML5 で一度廃止されましたが、RDFa 対応の目的で HTML 5.1 で復活しました。HTML Living Standard では採用されていません。
- href=url
- LS/H2/e3/Ch/Fx/Sa/Op/N4
- 文書のURLを指定します。
【セキュリティ関連】
- integrity=xxx
- LS
- サブリソースの改竄チェックで用いられるインテグリティメタデータを指定します。
- crossorigin=state
- LS/H5
- CORS(Cross-Origin Resource Sharing)で使用される属性で、他のサイトのリソースにアクセスする際に、認証情報を使用するかどうかを指定します。
- referrerpolicy=policy
- LS/H5.2/Ch46/Fx50
- リソースにアクセスした際のリファラー(Referer)送信ポリシーを指定します。
- no-referrer
- 送信しない。
- no-referrer-when-downgrade
- https から http にダウングレードする際には送信しない(デフォルト)。
- same-origin
- 同一オリジン間移動の場合のみ送信する。
- origin
- オリジン情報(プロトコル+FQDN+ポート番号)のみを送信する。
- strict-origin
- オリジン情報(プロトコル+FQDN+ポート番号)のみを送信するが、ダウングレード時には送信しない。
- origin-when-cross-origin
- オリジンをまたがる場合は、オリジン情報のみを送信する。
- strict-origin-when-cross-origin
- オリジンをまたがる場合は、オリジン情報のみを送信するが、ダウングレード時には送信しない。
- unsafe-url
- 常に送信する。
詳細は下記を参照してください。
https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Referrer-Policy
- nonce=nonce
- LS/H5.2
- CPS(Content Security Policy)チェックで用いられるワンタイムトークンを指定します。HTML Living Standard では、グローバル属性として定義されています。詳細は nonce 属性を参照してください。
【その他属性】
- hreflang=lang
- LS/H4
- 参照先の文書の言語を指定します。
- media=media
- LS/H4/e4
- 文書の出力先を指定します。
- screen
- 通常の画面に出力します。
- print
- 印刷プレビュー画面に出力します。
- all
- 全出力先に出力します。
- sizes=n
- LS/H5
- rel="icon" の際のアイコンサイズを sizes="16x16" のように指定します。sizes="16x16 32x32" のように複数指定することも可能です。
- type=type
- LS/H4/e3/N4
- 参照先の文書のタイプを指定します。
- as=type
- LS
- <link rel="preload"> で、プリロードするコンテンツのタイプを指定します。タイプには fetch, audio, audioworklet, document, embed, font, image, manifest, object, paintworklet, report, script, serviceworker, sharedworker, style, track, video, worker, xslt などを指定します。
- color=color
- LS
- <link rel="mask-icon"> でページをピン止めする際に使用されるアイコンの色を指定します。
【廃止済みの属性】
- charset=charset
- [非推奨] H4-4
- 参照先の文書のキャラクタセット(Shift_Jisなど)を指定します。HTML5 には定義されていません。
- methods=methods
- [非推奨] H2-4
- HTML2.0で定義されていましたが、現在は使用されていません。
- target=target
- [非推奨] H4T-4T
- 表示ターゲットを指定します。
- urn=url
- [非推奨] H2-4
- HTML2.0で定義されていましたが、現在は使用されていません。
- disabled
- [非推奨] e4
- この<link>タグを無効化します。
- src=url
- [非推奨] N4
- hrefと同じ意味を持ちます。
外部スタイルシート
外部スタイルシートを指定します。詳細は「CSSリファレンス」を参照してください。
HTML
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
:
</body>
</html>
外部スタイルシートファイルには例えば次のように記述しておきます。これにより、すべての h1 要素の色を赤くすることができます。
CSS
H1 { color: red }
代替スタイルシート
Firefox では代替スタイルシートをサポートしています。下記の様に記述しておくことで、Firefox ブラウザの [表示]-[スタイルシート] メニューから、閲覧者が好みのスタイルシートを選択することができます。
HTML
<link href="normal.css" rel="stylesheet" type="text/css" title="標準スタイル">
<link href="red.css" rel="alternate stylesheet" type="text/css" title="赤系スタイル">
<link href="blue.css" rel="alternate stylesheet" type="text/css" title="青系スタイル">
他文書との関連
例えば、ブラウザの実装によっては、以下のようなリンクタグを解釈して、ツールバーにナビゲーションボタンを表示するものもあるかもしれません。
HTML
<link rel="index" href="index.html">
<link rel="contents" href="content.html">
<link rel="prev" href="chapter1.html">
<link rel="next" href="chapter3.html">
プリロード
rel="preload" を用いて、JavaScript, CSS, イメージファイルなどをプリロードできるようになりました。
HTML
<link rel="preload" as="javascript" href="sample.js">
<link rel="preload" as="stylesheet" href="sample.css">
<link rel="preload" as="image" href="sample.jpg">
お気に入りアイコン(Favicon)
お気に入りやブックマークに登録した際のアイコンを指定することができます。Chrome, Firefox, Edge, Opera, Safari はすべての形式をサポートしていますが、IE はバージョンによってサポートする形式が異なります。
HTML
<link rel="shortcut icon" href="/icon/favicon.ico"> // IE1~
<link rel="icon" type="image/x-icon" href="/icon/favicon.ico"> // IE9~
<link rel="icon" href="/icon/favicon.ico"> // IE11~
<link rel="icon" type="image/png" href="/icon/favicon.png"> // IE11~
<link rel="icon" type="image/gif" href="/icon/favicon.gif"> // IE11~
<link rel="icon" type="image/png" href="/icon/favicon-16.png" sizes="16x16"> // IE11~
<link rel="icon" type="image/png" href="/icon/favicon-32.png" sizes="32x32"> // IE11~
ピン止めアイコン
rel="mask-icon" を用いて、ページをブラウザにピン止めする際に使用するアイコンを指定することができます。画像は、黒一色と透過色のみの正方形の SVG ファイルで、color 属性により色を指定します。Safari 9 などがサポートしています。
HTML
<link rel="mask-icon" color="red" href="/icon/sample.svg">
ダイナミックフォント
Netscape Communicator 4.* では、ダイナミックフォントの技術で、フォントファイル(*.pfr)をサーバーからダウンロードする機能をサポートしていました。
HTML
<link rel="fontdef" src="xxfont.pfr">
JSS(JavaScript Style Sheet)
Netscape Communicator 4.* では、CSS の他にも JavaScript の文法でスタイルを記述する JSS(JavaScript Style Sheet)をサポートしていました。
HTML
<link rel="stylesheet" type="text/javascript" href="xxx.jss">
リンク
Copyright (C) 1996-2017 杜甫々
初版:1996年9月10日 最終更新:2017年12月31日
http://www.tohoho-web.com/html/link.htm