link

外部リソースへのリンク

機能

link 要素は、HTML ドキュメントと外部リソース（例えば、スタイルシートやアイコン）を関連付けるために使用されます。通常、head セクション内に配置され、ページのスタイルやメタデータを設定するために使用されます。

よく設定する属性（attribute）と値

rel

リンク先のリソースとの関係を指定します。例: rel=“stylesheet”（スタイルシートを指定）

href

リンク先の URL を指定します。例: href=“styles.css”

type

リンク先のリソースの MIME タイプを指定します。例: type=“text/css”

media

リンク先のスタイルシートが適用されるメディアタイプを指定します。例: media=“screen”（スクリーン用）

sizes

アイコンのサイズを指定します。
例: sizes=“16x16”（複数のサイズを指定する場合は、カンマで区切ります）

title

リンク先のリソースのタイトルを指定します。例: title=“Main Stylesheet”

使い方

例１

この例では、link 要素を使用して外部スタイルシート（styles.css）を HTML ドキュメントに関連付けています。

<head>
  <meta charset="UTF-8" />
  <title>Example Page</title>
  <link rel="stylesheet" href="styles.css" />
</head>

例２

この例では、以下のようにスタイルシートが切り替わります：

styles.css: 通常のスクリーン表示用
print.css: 印刷時に適用されるスタイルシート
mobile.css: 画面幅が 600 ピクセル以下の場合に適用されるスタイルシート

ブラウザは、media 属性の条件に基づいて適切なスタイルシートを自動的に適用します。これにより、異なるデバイスや状況に応じて最適な表示を提供することができます。

<head>
  <meta charset="UTF-8" />
  <title>Responsive Page</title>
  <link rel="stylesheet" href="styles.css" media="screen" />
  <link rel="stylesheet" href="print.css" media="print" />
  <link rel="stylesheet" href="mobile.css" media="(max-width: 600px)" />
</head>

例 3

"https://www.example.com/favicon.ico"というURLから16x16ピクセルのファビコンを設定しています。

<head>
  <meta charset="UTF-8" />
  <title>Example Page</title>
  <link rel="icon" href="https://www.example.com/favicon.ico" sizes="16x16" />
</head>