お問い合わせ
お問い合わせ
ホーム > HTML > HTMLのlinkタグの使い方まとめ｜外部ファイルを読み込む基本

HTMLのlinkタグの使い方まとめ｜外部ファイルを読み込む基本

HTML
HTMLのlinkタグの使い方を解説する図解：CSSやfaviconなど外部ファイルを読み込む方法のイメージ
HTMLの<link>タグを使って、CSS・favicon・Google Fontsなどの外部ファイルを読み込む基本を解説する図解。Web制作の基礎として必須の知識です。

はじめに

HTMLの<link>タグは、外部リソースをHTMLに読み込むためのタグです。特にCSSファイルの読み込みに使われることが多く、Web制作に欠かせない基礎知識です。この記事では、<link>タグの基本構文から、実際の使い方、SEO・パフォーマンスへの影響までを詳しく解説します。

<link>タグの基本構文

<link rel="stylesheet" href="style.css">

各属性の意味

属性名内容
relHTML文書と外部リソースの関係（例：stylesheet）
href読み込む外部ファイルのURLまたはパス
typeMIMEタイプ（例：text/css）※省略可
media適用するメディアタイプ（例：screen, printなど）

💡 ポイント：

<link>タグはHTMLの<head>内に記述します。複数のCSSファイルを読み込む場合も、基本的には上から順に読み込まれます。

CSSファイルを読み込む例

<head>
  <link rel="stylesheet" href="reset.css">
  <link rel="stylesheet" href="style.css">
</head>

上記のように、リセットCSS → メインCSSの順で読み込むのが一般的です。
（参考：▶ CSSの基本プロパティ解説）

faviconを設定する例

Webサイトのタブやブックマークに表示される**サイトアイコン（favicon）**も、<link>タグで設定します。

<link rel="icon" href="/images/favicon.ico" type="image/x-icon">

💡 PNG形式の場合：

<link rel="icon" href="/images/favicon.png" type="image/png">

（参考：▶ HTMLのhead要素の使い方まとめ）

Google Fontsなど外部リソースの読み込み

Webフォントやライブラリを読み込む際にも<link>タグを使用します。

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">

これで、CSS内で以下のようにフォントを指定できます。

body {
  font-family: 'Noto Sans JP', sans-serif;
}

（参考：▶ HTMLで日本語フォントを指定する方法）

media属性を使って条件付きで読み込む

印刷専用CSSなどを読み込むときに便利なのがmedia属性です。

<link rel="stylesheet" href="print.css" media="print">

これにより、印刷時のみこのCSSが適用されます。

（参考：▶ CSSでメディアクエリを使う方法）

preload・prefetchで読み込みを最適化

ページ表示を高速化したい場合は、rel="preload"やrel="prefetch"を利用します。

<link rel="preload" href="main.css" as="style" onload="this.rel='stylesheet'">
  • preload：すぐ使うリソースを先に読み込む
  • prefetch：次のページなど後で使うリソースを先読みする

（参考：▶ SEOに強い記事構造の作り方）

<link>タグと@importの違い

CSSを読み込む方法には、<link>以外に@importもあります。
しかし、@importは読み込み速度が遅くなるため、現在は基本的に<link>を使うのが推奨です。

比較項目<link>@import
読み込み速度速い遅い
推奨度高い低い
使う場所HTML内CSS内

（参考：▶ CSSで外部リソースを読み込む方法）

まとめ

ポイント内容
①<link>タグは主にCSS・favicon・フォントを読み込むために使用
②rel・href・mediaの3つは特に重要
③ページ速度・SEOのためにpreloadも活用
④@importより<link>が推奨

関連記事