Close
<link>タグは、文書から外部リソースにリンクする際に使用します。
外部リソースとは、スタイルシートを記述した外部CSSファイルなど、その文書に関連する何らかのリソース（手助けとなる資源）です。
link要素の基本的な使い方は、href属性によって外部リソースのアドレスをURLで指定して、
rel属性によって文書と外部リソースとの関係をキーワードで指定します。
rel属性の値に指定できるキーワードには、スタイルシートであることを表す「stylesheet」や、アイコンであることを表す「icon」などが定義されています。
さらに、media属性によって外部リソースがどのメディアに適用されるかをキーワードで指定します。
media属性の値に指定できるキーワードには、ディスプレイを表す「screen」や、印刷を表す「print」などが定義されています。
media属性が省略された場合のデフォルトは「all」で、外部リソースがすべてのメディアに適用されうることを意味します。
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ファイルのスタイル指定はすべて有効となります。
それらはそれぞれ別の外部リソースとしてカウントされ、それぞれが独自の属性の影響を受けます。
以下は、メディアタイプとして定義されていますが、非推奨となっています。
可能ならば、使用を避けた方が良いでしょう。
以下のサンプルでは、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要素には、少なくともhref属性かimagesrcset属性のどちらかが必要です。
どちらも存在しないlink要素は、リンクを定義しません。
link要素には、rel属性かitemprop属性のどちらかを含める必要がありますが、両方を含めることはできません。
link要素のitemprop属性には、その要素に関するマイクロデータ（詳細情報）を指定します。
これは、検索エンジンのクローラーなどに詳細情報を提供することで、文書内容を解析しやすくすることを目的としています。
どのカジノが自分に最適か分からないですか?