linkタグ -外部リソースを関連付ける｜HTML辞典
<link>タグとは？
<link>タグは、HTML文書に外部リソース（CSSファイル、ファビコン、フォントなど）を関連付けるためのタグです。
特に CSS（スタイルシート）の読み込みに使用される ことが多く、ページのデザインを適用するために必須のタグです。
基本情報
コンテンツモデル
メタデータコンテンツ（Metadata Content）
ページの設定情報を提供し、主に <head> 内に記述されます。
閉じタグの有無
<link>は開始タグのみで閉じタグは不要な「空要素」です。
HTML5では <link> は 自己閉じタグ（<link />）を省略可能 ですが、XHTMLでは <link /> のように記述する必要があります。
基本的な記述方法
<link>タグは 必ず <head> 内に記述 し、ページに外部リソースを適用します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>サンプルページ</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>こんにちは、世界！</h1>
</body>
</html>ポイント：
rel="stylesheet"を指定すると、外部CSSファイルを読み込める。href="styles.css"は適用するCSSファイルのパスを指定。<head>内に記述することで、ページのレンダリング時にCSSが適用される。
使用できる主な属性
<link>タグは、属性を指定することでさまざまな用途に対応可能 です。
| 属性名 | 説明 | 例 |
|---|---|---|
rel | リンクの種類を指定 | <link rel="stylesheet" href="styles.css"> |
href | リンク先のURLを指定 | <link href="favicon.ico" rel="icon"> |
type | ファイルのMIMEタイプを指定（省略可） | <link rel="stylesheet" type="text/css" href="styles.css"> |
media | CSSの適用範囲（デバイス）を指定 | <link rel="stylesheet" media="screen" href="styles.css"> |
sizes | アイコンのサイズを指定 | <link rel="icon" sizes="32x32" href="favicon.ico"> |
主要な用途と記述例
✅ 外部CSSを読み込む（最も一般的な用途）
<link rel="stylesheet" href="styles.css">ポイント:
rel="stylesheet"を指定しないとCSSが適用されない ので注意。media="screen"を指定すると、特定のデバイス向けに適用可能。
✅ ファビコン（ページアイコン）を設定する
<link rel="icon" href="favicon.ico" type="image/x-icon">ポイント:
rel="icon"を指定すると、ブラウザのタブに表示されるアイコンが設定される。sizes="32x32"などを指定すると、異なるサイズのアイコンを適用可能。
✅ Googleフォントなどの外部フォントを読み込む
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">ポイント:
- Google FontsなどのWebフォントを簡単に適用できる。
hrefに指定したURLからフォントが読み込まれる。
✅ RSSフィードを設定する
<link rel="alternate" type="application/rss+xml" title="RSS" href="feed.xml">ポイント:
rel="alternate"を指定すると、RSSリーダーなどで購読可能になる。
使用上の注意点
✅ CSSの読み込み順に注意する
- 複数のCSSファイルを読み込む場合、上に書かれたものが優先される。
- 後から読み込まれたCSSが前のスタイルを上書きする可能性があるため、順番を意識することが重要。
✅ rel="icon" を設定しないと、デフォルトのアイコンになる
- ファビコンを設定しない場合、ブラウザが「デフォルトアイコン」を使用するため、ブランドの統一感を出したい場合は必ず設定する。
✅ media 属性を適切に活用する
- スタイルシートを異なるデバイス向けに適用することで、適切なデザインを提供できる。
<link rel="stylesheet" media="screen and (max-width: 600px)" href="mobile.css">→ スマホ画面のみに適用されるスタイルシート。
関連タグ
まとめ
<link>タグは、HTML文書に外部ファイル（CSS、ファビコン、フォントなど）を関連付けるために使用される重要なタグ です。
特に rel="stylesheet" を使ったCSSの適用や rel="icon" を使ったファビコンの設定は基本 となります。
適切に活用することで、デザインの管理やユーザー体験の向上に役立ちます。
