実行できるCSSドキュメント: 外部 CSS

Q: 外部 CSS とは何ですか？

外部 CSS は独立した .css ファイルに保存したスタイルシートで、ページの 内に と書いて読み込みます。ファイルを読み込んだすべてのページに同じスタイルが適用され、ブラウザはページ間でファイルをキャッシュします。

Q: 内部 CSS とは何ですか？

内部 CSS (埋め込み CSS とも呼びます) は、HTML 文書の中の 要素に書く CSS です。ふつうは に置きます。そのページだけに適用されます。

Q: CSS ファイルを HTML に読み込むにはどうすればいいですか？

の中に を追加します。href は HTML ファイルからの相対パスなので、css/styles.css は隣にある css フォルダ内のファイルを指し、/styles.css はサイトのルートから始まります。

Q: 外部 CSS が反映されないのはなぜですか？

よくある原因は、href のパスの間違い (Network タブで 404 を確認)、rel="stylesheet" の書き忘れ、.css ファイル内に タグを書いている、後のルールに上書きされている、のいずれかです。スーパーリロードすれば古いキャッシュが原因かどうかを切り分けられます。

外部 CSS を 1 行で

外部 CSS は独立した .css ファイルです。必要なページの <head> から読み込みます:

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

ファイルそのものには CSS のルールだけを書き、HTML タグで囲みません:

/* styles.css */
body {
  font-family: system-ui, sans-serif;
  color: #111827;
}

.card {
  border: 2px solid #2563eb;
  border-radius: 8px;
  padding: 12px 16px;
}

下のプレビューでは 2 つ目のファイルを読み込めないため、同じ CSS を <style> 要素に書いています。これが内部 CSS で、読み込んだファイルとまったく同じように表示されます:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Card</title>
  <!-- On a real site: <link rel="stylesheet" href="styles.css"> -->
  <style>
    body {
      font-family: system-ui, sans-serif;
      color: #111827;
    }

    .card {
      border: 2px solid #2563eb;
      border-radius: 8px;
      padding: 12px 16px;
    }
  </style>
</head>
<body>
  <div class="card">One stylesheet, every page.</div>
</body>
</html>

内部 CSS: style 要素

