お問い合わせ
お問い合わせ
ホーム > CSS > CSSで外部リソースを読み込む方法｜@importとlinkの使い分けを徹底解説

CSSで外部リソースを読み込む方法｜@importとlinkの使い分けを徹底解説

CSS
CSSで外部リソースを読み込む方法を解説する図解（linkタグと@importの違い）
CSSを外部ファイルとして読み込む2つの方法「link」と「@import」を比較解説。正しい使い分けを覚えて、読み込み速度と管理性を向上させよう。

はじめに

Web制作では、CSSを外部ファイルとして読み込むことで、スタイルを効率的に管理できます。
この記事では、<link>タグと**@importルール**の使い方と違いを徹底的に解説します。
初心者がつまずきやすいポイントも整理して、読み込み方法の基礎を完璧に理解しましょう。

1. CSSを外部リソースとして読み込むメリット

HTML内に直接スタイルを書く「内部CSS」ではなく、外部ファイルを読み込むことで次のような利点があります。

  • 複数ページでCSSを共通化できる
  • 保守性・再利用性が高い
  • キャッシュが利用でき、表示速度が向上する

👉関連記事：

  1. HTMLとCSSの使い方まとめ｜初心者向け基礎ガイド
  2. HTMLのlinkタグの使い方まとめ｜外部ファイルを読み込む基本

2. <link>タグを使ったCSSの読み込み方法

HTMLの<head>内に以下のように記述します。

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

ポイント：

  • rel="stylesheet" … スタイルシートを指定
  • href="style.css" … ファイルパスを指定
  • HTMLの読み込みと同時にCSSも取得されるため、表示速度が速い

3. @importを使ったCSSの読み込み方法

CSSファイルの先頭などに以下を記述します。

@import url("reset.css");
@import url("layout.css");

特徴：

  • CSSファイル内で別のCSSを呼び出す方法
  • HTMLではなくCSS側で管理できる
  • ただし、読み込み速度が遅くなるため非推奨とされるケースもあります

👉関連記事：

4. <link>と@importの違い

比較項目<link>@import
記述場所HTMLの<head>内CSSファイル内
読み込みタイミングHTMLと同時CSS解析後（遅い）
メディアクエリ対応可能（例：media="print"）可能
推奨度◎（標準的）△（限定的）

結論：

通常は<link>を使用するのがベスト。
@importは他のCSSを分割管理する場合など、特殊な用途に限られます。

5. 外部フォント・リセットCSSの読み込み例

Google Fontsの読み込み

HTML
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">
CSS
body {
  font-family: 'Noto Sans JP', sans-serif;
}
👉関連記事：

リセットCSS（例：normalize.css）

<link rel="stylesheet" href="https://unpkg.com/modern-css-reset/dist/reset.min.css">
👉関連記事：

6. 読み込みエラー時の対処法

もしスタイルが反映されない場合、次を確認しましょう。

  1. ファイルパス（相対パス/絶対パス）が正しいか
  2. 拡張子やスペルミスがないか
  3. キャッシュを削除して再読み込みしてみる（Ctrl + F5）
  4. HTMLの<head>内に正しく記述されているか

👉関連記事：

7. まとめ

  • 外部CSSの基本は<link>タグ
  • @importは便利だが速度面で注意
  • Google FontsやリセットCSSも外部読み込みで管理可能

外部リソースを正しく使いこなせば、デザインの管理が格段に楽になります。
次は、CSSのレイアウト構築ガイド【Flexboxを使いこなそう】もチェックしてみましょう。