CSSの優先順位はどう決まる？どこに書くかと外部CSSの読み込み＆インラインの記述

2026年3月4日2026年3月7日

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

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

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

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

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

CSSの記述場所

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

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点