内部 CSS (埋め込み CSS とも呼びます) はページ内の <style> 要素です。本文が描画される前にスタイルが読まれるよう、<head> に置きます。ページ全体に適用され、ルールではセレクタが使えます。これはインラインの style 属性ではできないことです。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Internal CSS</title>
  <style>
    h1 { color: #2563eb; }
    .tag {
      background: #e5e7eb;
      padding: 2px 8px;
      border-radius: 999px;
    }
    .tag:hover { background: #f59e0b; }
  </style>
</head>
<body>
  <h1>Internal CSS</h1>
  <span class="tag">html</span>
  <span class="tag">css</span>
</body>
</html>

タグにマウスを乗せてみてください。これは本物のルールなので :hover が効きます。3 つ目の方法である style 属性はインライン CSS のページで解説しています。

内部 CSS と外部 CSS の比較

	外部 (`<link>`)	内部 (`<style>`)
書く場所	`.css` ファイル	HTML ページの中
適用範囲	読み込んだすべてのページ	1 ページ
キャッシュ	一度ダウンロードし、ページ間で再利用	ページごとに毎回送られる
サイトの見た目を変えるとき	1 つのファイルを変更	すべてのページを変更
追加のリクエスト	あり (ファイルごとに 1 回)	なし
向いている用途	実際の Web サイト	デモ、1 ページのサイト、HTML メール、クリティカル CSS

詳細度はどちらも同じです。<style> 要素内のルールと、読み込んだファイル内の同じルールの重みはまったく同じです。同点のときは、文書の後に出てくるほうが勝ちます。

順番: 後のスタイルシートが勝つ

スタイルシートは <link> も <style> も文書の順に読まれます。詳細度が同じ 2 つのルールでは、後のルールが勝ちます。下の 2 つの <style> ブロックは、読み込んだファイルと、その後に続くページ単位の上書きの代わりです:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Order</title>
  <style>
    /* first: think of this as styles.css */
    .btn { background: #2563eb; color: white; padding: 8px 14px; border: 0; }
  </style>
  <style>
    /* second: a page override, same selector */
    .btn { background: #16a34a; }
  </style>
</head>
<body>
  <button class="btn">Green: the later rule wins</button>
</body>
</html>

ボタンは 1 つ目のルールの padding と白い文字を保ち、2 つ目からは背景だけを受け取ります。サイト独自のスタイルシートをフレームワークの後に置くのはこのためです。ライブラリを先に <link> し、その後に自分のファイルを読み込みます。

href のファイルパス

<link> の href は URL で、HTML ファイルの場所を基準に解決されます。

href	読み込まれるもの
`styles.css`	ページと同じフォルダのファイル
`css/styles.css`	ページの隣にある `css` フォルダ
`../styles.css`	1 つ上のフォルダ
`/styles.css`	サイトのルートから
`https://example.com/a.css`	別のサーバーの完全な URL

ページが異なる階層にあるサイトでは、ルート相対の形 (/css/styles.css) にすれば、どのページでも 1 つのパスで済みます。

印刷用などメディア別のスタイルシート

media 属性を付けると、スタイルシートを条件に合うときだけに限定できます。<link> と <style> のどちらでも使えます:

<link rel="stylesheet" href="print.css" media="print">
<link rel="stylesheet" href="wide.css" media="(min-width: 900px)">

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Media</title>
  <style>
    .banner { background: #2563eb; color: white; padding: 12px; }
  </style>
  <style media="print">
    /* only when printing: hide the banner */
    .banner { display: none; }
  </style>
</head>
<body>
  <div class="banner">Visible on screen, hidden when printed.</div>
  <p>The article text prints normally.</p>
</body>
</html>

プレビューは画面なのでバナーが表示されます。実際のページではバナーは印刷物から消えます。DevTools でも、印刷メディアタイプをエミュレートすれば同じ結果を確認できます (Rendering パネル)。

よくある間違い

パスの間違い。 href にタイプミスがあると何も読み込まれず、ページはスタイルなしで表示されます。DevTools の Network タブを開き、.css ファイルが 404 になっていないか確認しましょう。
rel="stylesheet" の書き忘れ。 これがないと、<link href="styles.css"> はスタイルシートを読み込みません。
.css ファイルの中に HTML を書く。 .css ファイルに書くのはルールだけです。中に書いた <style> タグは正しい CSS ではなく、隣のルールを壊します。
自分のスタイルシートをフレームワークより前に置く。 詳細度が同じなら後のファイルが勝つので、自分の CSS は最後に読み込みます。
古いバージョンが表示される。 ブラウザはスタイルシートをキャッシュします。スーパーリロードするか、変更をデプロイするときに URL にバージョンを付けましょう (styles.css?v=2)。

よくある質問

外部 CSS とは何ですか？

外部 CSS は独立した .css ファイルに保存したスタイルシートで、ページの <head> 内に <link rel="stylesheet" href="styles.css"> と書いて読み込みます。ファイルを読み込んだすべてのページに同じスタイルが適用され、ブラウザはページ間でファイルをキャッシュします。

内部 CSS とは何ですか？

内部 CSS (埋め込み CSS とも呼びます) は、HTML 文書の中の <style> 要素に書く CSS です。ふつうは <head> に置きます。そのページだけに適用されます。

CSS ファイルを HTML に読み込むにはどうすればいいですか？

<head> の中に <link rel="stylesheet" href="styles.css"> を追加します。href は HTML ファイルからの相対パスなので、css/styles.css は隣にある css フォルダ内のファイルを指し、/styles.css はサイトのルートから始まります。

内部 CSS と外部 CSS はどちらがよいですか？

複数ページがあるなら外部 CSS です。編集するファイルは 1 つで済み、ブラウザは一度ダウンロードしたファイルを再利用します。内部 CSS は 1 ページだけのサイト、デモ、最初のレスポンスに含めたい少量のクリティカルなスタイルに向いています。

外部 CSS が反映されないのはなぜですか？

よくある原因は、href のパスの間違い (Network タブで 404 を確認)、rel="stylesheet" の書き忘れ、.css ファイル内に <style> タグを書いている、後のルールに上書きされている、のいずれかです。スーパーリロードすれば古いキャッシュが原因かどうかを切り分けられます。