CSSはどこに書く？HTMLでの正しい読み込み順と優先順位のルール

Q: インライン、<style>タグ、外部CSSファイルと書き方が3つありますが、どれを使うのが一番良いですか？

基本的には「外部CSSファイル（.css）」を作成し、HTMLの<head>内で読み込む方法が絶対の推奨ルールです。 外部ファイルに分けることで、HTMLのコードがすっきりして読みやすくなるだけでなく、サイト全体のデザインを1つのファイルで一括管理できるようになり、保守性が向上します。 インラインスタイルや<style>タグは、特定のページや要素だけをピンポイントで上書きしたい「例外的な場面」でのみ使用しましょう。

Q: 複数のCSSファイル（例：reset.css と style.css）を読み込む場合、順番に決まりはありますか？

はい、読み込む順番は非常に重要です。 CSSには「同じ強さの指定なら、後から読み込まれた（下に書かれた）ものが勝つ」という上書きルールがあります。 そのため、ブラウザの標準スタイルを打ち消す「リセットCSS」などのベースとなるファイルを先に読み込み、自分がデザインをカスタマイズする「メインのCSS」を 一番最後（一番下）に読み込む のが正しい順番です。

Q: !importantをつけると優先順位が一番高くなると聞いたのですが、多用しても問題ないですか？

!importantの多用は絶対に避けてください。 これはCSSの優先順位の基本ルールを強制的に破壊する「最終兵器」です。 多用してしまうと、後からデザインを変更したい時に「どこを直してもCSSが全く効かない」という、修正不可能なスパゲッティコードを生み出す原因になります。 どうしても外部のプラグインやシステムの都合で上書きできない場合の「最後の手段」としてのみ使用する癖をつけましょう。

Q: 優先順位も読み込み順も正しいはずなのに、CSSの変更が全く反映されません。

ブラウザの「キャッシュ」が原因である可能性が極めて高いです。 ブラウザはWebページの表示速度を上げるために、過去に読み込んだ古いCSSファイルをパソコン内に一時保存（キャッシュ）して使い回す性質があります。 キーボードの「Ctrl ＋ F5（Macの場合は Cmd ＋ Shift ＋ R）」を同時に押して「スーパーリロード（強制再読み込み）」を行い、最新のCSSファイルを読み込み直してみてください。

2026年3月4日2026年6月13日

VS Codeで表示されたHTMLとCSSのソースコード。h1タグや、文字色を指定する3つのクラス（.p-one, .p-two, .p-three）などのスタイル定義が含まれています。

いつまで無駄なデザインに時間を費やしますか？自作コード × SWELL で
理想のサイトをカスタマイズ構築

面倒な基本構造やレスポンシブ対応はテーマに任せ、浮いた時間で「あなたにしかできないこだわりの独自カスタマイズ」をとことん追求してみませんか？

「SWELL」の徹底レビュー・詳細を見る

※当サイトはアフィリエイト広告（SWELLプロモーション）を利用しています

Webページの土台となるHTML、デザインやレイアウトといった見た目を決めるのがCSS（スタイルシート）です。

では、CSSはどこに書けば良いのでしょうか。

本記事では、CSSの優先順位について解説します。

また、CSSに関するカテゴリーページから学びたい内容を決めたい人は、以下のCSSページをご確認ください。

CSS | Code Stock

もう無駄なレイアウトに凝るのやめたら？最速の土台 × 独自CSS で
SWELLをゴリゴリにカスタマイズ

レスポンシブ対応や基本レイアウトは最高峰テーマに任せませんか？浮いた時間で、流麗なアニメーションや標準設定を上書きする「あなただけの高度なビジュアル表現」をとことん突き詰めましょう。

「SWELL」であなたのデザインの限界を超える

※当サイトはアフィリエイト広告（SWELLプロモーション）を利用しています

CSSの記述場所は3パターン

CSSを記述場所は3パターンあります。

CSSの記述場所

CSSファイルを作成してHTMLから読み込み（例：style.css）
HTMLファイルに<style>タグを設置して記述
HTMLタグにインラインで記述

CSSの基本的な書き方と文字装飾を知りたい人は「【初心者のCSS入門】CSS（スタイルシート）とは？書き方と装飾方法まとめ」を一読ください。

