外部CSS・内部CSS・インラインCSSの違いと使い分け｜読み込み方と読み込まれないときの対処法
2025.07.14
CSSをHTMLに適用する方法は、外部CSS・内部CSS・インラインCSSの3つです。どれを使っても見た目は指定できますが、管理のしやすさや優先順位が違うため、場面に合わせて使い分けます。
この記事では、3つの書き方の違いと使い分けに加えて、外部CSSを読み込むときのパス（ファイルの場所）の書き方、3つを同時に使ったときの優先順位、CSSが読み込まれないときの確認ポイント、WordPressでのCSSの読み込み方までを解説します。
CSSを書く3つの方法の違い
| 外部CSS | 内部CSS | インラインCSS | |
|---|---|---|---|
| 書く場所 | 別の .css ファイル | HTMLの <style> の中 | HTMLのタグの style 属性 |
| 複数のページで共有 | できる | できない | できない |
メディアクエリ・:hover | 書ける | 書ける | 書けない |
| 優先度 | 同じ強さのセレクタなら、後に書いたほうが優先 | 最も強い | |
| 向いている場面 | 通常のWebサイト制作 | 1ページだけのページ、試しに書くとき | HTMLメールなど、ほかの方法が使えないとき |
迷ったら外部CSSを使ってください。CSSの基本の書き方は「CSSとは？HTMLとの違いと基本の書き方」で解説しています。
外部CSS：CSSファイルを読み込む
CSSを .css という拡張子の別ファイルに書き、HTMLの <head> の中で <link> を使って読み込みます。
<head>
<meta charset="UTF-8">
<title>ページのタイトル</title>
<link rel="stylesheet" href="css/style.css">
</head>rel="stylesheet"：読み込むファイルがスタイルシートであることを示します。書き忘れると、CSSは適用されません。href：CSSファイルの場所（パス）を書きます。
サイトのすべてのページで同じCSSファイルを読み込めば、ファイルを1つ書き換えるだけで、全ページのデザインをまとめて変えられます。一度読み込んだCSSファイルはブラウザに保存（キャッシュ）されるので、2ページ目以降の表示も速くなります。
hrefに書くパスの書き方
href のパスは、そのHTMLファイルがある場所から見た位置で書きます。次のようなフォルダ構成で考えてみましょう。
（サイトのいちばん上の階層）
├── index.html
├── css/
│ └── style.css
├── img/
│ └── logo.png
└── about/
└── index.html| HTMLファイル | hrefの書き方 | 意味 |
|---|---|---|
index.html | css/style.css | 同じ階層にある css フォルダの中 |
about/index.html | ../css/style.css | 1つ上の階層（../）に戻ってから css フォルダの中 |
| どこからでも | /css/style.css | サイトのいちばん上の階層から見た場所（ルートからの絶対パス） |
about/index.html に css/style.css と書くと、ブラウザは about/css/style.css を探しに行き、ファイルが見つからずにCSSが適用されません。階層の違うページが多いサイトでは、/ から始まる絶対パスで書くと、どのページでも同じ書き方で済みます。ただし、/ から始まるパスは、パソコンのファイルを直接ブラウザで開いたときには正しく働かないので、サーバーにアップロードしてから確認してください。
なお、CSSファイルの中で画像を指定する url() のパスは、CSSファイルがある場所から見た位置で書きます。上の構成で css/style.css から img/logo.png を使う場合は、url('../img/logo.png') です。HTMLファイルの場所ではない点に注意してください。
複数のCSSファイルを読み込む
<link> を並べれば、複数のCSSファイルを読み込めます。同じ強さのセレクタで同じプロパティを指定している場合は、後に読み込んだファイルの指定が優先されます。サイト共通のCSSを先に、ページごとのCSSを後に読み込むと、ページごとの調整がしやすくなります。
<link rel="stylesheet" href="/css/common.css">
<link rel="stylesheet" href="/css/about.css">@importは使わない
CSSファイルの先頭に @import url('base.css'); と書いて、別のCSSファイルを読み込む方法もあります。ただし、ブラウザは最初のCSSファイルを読み込んでから、次のファイルを読み込み始めるため、表示が遅くなります。複数のCSSファイルを読み込むときは、HTMLに <link> を並べて書きましょう。
内部CSS：HTMLの中に書く
HTMLの <head> の中に <style> を書き、その中にCSSを書きます。書き方はCSSファイルと同じです。
<head>
<style>
body {
background-color: #f0f0f0;
}
@media (max-width: 767px) {
body {
font-size: 14px;
}
}
</style>
</head>HTMLファイル1つで完結するので、試しにCSSを書いてみるときや、ほかのページと共通部分が無い1ページだけのページに向いています。一方、ほかのページとは共有できないので、複数のページで同じ指定を書くと、修正のたびに全ページを直すことになります。
インラインCSS：タグに直接書く
HTMLのタグに style 属性を付け、その中にプロパティと値を書きます。セレクタと { } は書きません。
<p style="color: red; font-size: 16px;">赤い文字です</p>赤い文字です
インラインCSSには、次のような制限があります。
- メディアクエリや
:hoverが書けない：画面幅に合わせた切り替えや、マウスを重ねたときの変化は指定できません。 - 再利用できない：同じ見た目にしたい要素すべてに、同じ指定を書く必要があります。
- 優先度が最も高い：外部CSSや内部CSSから上書きするには
!importantが必要になり、後から管理しにくくなります。
HTMLメールは、メールソフトによって <style> が無視されることがあるため、インラインCSSで書くのが一般的です。通常のWebページでは、JavaScriptで要素の位置を動かすときなど、限られた場面でだけ使います。
3つを同時に使ったときの優先順位
同じ要素に、外部CSS・内部CSS・インラインCSSで違う指定をした場合、次のように決まります。
- インラインCSSが最も優先される：外部CSSや内部CSSで何を指定していても、
!importantが無ければインラインCSSが使われます。 - 外部CSSと内部CSSは、後に書いたほうが優先される：「外部だから強い」「内部だから強い」ということはありません。HTMLの中で、
<link>と<style>のどちらが後にあるかで決まります（セレクタの強さが同じ場合）。
<head>
<style>
.text { color: red; }
</style>
<!-- style.css に .text { color: blue; } と書かれている -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<p class="text">青になる（後に読み込んだ style.css が優先）</p>
<p class="text" style="color: orange;">オレンジになる（インラインが優先）</p>
</body>セレクタの強さ（詳細度）が違う場合は、書いた順番より強さが優先されます。優先順位のしくみは「CSSとは？」の「カスケードと優先順位のしくみ」で詳しく解説しています。
CSSが読み込まれないときの確認ポイント
デベロッパーツールで読み込みを確かめる
まず、CSSファイルが読み込めているかを確かめます。Chromeでページを開き、F12キー（Macは Command＋Option＋I）でデベロッパーツールを開きます。「Network」タブを選んでページを再読み込みし、一覧からCSSファイルを探してください。「Status」が404になっていれば、パスが間違っていてファイルが見つかっていません。一覧にCSSファイル自体が無ければ、<link> の書き方を見直します。
よくある原因
- パスが間違っている：HTMLファイルの場所から見たパスになっているか確認します。階層の違うページで、同じ相対パスを使い回していないかも確認してください。
rel="stylesheet"が無い：<link href="style.css">だけでは、CSSとして適用されません。- ファイル名の大文字・小文字が違う：多くのレンタルサーバー（Linux）では、
Style.cssとstyle.cssは別のファイルとして扱われます。Windowsのパソコンでは区別されないので、手元では表示されたのに、アップロードすると読み込まれない、ということが起こります。 - ブラウザのキャッシュ：CSSファイルを書き換えても、ブラウザが保存していた古いファイルを使うことがあります。スーパーリロード（Windowsは Ctrl＋F5、Macは Command＋Shift＋R）で読み込み直してください。公開中のサイトでは、
style.css?v=2のようにファイル名の後ろに番号を付け、更新のたびに番号を変えると、訪問者のブラウザにも新しいファイルが読み込まれます。 - CSSは読み込めているが、指定が効いていない：「Network」で問題が無い場合は、別の指定に上書きされている可能性があります。「Elements」タブで要素を選び、右側の「Styles」で、取り消し線が付いている指定が無いか確認してください。
WordPressでCSSを読み込む
管理画面の「追加CSS」を使う
少しだけCSSを足したい場合は、管理画面の「外観」→「カスタマイズ」→「追加CSS」に書くのが手軽です（ブロックテーマでは、サイトエディターの「スタイル」から追加CSSを開きます）。テーマを更新しても消えません。
functions.phpでCSSファイルを読み込む
自作のテーマや子テーマでCSSファイルを読み込む場合は、テーマの header.php に <link> を直接書くのではなく、functions.php で wp_enqueue_style を使います。プラグインのCSSとの読み込み順をWordPressが管理してくれます。
function mytheme_enqueue_styles() {
wp_enqueue_style(
'mytheme-custom', // 識別用の名前
get_theme_file_uri('css/custom.css'), // CSSファイルのURL
array(), // 先に読み込むCSS（無ければ空）
'1.0' // バージョン（?ver= として付く）
);
}
add_action('wp_enqueue_scripts', 'mytheme_enqueue_styles');CSSを書き換えたときは、4つ目のバージョンの値を変えると、訪問者のブラウザのキャッシュが更新されます。
まとめ：3つの使い分け
- 外部CSS：通常はこれを使う。
hrefのパスは、HTMLファイルの場所から見た位置で書く - 内部CSS：試しに書くときや、1ページだけのページに使う
- インラインCSS：HTMLメールなど、ほかの方法が使えないときに限る
- 優先順位はインラインCSSが最も高く、外部CSSと内部CSSは後に書いたほうが優先される
- 読み込まれないときは、デベロッパーツールの「Network」で404になっていないか確かめる
<link> の media 属性を使って、印刷用など条件付きでCSSファイルを適用する方法は「メディアクエリの書き方」、よく使うプロパティは「CSSプロパティ一覧」で解説しています。
