<link> …… 文書から外部リソースにリンクする
広告
<link>タグは、文書から外部リソースにリンクする際に使用します。
外部リソースとは、スタイルシートを記述した外部CSSファイルなど、その文書に関連する何らかのリソース（手助けとなる資源）です。
link要素の基本的な使い方は、href属性によって外部リソースのアドレスをURLで指定して、
rel属性によって文書と外部リソースとの関係をキーワードで指定します。
rel属性の値に指定できるキーワードには、スタイルシートであることを表す「stylesheet」や、アイコンであることを表す「icon」などが定義されています。
さらに、media属性によって外部リソースがどのメディアに適用されるかをキーワードで指定します。
media属性の値に指定できるキーワードには、ディスプレイを表す「screen」や、印刷を表す「print」などが定義されています。
media属性が省略された場合のデフォルトは「all」で、外部リソースがすべてのメディアに適用されうることを意味します。
link要素の終了タグについて
HTMLの仕様では、link要素には終了タグ</link>はありません。
以下は、典型的なlink要素の使用例です。
link要素は、外部CSSファイルの読み込みや、アイコンファイルの読み込みによく使用されます。
apple-touch-iconは標準ではなく拡張機能ですが、
アップル社のサービスなどで使用される場面が多いため重要なキーワードかもしれません。
<!doctype html>
<html>
<head>
<title>link要素の使用例</title>
<link rel="stylesheet" href="/tech/htmls/default.css">
<link rel="stylesheet" href="/tech/htmls/green.css" title="グリーンスタイル">
<link rel="icon" href="/tech/htmls/favicon.ico">
<link rel="apple-touch-icon" href="/tech/htmls/apple-touch-icon.png">
</head>
<body>
<p>link要素のrel属性とhref属性を使って、文書に外部CSSファイルとアイコンファイルを読み込んでいます。</p>
</body>
</html>
link要素は、ひとつの文書内に複数指定できます。
例えば、rel=”stylesheet” を持つ複数のlink要素がある場合、文書からリンクしている複数の外部CSSファイルのスタイル指定はすべて有効となります。
それらはそれぞれ別の外部リソースとしてカウントされ、それぞれが独自の属性の影響を受けます。
- href属性
- 外部リソースのアドレスを有効なURLで指定します。
- crossorigin属性
- 要素が crossoriginリクエストをどのように処理するかを指定します。
- rel属性
-
文書と外部リソースとの関係をキーワードで指定します。
link要素のrel属性に指定できるキーワードは、以下の通りです。
キーワードは、大文字・小文字を区別しません。
キーワードによっては、一般的なブラウザでサポートされていない可能性があります。
- alternate …… 現在のドキュメントの代替表現を提供します。
- canonical …… 現在のドキュメントの優先URLを指定します。
- author …… 現在のドキュメントまたは記事の作成者へのリンクを提供します。
- dns-prefetch …… ユーザーエージェントがターゲットリソースのオリジンに対して、DNS解決を先制的に実行する必要があることを指定します。
- help …… ヘルプへのリンクを提供します。
- icon …… 現在のドキュメントを表すアイコンをインポートします。
- manifest …… アプリケーションマニフェストをインポートまたはリンクします。
- modulepreload …… ユーザーエージェントがモジュールスクリプトを事前に取得して、後で評価できるようにドキュメントのモジュールマップに保存する必要があることを指定します。オプションで、モジュールの依存関係もフェッチできます。
- license …… 現在のドキュメントの主な内容が、参照ドキュメントに記載されている著作権ライセンスの対象であることを示します。
- next …… 現在のドキュメントがシリーズの一部であり、シリーズの次のドキュメントが参照ドキュメントであることを示します。
- pingback …… 現在のドキュメントへのピンバックを処理するピンバックサーバーのアドレスを指定します。
- preconnect …… ユーザーエージェントがターゲットリソースのオリジンに事前に接続する必要があることを指定します。
- prefetch …… フォローアップナビゲーションに必要になる可能性が高いターゲットリソースを、ユーザーエージェントが事前に取得してキャッシュする必要があることを指定します。
- preload …… ユーザーエージェントが、as属性で指定された潜在的な目的地（および対応する目的地に関連付けられた優先度）に従って、現在のナビゲーションのターゲットリソースを事前に取得してキャッシュする必要があることを指定します。
- prev …… 現在のドキュメントがシリーズの一部であり、シリーズの前のドキュメントが参照ドキュメントであることを示します。
- search …… 現在のドキュメントとその関連ページを検索するために使用できるリソースへのリンクを提供します。
- stylesheet …… スタイルシートをインポートします。
- media属性
-
外部リソースがどのメディアに適用されるかをキーワードで指定します。
media属性が省略された場合のデフォルトは「all」で、外部リソースがすべてのメディアに適用されうることを意味します。
- all …… すべてのデバイス（初期値）
- print …… プリンタ、および、「印刷プレビュー」で文書を表示するブラウザなど、
印刷された表示を再現することを目的としたデバイス
- screen …… print で一致しないすべてのデバイス（≒一般的なディスプレイ）
以下は、メディアタイプとして定義されていますが、非推奨となっています。
可能ならば、使用を避けた方が良いでしょう。
- tty …… 固定文字サイズの端末
- tv …… テレビ
- projection …… プロジェクタ
- handheld …… ハンドヘルドデバイス
- braille …… 点字の触角デバイス
- embossed …… 点字プリンタ
- aural …… 音声出力デバイス
- speech …… 読み上げブラウザ
- integrity属性
- サブリソースの整合性チェックで使用される整合性メタデータを指定します。
- hreflang属性
- 外部リソースの言語を指定します。
- type属性
- 外部リソースのMIMEタイプを指定します。
- referrerpolicy属性
- 要素によって開始された取得（フェッチ）のリファラーポリシーを指定します。
- sizes属性
- （rel=”icon” の場合）アイコンのサイズを指定します。
- imagesrcset属性
- （rel=”preload” の場合）高解像度ディスプレイや小型モニターなど、状況によって使い分ける画像セットを指定します。
- imagesizes属性
- （rel=”preload” の場合）異なるページレイアウト向けの画像サイズを指定します。
- as属性
- （rel=”preload” および rel=”modulepreload” の場合）プリロードリクエスト（先読み）のリンク先を指定します。
- blocking属性
- 要素がレンダリングをブロックする可能性があるかどうかを指定します。
- color属性
- （rel=”mask-icon” の場合）サイトのアイコンをカスタマイズするときに使用する色を指定します。
- disabled属性
- リンクが無効になっているかどうかを指定します。
- title属性
- リンクのタイトルを指定します。（link要素のtitle属性を指定すると、CSSスタイルシートのセット名を表します）
以下のサンプルでは、link要素のrel属性の値に「preload」を指定して、適切なリソースをプリロード（先読み）しています。
プリロードされたリソースは、後でimg要素によって使用されます。
link要素のrel属性には、キーワードでリンクのタイプ（関係）を指定します。
preloadは、ユーザーエージェントが外部リソースを事前に取得してキャッシュするように指定しています。
<!-- imagesrcset属性があるのでhref属性は省略しています -->
<link rel="preload" as="image"
imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w"
imagesizes="50vw">
<!-- 後で動的に画像リソースが挿入されます -->
<img src="wolf.jpg" alt="美しい狼"
srcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w"
sizes="50vw">
以下のサンプルでは、link要素のmedia属性とimagesrcset属性を組み合わせて、画面の横幅に応じた適切なリソースをプリロード（先読み）しています。
プリロードされたリソースは、後でpicture要素で画面の横幅に応じて使用されます。
link要素のmedia属性には、外部リソースが適用されるメディアを指定します。
<!-- link要素のmagesrcset属性をmedia属性と組み合わせています -->
<link rel="preload" as="image"
imagesrcset="dog-cropped-1x.jpg, dog-cropped-2x.jpg 2x"
media="(max-width: 800px)">
<link rel="preload" as="image"
imagesrcset="dog-wide-1x.jpg, dog-wide-2x.jpg 2x"
media="(min-width: 801px)">
<!-- 後で動的に画像リソースが挿入されます -->
<picture>
<source srcset="dog-cropped-1x.jpg, dog-cropped-2x.jpg 2x"
media="(max-width: 800px)">
<img src="dog-wide-1x.jpg" srcset="dog-wide-2x.jpg 2x"
alt="すごい犬">
</picture>
以下のサンプルは、type属性にMIMEタイプを指定した例と、type属性によるMIMEタイプ指定を省略した例です。
どちらも誤りではありません。
CSSスタイルシートのデフォルトタイプは text/css ですから、type属性によるMIMEタイプの指定を省略してもスタイルシートは適用されます。
link要素のtype属性には、ユーザー エージェントへのヒントとして
MIMEタイプ（例 text/plain、text/html、text/css、application/pdf、image/bmp、video/ogg など）を指定します。
type属性の値に適切なMIMEタイプを指定しておくことで、外部ファイルの種類が正しく認識されて誤作動が起きにくくなるでしょう。
<link rel="stylesheet" href="/tech/htmls/styleA.css" type="text/css">
<link rel="stylesheet" href="/tech/htmls/styleB.css">
以下のサンプルでは、link要素にdisabled属性を指定することで、デフォルトではスタイルシートの読み込みを無効にしています。
document.querySelector("link").removeAttribute("disabled")
などのコードによってdisabled属性を動的に削除することで代替スタイルシートが適用されます。
link要素のtitle属性には、リンクのタイトルを指定します。
title属性は様々な要素で使用できる汎用的な属性ですが、
link要素のtitle属性にスタイルシートのセット名を指定すると、スタイルの名称としてブラウザなどで利用されることがあります。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<style>
body {background-color:#ccccff;}
</style>
<link disabled rel="alternate stylesheet" href="/tech/htmls/alt1.css" title="代替スタイルシート">
<title>基本スタイルシートと代替スタイルシート</title>
<script>
function buttonClick(){
document.querySelector("link").removeAttribute("disabled");
}
</script>
</head>
<body>
<p>スタイルシートを切り替えることができます。</p>
<input type="button" value="スタイル切替" onclick="buttonClick()">
</body>
</html>
↓↓↓
link要素の属性の使用ルール
link要素には、少なくともhref属性かimagesrcset属性のどちらかが必要です。
どちらも存在しないlink要素は、リンクを定義しません。
link要素には、rel属性かitemprop属性のどちらかを含める必要がありますが、両方を含めることはできません。
link要素のitemprop属性には、その要素に関するマイクロデータ（詳細情報）を指定します。
これは、検索エンジンのクローラーなどに詳細情報を提供することで、文書内容を解析しやすくすることを目的としています。
広告
