CSSの使い分け完全ガイド：外部・内部・インラインスタイルの違いと使い分け
山崎講師
こんにちは。ゆうせいです。
ご質問ありがとうございます！
「CSSの使い分け」について、とても良いポイントを押さえていますね。
ただ、細かいところで少し整理すると、より正確な理解になります。ここでわかりやすく、段階を踏んで解説していきます！
CSSの3つの書き方の違いとは？
CSS（Cascading Style Sheets）は、大きく分けて以下の3種類の書き方があります：
| 種類 | 書く場所 | 対象範囲 | 主な用途 |
|---|---|---|---|
| 外部スタイルシート（external） | 別ファイル（例：style.css） | 複数のHTMLページに共通 | サイト全体の一貫性を保つため |
| 内部スタイルシート（internal） | <head>タグ内の<style>に記述 | その1ページ内のみ | そのページだけで使いたいスタイル |
| インラインスタイル（inline） | 各HTMLタグのstyle属性 | そのタグのみに適用 | 特定の1箇所だけにスタイルをつけたいとき |
それぞれの特徴と使い分けをもう少し詳しく見ていきましょう。
外部スタイルシート：共通スタイルの司令塔
特徴
- HTMLとは別の
.cssファイルに記述 <link rel="stylesheet" href="style.css">のように読み込む- 全ページに共通のスタイルを適用できる
例え
外部スタイルシートは、制服のようなもの。学校全体で服装ルールを統一するのと同じ感覚です。
メリット
- サイト全体のデザインを一括で管理できる
- メンテナンス性が高い
デメリット
- 読み込みに1ファイル分の通信が必要
内部スタイルシート：ページごとのルール帳
特徴
- HTMLの
<head>内に<style>タグで直接記述
<head>
<style>
h1 { color: red; }
</style>
</head>例え
ページごとのルール帳。たとえば、「今日は体育祭だから体操服OK」といったその日限定のルールのようなものです。
メリット
- そのページだけの特別なデザインをすぐに書ける
- 外部ファイル不要なので簡易的
デメリット
- 他のページでは使えない
- スタイルがHTML内にあるため少し見にくくなる
インラインスタイル：ピンポイントの指定
特徴
- HTMLタグの中に直接
style属性を指定
<p style="color: blue;">こんにちは</p>
例え
これは「今日のために特別な靴下だけ履いていいよ」という一時的な個別ルールみたいなものです。
メリット
- 素早く個別対応できる
- テスト用に便利
デメリット
- 他のタグに使い回せない
- スタイルとHTMLが混在して読みにくくなる
- 保守性が非常に悪い（最も避けるべき）
優先順位のルール：どれが勝つ？
CSSには「カスケーディング（cascade）」という名前のとおり、優先順位があります。
優先順位（高い順）：
- インラインスタイル
- 内部スタイルシート
- 外部スタイルシート
ただし、!importantが付いていれば最強になりますが、これを多用すると保守性が落ちるので注意。
実務ではどう使い分ける？
- 共通スタイルは外部CSSで定義する（サイト全体の見た目を統一）
- ページ単位のカスタマイズが必要なら内部CSS
- 一時的な修正・実験など、やむを得ないときにだけインラインCSS
まとめ
つまり、ご質問の理解を少し言い換えると：
- 外部スタイル：全体の共通デザインを担う
<head>内の内部スタイル：特定ページのみに適用- HTMLタグ内のインラインスタイル：その要素にだけ適用（例外的に使用）
次のステップ：CSS設計の考え方へ！
CSSの書き方を覚えたら、次はCSS設計（BEMやOOCSSなど）に進んでみましょう。
「なぜクラス名をこんなふうにするのか？」など、よりプロっぽい構造の理解につながります。
他にも、
- CSSの変数（カスタムプロパティ）
- Sassなどのプリプロセッサ
- レスポンシブ対応
など、学ぶべきことはたくさんあります。順に進めていきましょう！
セイ・コンサルティング・グループの新人エンジニア研修のメニューへのリンク
投稿者プロフィール
- 代表取締役
-
セイ・コンサルティング・グループ株式会社代表取締役。
岐阜県出身。
2000年創業、2004年会社設立。
IT企業向け人材育成研修歴業界歴20年以上。
すべての無駄を省いた費用対効果の高い「筋肉質」な研修を提供します！
この記事に間違い等ありましたらぜひお知らせください。
