link要素

link要素は、ドキュメントと外部リソースを関連付ける要素。

カテゴリー メタデータ・コンテンツ。
コンテキスト メタデータ・コンテンツを内包できる要素内で使用できる。
head要素が親要素であるnoscript要素内で使用できる。
コンテンツ・モデル 空。
属性 グローバル属性。
外部スタイルシートを読み込むlink要素におけるtitle属性は、特別な意味を持つ。
必須：href属性、rel属性。
任意：media属性、hreflang属性、type属性、sizes属性。
ブラウザ対応

要点

  • link要素は、ドキュメントと外部リソースを関連付ける要素である。外部リソースとは、外部スタイルシートやファビコンなどのこと。
  • href属性とrel属性は、必須である。
  • link要素におけるtitle属性は、特別な意味を持つ。

属性

必須属性

属性 説明
href属性 外部リソースのURLを指定する属性。
rel属性 外部リソースとの関連性を指定する属性。

任意属性

属性 説明
type属性 外部リソースのMIMEタイプを指定する属性。
media属性 外部リソースの対象メディアを指定する属性。
hreflang属性 外部リソースの言語コードを指定する属性。
sizes属性 外部リソースのサイズを指定する属性。

グローバル属性

属性 説明
title属性 外部スタイルシートを読み込むlink要素においては、スタイルシートのグループ名という特別な意味を持つ。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
	<head>
		<link href="stylesheet.css" rel="stylesheet" type="text/css">
		<title>ドキュメントのタイトル</title>
	</head>
	<body>
		ドキュメントの内容
	</body>
</html>

サンプル

HTMLソースコード

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8" />
		<link href="sample-link.css" rel="stylesheet" type="text/css">
		<title>link要素のサンプル・ドキュメント</title>
	</head>
	<body>
		<h1>見出し[h1]</h1>
		<article>
			<h2>見出し[H2]</h2>
			<p>記事セクション。</p>
		</article> 
	</body>
</html>

CSSファイル

link要素で読み込む「sample-link.css」の内容。

h1 {
    color: #f00;
}
h2 {
    color: #009900;
}
p {
    color: #4800ff;
}

実際の表示

別窓で表示。