【初心者のCSS入門】CSS（スタイルシート）とは？書き方と装飾方法まとめ

CSSファイルを作成してHTMLから読み込み

ここでは、外部ファイルのCSSを読み込む方法になります。

つまり、CSSファイルを別で作成しHTMLファイルから読み込むことになります。

作成したCSSファイルは外部スタイルシート（外部CSS）と呼ばれ、Webサイトを作る時に最も一般的な方法です。

STEP

テキストエディターを開く

ここでは、sample.htmlとstyle.cssを作成しています。

STEP

文字化け回避のためのコードを書く

CSSファイルの最初は<@charset "UTF-8";>を書きます。

コードの文字化けを防ぐためです。

これより前にCSSを書くのはNGです。

STEP

CSSファイルを書く・保存

style.cssにCSSコードを書き込んでいきます。

CSSコードを書き込んだら保存しましょう。

STEP

HTMLファイルを開く・保存

CSSを読み込みたいHTMLファイルを開きます。

外部CSSの読み込みは<link rel="stylesheet" href="ファイル名.css">というコードを使います。

コードをheadタグの中に書きます。

以下は、作成したHTML＆CSSコードになります。

HTMLコード表示

<!DOCTYPE html>
<html>
<head>
  <title>CODE STOCK</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>これはh1見出しです。</h1>
  <p class="p-one">これは例文1です。</p>
  <p id="p-two">これは例文2です。</p>
</body>
</html>

CSSコード表示

@charset "utf-8";

body {
    background: gray;
}

h1 {
    padding: .5em .7em;
    border-left: 5px solid #2589d0;
    border-bottom: 3px solid #d2d2d2;
    background-color: #f2f2f2;
    color: #333333;
}

.p-one {
    font-size: 30px;
    color: red;
}

#p-two {
    font-size: 30px;
    color: blue;
}

セレクタ指定、class指定、id指定の書き方でCSSを記載しています。

上記のステップを踏んで頂ければ、特段難しいことはないと思います。

外部CSSを読み込むメリット

CSSを外部ファイルとして作成しておくことはメリットになります。

なぜなら、1つのCSSファイルを複数のHTMLで読み込むことができます。

つまり、全てのHTMLページをデザイン・レイアウトを1つのCSSファイルで管理できます。

さらに、複数のページに同じデザインがあれば、デザインをまとめて変えられます。

外部CSSを読み込むメリット

1つのCSSファイルを複数のHTMLファイルで読み込み可能
同じデザインがあれば一括管理できる

複数の外部CSSを読み込めるのか？

複数の外部CSSを読み込むことは、もちろん可能です。

「基本のスタイル」「レイアウト用」「パーツ用」といったCSSファイルを分割して管理するタイミングが必ず訪れます。

HTMLの<head>タグ内に<link>タグを並べる
<link rel=”stylesheet” href=”○○.css”>

上記の方法で複数のCSSを読み込むことができます。

例として、style.cssとstyle2.cssの2ファイルを利用し、HTMLでどのように読み込むか記載します。

HTMLコード表示

<!DOCTYPE html>
<html>
<head>
  <title>CODE STOCK</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="style2.css">
</head>
<body>
  <h1>これはh1見出しです。</h1>
  <p class="p-one">これは例文1です。</p>
  <p class="p-two">これは例文2です。</p>
  <p class="p-three">これは例文3です。</p> </body>
</html>

CSSコード表示（style.css）

@charset "utf-8";

body {
    background: gray;
}

h1 {
    padding: .5em .7em;
    border-left: 5px solid #2589d0;
    border-bottom: 3px solid #d2d2d2;
    background-color: #f2f2f2;
    color: #333333;
}

.p-one {
    font-size: 30px;
    color: red;
}

.p-two {
    font-size: 30px;
    color: blue;
}

CSSコード表示（style2.css）

@charset "utf-8";

.p-three {
    font-size: 30px;
    color: green;
}

このように、style.cssでbody、h1、p-one、p-twoに対してCSSを適用し、style2.cssでp-threeにCSSを適用させることができます。

では、style2.cssでbodyのbackgroundを変更した場合はどうなるでしょうか？

CSSコード表示（style2.css）

@charset "utf-8";

