外部CSS・内部CSS・インラインCSSの違いと使い分け

外部CSS・内部CSS・インラインCSSの違いと使い分け

外部CSS・内部CSS・インラインCSSの違いと使い分け

Webページにスタイルを適用するには、主に3つの方法があります：外部スタイルシート、内部スタイルシート、インラインスタイル。それぞれの違いやメリット・デメリット、使い分けのポイントを解説します。

外部スタイルシート（External CSS）

CSSを別ファイル（.css）にして、HTMLから読み込む方法です。

書き方例：

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

メリット：

  • 複数ページでCSSを共有できる
  • HTMLがスッキリして読みやすい
  • メンテナンス性が高い

デメリット：

  • CSSファイルの読み込みに時間がかかる（初回アクセス時）
  • ファイルが分かれているため初心者にはやや分かりづらい

内部スタイルシート（Internal CSS）

HTMLファイル内の<head>タグに<style>として記述する方法です。

書き方例：

HTML
<head>
  <style>
    body {
      background-color: #f0f0f0;
    }
  </style>
</head>

メリット：

  • ファイルが1つで完結する
  • 素早く簡単にスタイルを試せる

デメリット：

  • 他ページとCSSを共有できない
  • HTMLファイルが煩雑になりやすい

インラインスタイル（Inline CSS）

HTMLタグ内のstyle属性に直接書き込む方法です。

書き方例：

HTML
<p style="color: red; font-size: 16px;">赤い文字です</p>

赤い文字です

メリット：

  • 1つの要素だけにすぐスタイルを適用できる
  • 手軽に確認・テストができる

デメリット：

  • HTMLがごちゃごちゃになりやすい
  • メンテナンスが難しくなる
  • 再利用性がない

3つの使い分けのポイント

  • サイト全体で一貫したスタイルを管理したい → 外部CSSがベスト
  • 1ページのみの小規模なプロジェクト → 内部CSSが手軽
  • 1つの要素だけに一時的にスタイルをつけたい → インラインCSS

まとめ

  • 外部CSS：本番向けで推奨。複数ページに対応
  • 内部CSS：学習用・簡易用途に適している
  • インラインCSS：簡易的な調整や一時的な変更に

CSSの適用方法を理解して、効率よく美しいWebページを作成しましょう。

PAGE TOP