CSS導入方法

CSSスタイルをHTMLドキュメントに導入する方法は3つあります：インラインスタイル、内部スタイル、外部スタイルです。それぞれの方法には適したユースケースがあります。

✅ ベストプラクティス： 本番環境では、外部スタイルシート（<link>）を使用することをお勧めします。HTMLとCSSを完全に分離し、ブラウザがCSSファイルをキャッシュできるため、複数のページで共有すると読み込み速度が向上します。

1. インラインスタイル

インラインスタイルは、HTMLタグのstyle属性に直接CSSを記述します。

サンプル

HTML

<p style="color: red; font-size: 18px;">このテキストは赤で18ピクセルです</p>

<div style="width: 200px; height: 100px; background: blue;">
  これは青いボックスです
</div>

▶ 試してみよう

特徴：

現在の要素にのみ影響
最も高い優先順位（他の方法で定義されたスタイルを上書き）
再利用できず、大規模な使用には不適
簡単なテストや一時的な調整に適

ユースケース： ほとんど使用されません。JavaScriptによる動的なスタイル変更が必要なシナリオで使用されることがあります。

2. 内部スタイル

内部スタイルは、HTMLドキュメントの<head>タグ内に<style>タグで囲んでCSSを記述します。

サンプル

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>内部スタイルのサンプル</title>
  <style>
    p {
      color: red;
      font-size: 16px;
    }
    h1 {
      color: blue;
      text-align: center;
    }
    .highlight {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <h1>見出し</h1>
  <p>段落テキスト</p>
  <p>このテキストにはハイライト背景があります</p>
</body>
</html>

▶ 試してみよう

特徴：

スタイルは現在のページ内で再利用可能（複数の要素が共有可能）
構造とスタイルが同じファイル内にあり、単一ページの管理に便利
他のページはこれらのスタイルを共有できない
単一ページプロジェクトや学習演習に適

3. 外部スタイル（外部スタイルシート）

外部スタイルは、別個の.cssファイルにCSSを記述し、<link>タグを使用してHTMLに読み込みます。実際の開発で最もよく使用される方法です。

HTMLファイル：

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>外部スタイルのサンプル</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <p>このテキストのスタイルは外部CSSファイルから来ています</p>
</body>
</html>

style.cssファイル：

CSS

p {
  color: red;
  font-size: 16px;
  line-height: 1.8;
}

特徴：

構造とスタイルの完全な分離
1つのCSSファイルを複数のページで共有可能
1つのCSSファイルを変更すると、それを参照するすべてのページに影響
ブラウザはCSSファイルをキャッシュでき、読み込み速度が向上
これはエンタープライズ開発の標準プラクティス

@import方法（参考程度に）

⚠️ 注意： @importはCSSファイルの読み込み完了後に参照ファイルを読み込むため、ページに「スタイルなしコンテンツのフラッシュ」が発生します。この方法は現代のプロジェクトではほぼ廃止されており、<link>に置き換えられています。

<link>タグの他に、CSSファイル内で@importを使用して他のCSSファイルをインポートすることもできます：

サンプル

HTML

<style>
@import url("reset.css");
@import url("layout.css");

p {
  color: red;
}
</style>
<p>これは段落のサンプルです。</p>

▶ 試してみよう

しかし、この方法は<link>タグよりもパフォーマンスが劣るため、推奨されません。

3つの方法の比較

機能	インラインスタイル	内部スタイル	外部スタイル
再利用性	再利用不可	単一ページ内で再利用	複数ページで共有
構造/スタイル分離	❌ 完全に混在	✅ 分離済み（同じファイル内）	✅ 完全に分離
優先順位	最も高い	中程度	最も低い
読み込みパフォーマンス	追加リクエストなし	追加リクエストなし	追加のHTTPリクエストが必要
推奨レベル	⭐	⭐⭐	⭐⭐⭐⭐⭐

優先順位ルール

3つの方法が同時に出現する場合、優先順位ルールは：

インラインスタイル > 内部スタイル > 外部スタイル

注意：これは導入方法の優先順位であり、セレクターの詳細度ではありません。セレクターの詳細度は「同じ導入方法内」で比較され、導入方法の優先順位は異なる方法のスタイルが競合する場合にのみ考慮されます。

❓ よくある質問

Q 3つのCSS導入方法はそれぞれどのようなシナリオに適していますか？

A 外部スタイルシートは本番環境の標準です（複数のページが1つの.cssファイルを共有し、ブラウザのキャッシュで高速）。内部スタイルは単一ページアプリケーションやホームページのファーストビューのスタイルに適しています。インラインスタイルは一時的なデバッグにのみ推奨され、正式なプロジェクトでは多用しないでください。

Q linkと@importの違いは何ですか？

A linkはHTMLタグで、@importはCSS構文です。linkはHTMLと同時に読み込まれますが、@importはCSSファイルの読み込み完了後に参照ファイルを読み込むため、遅くなります。linkが推奨される方法です。

Q インラインスタイルが最も高い優先順位を持ちますか？

A インラインスタイルは確かに非常に高い優先順位を持ちますが、`!important`で上書きできます。スタイル管理にはセレクターの詳細度を使用することをお勧めし、!importantに依存しないでください。さもないと、後でメンテナンスが困難になります。

📖 まとめ

3つの導入方法にはそれぞれ目的がある：インラインスタイルはほとんど使用されないが最も高い優先順位を持ち、内部スタイルは小さな単一ページプロジェクトに適し、外部スタイルは実際の開発の主流選択肢
1つの原則を覚えておこう：可能な限り外部スタイルシートを使用し、コードの再利用性とメンテナンス性を最大化する
実際の作業では、<link>タグで1つ以上のCSSファイルを読み込むプロジェクトをよく見かける

📝 演習

HTMLファイルを作成し、インライン、内部、外部の3つの方法で異なるスタイルを設定してください。
外部のstyle.cssファイルを作成し、段落の色と見出しスタイルを定義してから、HTMLに読み込んでください。
同じ要素に3つの方法すべてを使用して同じプロパティ（colorなど）を設定し、どれが有効かを観察して、優先順位ルールを検証してください。
style.cssファイルの色を変更し、ブラウザを更新して変更を確認し、外部スタイルのメンテナンスの利便性を体験してください。