.p-three {
    font-size: 30px;
    color: green;
}

/* 同じ要素を指定した場合どうなるか */
body {
    background: lightblue;
}

style.cssで記載していたbodyのbackgroundは、style2.cssでbodyのbackgroundに上書きされたことが分かりました。

優先順位のルール

<link>タグを増やすだけで複数のCSSを追加可能
「後に読み込んだファイル」のスタイルが優先される

外部CSSから別のCSSを読み込めるのか

HTMLには1つのCSSだけを読み込ませ、そのCSSファイル内で他のCSSファイルを呼び出すことも可能です。

これには @import（インポート）というルールを使います。

例として、新たにmain.cssを作成し、先ほど利用していたstyle.cssとstyle2.cssを読み込んでみます。

HTMLコード表示

<!DOCTYPE html>
<html>
<head>
  <title>CODE STOCK</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="main.css">
</head>
<body>
  <h1>これはh1見出しです。</h1>
  <p class="p-one">これは例文1です。</p>
  <p class="p-two">これは例文2です。</p>
  <p class="p-three">これは例文3です。</p> </body>
</html>

CSSコード表示（style.css）

@charset "utf-8";

body {
    background: gray;
}

h1 {
    padding: .5em .7em;
    border-left: 5px solid #2589d0;
    border-bottom: 3px solid #d2d2d2;
    background-color: #f2f2f2;
    color: #333333;
}

.p-one {
    font-size: 30px;
    color: red;
}

.p-two {
    font-size: 30px;
    color: blue;
}

CSSコード表示（style2.css）

@charset "utf-8";

.p-three {
    font-size: 30px;
    color: green;
}

CSSコード表示（main.css）

@charset "utf-8";

@import url("style.css");
@import url("style2.css");

body {
    background: white;
}

HTMLファイルにてmain.cssを読み込み、main.cssでstyle.cssとstyle2.cssを読み込むことで指定先である各セレクタのデザインが適用されています。

また、main.cssでbodyのbackgroundを変更しているため、背景色が白色になっています。

優先順位と記述ルール

@import url("ファイル名"); と記述することで、別のCSSを取り込める
記述ルール: @import は、必ずCSSファイルの一番上
@charsetの直後かつ他のスタイルの前に記述しなければならない
実務での注意: @import を多用するとブラウザがCSSを読み込む順番が複雑
ページの表示速度（パフォーマンス）が遅くなる原因になる

現代のWeb制作ではHTMLで<link>を並べる方法が推奨されます。

HTMLファイルに<style>タグを設置して記述

次に、HTMLファイルのheadタグ内に<style>〜</style>を記述し、その中にCSSを書く方法です。

STEP

HTMLファイルを開く

ここでは、sample.htmlを開いています。

STEP

headタグ内にstyleタグを書く

headタグの中に<style> </style>を書きましょう。

上記で適用させたブラウザ表示画面は以下になります。

HTMLに<style>タグを設置して記述するメリット・デメリット

HTMLの<style>タグで記述されたCSSは別ファイルに適用されない（デメリット）
特定のページのみCSSを適用させたい場合は<style>タグが有効（メリット）
外部CSS（共通CSS）と隔離することができる（メリット）

あえてメリットデメリットで記載していますが、使い分けが重要であるため使い方をしっかり覚えておきましょう。

また、外部CSSとうまく使い分けることで、共通CSSと隔離することもできるので便利です。

HTMLタグにインラインで記述

HTMLのタグの中にCSSを書く方法です。（「インラインにCSSを書く」と言います。）

HTMLタグのインラインについて

インラインの書き方
インライン記述のメリットデメリット

インラインの書き方

HTMLタグの中にCSSを記述する際は、<タグ名 style="CSSをここに書く">といった形になります。

style=""はstyle属性と呼ばれます。

<!DOCTYPE html>
<html>
<head>
  <title>CODE STOCK</title>
  <meta charset="UTF-8">
</head>
<body>
  <h1 style="padding: .5em .7em; border-left: 5px solid #2589d0; border-bottom: 3px solid #d2d2d2; background-color: #f2f2f2; color: #333333;">これはh1見出しです。</h1>
  <p style="font-size: 30px; color: red;">これは例文1です。</p>
  <p style="font-size: 30px; color: blue;">これは例文2です。</p>
  <p style="font-size: 30px; color: green;">これは例文3です。</p>
