CSS の適用方法

Volardev 編集部 April 12, 2026

1. 3 つの CSS 適用方法

ブラウザがスタイルシートを読み込むと、そのスタイルシートの情報に従って HTML ドキュメントがフォーマットされます。

CSS を挿入するには、主に以下の 3 つの方法があります。

外部スタイルシートを使用すると、1 つのファイルを変更するだけで Web サイト全体の外観を変更できます。

各 HTML ページは、<head> セクション内の <link> 要素を使用して、外部スタイルシートへの参照を含める必要があります。

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

外部スタイルシートは任意のテキストエディタで記述でき、拡張子は .css で保存する必要があります。外部の .css ファイル内に HTML タグを含めてはいけません。

以下は "mystyle.css" ファイルの内容の例です。

body {
  background-color: lightblue;
}

h1 {
  color: navy;
  margin-left: 20px;
}

注意: 属性値と単位の間にスペースを入れないでください（例：margin-left: 20 px; ではなく 20px）。

内部スタイルシートは、単一の HTML ページに固有のスタイルを適用する場合に使用されます。

内部スタイルは、<head> セクション内の <style> 要素の中に定義します。

<head>
<style>
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
}
</style>
</head>

インラインスタイルは、特定の単一の要素に独自のスタイルを適用するために使用されます。

インラインスタイルを使用するには、該当する要素に style アトリビュートを追加します。style 属性には、任意の CSS プロパティを含めることができます。

<h1 style="color:blue;text-align:center;">これは青い中央揃えの見出しです</h1>
<p style="color:red;">これは赤い段落です。</p>

アドバイス: インラインスタイルは、スタイル表現がコンテンツと混ざってしまうため、CSS の利点（コンテンツとデザインの分離）が失われます。基本的には避けるべき手法です。

同じセレクター（要素）に対して、異なるスタイルシートで異なるプロパティの値が定義されている場合、最後に読み込まれた値が使用されます。

例えば、外部スタイルシートで <h1> 要素に以下のスタイルがあるとします。

h1 {
  color: navy;
}

そして、内部スタイルシートでも <h1> 要素に以下のスタイルがあるとします。

h1 {
  color: orange;
}

内部スタイルが外部スタイルシートへのリンクよりも後に定義されている場合、<h1> 要素はオレンジ色になります。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
  color: orange;
}
</style>
</head>

しかし、内部スタイルが外部スタイルシートへのリンクよりも前に定義されている場合、<h1> 要素はネイビー（外部スタイルシートの値）になります。

1 つの HTML 要素に対して複数のスタイルが指定されている場合、どのスタイルが優先されるのでしょうか？

ページ内のすべてのスタイルは、以下のルールに従って新しい「仮想的」なスタイルシートに「カスケード（連鎖）」され、番号が大きくなるほど優先順位が高くなります。

したがって、インラインスタイルは最も高い優先順位を持ち、外部/内部スタイルシートやブラウザのデフォルト設定を上書きします。