<link>タグの解説
<link>は、参照中のドキュメントとは別の場所に置かれた、外部ファイルを読み込むために使用します。
スタイルシートやJavaScriptなど、個別に管理されたソースを再利用する祭に有効です。またファビコンやスマートフォンなどのタブレット型の端末向けに用意したアイコンを読み込むために使われます。
<link>タグの特徴
- この要素は可視化されないため、レイアウトには影響を与えません。
- この要素は空要素です。開始タグのあとに終了タグを記述する必要はありません。
- 読み込ませるファイルに応じて、
rel属性の値を最適にして下さい。
<link>要素に指定できる属性
href- 参照するファイルへのURLを指定します。絶対パス、相対パスの両方が使えます。
rel- 参照するソースのリンク種別を指定します。この値には以下のようなものが入ります。
stylesheet：外部スタイルシートicon：ファビコン・アイコンalternate：代替となる文書archives：アーカイブauthor：作者の説明help：ヘルプlicense：ライセンスに関する文書bookmark：ブックマークnext：次の文書prev：前の文書
asrel属性の値が"preload"または"prefetch"だった場合に、読み込まれるコンテンツのタイプを指定します。crossorigin- リソースの取得に関するCORSリクエストの仕方を定義します。CORSとは「Cross Origin Resource Sharing」の略で、別のドメインに置かれたリソースの扱いに関する内容です。この属性が与えられた場合、その画像ファイルを読み込む時にCORSリクエストが送信されます。
disabledrel属性の値が"stylesheet"の場合に、この属性が設定されていると、リンク先のスタイルシートは読み込まれず、画面には反映されません。この値が削除された時点で、要求に応じてスタイルが反映されます。hreflangrel属性の値が"href"の場合に、リンク先のソースの言語を示します。imagesrcset<img>や<picture>で使用する画像のファイルセットを、先読みする祭に指定します。この属性はrel属性の値が"preload"かつas属性の値が"image"の場合に機能します。imagesizesimagesrcset属性で先読みさせるファイルセットに対する適切な表示サイズを指定します。この属性はrel属性の値が"preload"かつas属性の値が"image"の場合に機能します。この値は、該当する要素のsizes属性の値と一致させます。media- リンク先のソースに適用されるメディアタイプを指定します。
sizes- 呼び出されるソースに含まれるアイコンのサイズを指定します。この属性は
rel属性の値が"icon"や"apple-touch-icon"の場合に有効となります。 title- 外部のスタイルシートを読み込む祭に、スタイルシートのグループ名を指定したい場合に使用します。代替スタイルシートを用意し、状況に応じて切り替えたい場合に有効な手段となります。この属性は
rel属性の値が"stylesheet"の場合に機能します。 type- リンク先のMIMEタイプを指定します。
<link>要素の使い方とサンプルコード
この要素の最も基本的な書き方は以下の通りです。<link>要素はメタデータ・コンテンツを受け入れる要素の子要素として配置できます。通常、それは<head>の中になります。
<head>
<link href="filename" rel="value">
</head>
このタグが最も多く使用されるケースは、スタイルシートとファビコンの読み込みです。次のような記述は世界中の多くのウェブサイトで見ることができます。実際によく使うサイトのソースコードを開いて、ファイルのどの場所に記述されているか確認してみましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>サンプルページ</title>
<link rel="stylesheet" href="/style/main.css">
<link rel="icon" href="/images/favicon.ico">
<link rel="next" href="003.html">
<link rel="prev" href="001.html">
</head>
<body>
<h1>コンテンツの見出し</h1>
<p>段落を現す内容。</p>
<div>
<a href="003.html">次のページ</a>
<a href="001.html">前のページ</a>
</div>
</body>
</html>
余談ですが、ファビコンを呼び出すために指定されていたrel属性の"shortcut icon"という記述は非推奨となりました。現在はshortcutを除外して"icon"と記述するだけで問題ありません。
/* 古い書き方 */
<link rel="shortcut icon" href="/images/favicon.ico">
/* 正しい書き方 */
<link rel="icon" href="/images/favicon.ico">