</body>
</html>

CSSの書き方は同じですが、セレクタ（h1, p）を指定する必要はありません。

タグに対して直接的にデザインが指定されます。

インライン記述のメリット・デメリット

インライン記述のメリットデメリット

外部CSSを作成や調整する必要がない（メリット）
インライン記述したタグしかデザインされない（デメリット）

また、インラインでCSSを書くとあとからまとめてデザインを変更したい際に非常に面倒です。

なぜなら、タグ内のCSSを書き直す必要がある場合や、共通CSSで上書きしたくても優先順位の問題で上書きできないケースもあります。

CSSが適用される優先順位

例えば、3つの方法で「同じ箇所のデザインを指定」した際、どれが優先されるのでしょうか。

CSSが適用される優先順位

HTMLタグにインラインで記述
HTMLファイルに<style>タグを設置して記述（場合による）
CSSファイルを作成してHTMLから読み込み（例：style.css）

HTMLタグに近い場所に書かれたCSSが適用される優先順位として高いと覚えれば分かりやすいです。

ただし、「HTMLファイルに<style>タグを設置して記述」と「CSSファイルを作成してHTMLから読み込み」は、無条件で「HTMLファイルに<style>タグを設置して記述」が優先されるわけではありません。

例えば、以下のHTMLとCSSを考えてみます。

HTMLコード表示

<!DOCTYPE html>
<html>
<head>
  <title>CODE STOCK</title>
  <meta charset="UTF-8">
  <style>
    body {
        background: gray;
    }
  </style>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>これはh1見出しです。</h1>
  <p class="p-one">これは例文1です。</p>
  <p class="p-two">これは例文2です。</p>
  <p class="p-three">これは例文3です。</p> </body>
</html>

CSSコード表示（style.css）

@charset "utf-8";

body {
    background: lightblue;
}

h1 {
    padding: .5em .7em;
    border-left: 5px solid #2589d0;
    border-bottom: 3px solid #d2d2d2;
    background-color: #f2f2f2;
    color: #333333;
}

.p-one {
    font-size: 30px;
    color: red;
}

.p-two {
    font-size: 30px;
    color: blue;
}

.p-three {
    font-size: 30px;
    color: green;
}

上記の順位で言えば、HTMLに直接<style>タグを記載しているので、外部CSSのbackground: lightblue;より<style>タグのbackground: gray;が適用されると推測できるはずです。

しかし、実際には外部CSSの背景色が適用されています。

これは、以下の優先度が関わっています。

HTMLコード表示（<style>タグ優先）

<!DOCTYPE html>
<html>
<head>
  <title>CODE STOCK</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
  <style>
    body {
        background: gray;
    }
  </style>
</head>
<body>
  <h1>これはh1見出しです。</h1>
  <p class="p-one">これは例文1です。</p>
  <p class="p-two">これは例文2です。</p>
  <p class="p-three">これは例文3です。</p> </body>
</html>

HTMLコード表示（外部CSS優先）

@charset "utf-8";

body {
    background: lightblue;
}

h1 {
    padding: .5em .7em;
    border-left: 5px solid #2589d0;
    border-bottom: 3px solid #d2d2d2;
    background-color: #f2f2f2;
    color: #333333;
}

.p-one {
    font-size: 30px;
    color: red;
}

.p-two {
    font-size: 30px;
    color: blue;
}

.p-three {
    font-size: 30px;
    color: green;
}

CSSのセレクタ（適用先）が持つ詳細度

さらに、踏み込んでCSSのセレクタが持つ詳細度もイメージを掴みやすくするため、疑似的な点数を割り当てて解説します。

優先度レベル	セレクタの種類	具体例	疑似的な点数
最強（特例）	!important	color: red !important;	無限大（別格）
レベル5	インライン記述	<p style=”color: red;”>	1000点
レベル4	IDセレクタ	#p-two, #header	100点
レベル3	クラス/属性/疑似クラス	.p-one, [type=”text”], :hover	10点
レベル2	要素（タグ）/疑似要素	h1, p, ::before	1点
レベル1	全称セレクタ	*	0点