HTMLにCSSを埋め込む方法を解説｜外部CSS・内部CSS・インラインCSSの違いも紹介

HTMLとCSSの学習を始めると、「CSSをHTMLに埋め込む方法がわからない」「linkタグとstyleタグの違いは？」「CSSを書いたのに反映されない」と悩むことはありませんか？

HTMLはWebページの構造を作る言語ですが、見た目を整えるためにはCSSを適用する必要があります。この記事では、HTMLにCSSを埋め込む3つの方法を初心者向けにわかりやすく解説します。また、それぞれの違いや実務でよく使われる方法、CSSが反映されないときの対処法についても紹介します。サンプルコード付きで解説するので、HTMLとCSSを学び始めたばかりの方もぜひ参考にしてください。

HTMLにCSSを埋め込むとは？
1. CSSはWebページのデザインを指定する言語
2. 「埋め込み」と「読み込み」の違い
HTMLにCSSを埋め込む3つの方法
3つのCSS埋め込み方法の違いを比較
1. 外部CSS・内部CSS・インラインCSSの違い
2. 初心者におすすめなのは外部CSS
外部CSSを使ってHTMLにCSSを埋め込む手順
HTMLにCSSを埋め込む際の注意点
1. CSSの優先順位を理解する
2. インラインCSSの多用を避ける
CSSが反映されない原因と対処方法
HTMLとCSSを効率良く学ぶ方法
1. 実際にコードを書きながら学習する
2. 独学が不安ならスクールで学ぶのもおすすめ

HTMLにCSSを埋め込むとは？

HTMLにCSSを埋め込むとは、HTMLで作成したWebページにデザインを適用することを指します。HTMLだけでもWebページを表示できますが、文字の色やサイズ、背景色、レイアウトなどを自由に変更するにはCSSが必要です。まずはCSSの役割と、HTMLとの関係について理解しておきましょう。

CSSはWebページのデザインを指定する言語

CSS（Cascading Style Sheets）は、Webページの見た目を指定するための言語です。文字の色や大きさを変更したり、背景色を設定したり、要素の配置を調整したりできます。例えば、HTMLで作成した見出しに対してCSSを適用すると、文字色を変更したり中央寄せにしたりできます。

h1 {
  color: blue;
  text-align: center;
}

このようにCSSを使用することで、Webページのデザインを自由にカスタマイズできます。現在のWebサイトのほとんどは、HTMLとCSSを組み合わせて作られています。

「埋め込み」と「読み込み」の違い

HTMLとCSSを学び始めると、「CSSを埋め込む」と「CSSを読み込む」という表現を目にすることがあります。どちらもCSSを適用するという意味で使われることが多いですが、厳密には少し意味が異なります。CSSを埋め込むとは、HTMLファイルの中に直接CSSを記述する方法です。例えば、styleタグやstyle属性を使う方法が該当します。

<style>
p {
  color: red;
}
</style>

一方でCSSを読み込むとは、別ファイルとして作成したCSSファイルをHTMLから参照する方法です。一般的にはlinkタグを使用して読み込みます。

<link rel="stylesheet" href="style.css">

実務では、複数のページで同じデザインを管理しやすい外部CSSの読み込みが主流です。ただし、初心者向けの記事や解説では、外部CSS・内部CSS・インラインCSSをまとめて「CSSを埋め込む方法」と表現することもあります。

HTMLにCSSを埋め込む3つの方法

HTMLにCSSを適用する方法は、大きく分けて3種類あります。

外部CSS（linkタグ）で読み込む方法
内部CSS（styleタグ）で記述する方法
インラインCSS（style属性）で指定する方法

まずは、それぞれの仕組みと使い方を確認していきましょう。

外部CSS（linkタグ）で読み込む方法

外部CSSは、HTMLファイルとは別にCSSファイルを作成し、linkタグを使って読み込む方法です。現在のWeb制作では最も一般的な方法として使われています。
まず、CSSファイルを作成します。

/* style.css */

body {
  background-color: #f5f5f5;
}

h1 {
  color: #0066cc;
}

次に、HTMLファイルのheadタグ内でCSSファイルを読み込みます。

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

この方法の最大のメリットは、1つのCSSファイルを複数のHTMLファイルで共有できることです。サイト全体のデザインを一括で管理できるため、修正や保守がしやすくなります。実際のWebサイトや企業のホームページでも、ほとんどの場合は外部CSSが使用されています。これからHTMLとCSSを学ぶ方は、まず外部CSSの使い方を覚えるのがおすすめです。

内部CSS（styleタグ）で記述する方法

内部CSSは、HTMLファイルのheadタグ内にstyleタグを記述し、その中にCSSを書く方法です。

<head>
  <style>
    h1 {
      color: red;
    }

    p {
      font-size: 18px;
    }
  </style>
</head>

内部CSSは、1つのHTMLファイルだけにデザインを適用したい場合に便利です。例えば、テスト用のページやキャンペーンページなど、他のページとスタイルを共有しない場合に利用されることがあります。ただし、複数のページで同じデザインを使用する場合は、ページごとにCSSを記述する必要があります。そのため、ページ数が増えるほど管理が難しくなる点に注意が必要です。小規模なページであれば問題ありませんが、継続的に運用するWebサイトでは外部CSSの方が管理しやすいでしょう。

インラインCSS（style属性）で指定する方法

インラインCSSは、HTMLタグのstyle属性に直接CSSを記述する方法です。

<p style="color: green; font-size: 20px;">
  この文章は緑色で表示されます。
</p>

この方法では、指定した要素だけにスタイルが適用されます。そのため、一部分だけデザインを変更したい場合に利用できます。一方で、HTMLとCSSが混在するためコードが読みにくくなりやすく、管理もしづらくなります。また、同じデザインを複数箇所で使いたい場合は、同じ記述を何度も繰り返す必要があります。そのため、インラインCSSは学習用や一時的な調整で使われることが多く、実務ではあまり多用されません。

3つのCSS埋め込み方法の違いを比較

ここまで紹介した外部CSS・内部CSS・インラインCSSは、どれもHTMLにCSSを適用する方法ですが、管理のしやすさや用途が異なります。どの方法を選ぶべきか迷った場合は、それぞれの特徴を比較して理解しておきましょう。

外部CSS・内部CSS・インラインCSSの違い

3つの方法の違いを表にまとめると、以下のようになります。

方法	記述場所	管理のしやすさ	おすすめ度	主な用途
外部CSS	CSSファイル	◎	★★★★★	Webサイト全体のデザイン管理
内部CSS	styleタグ内	△	★★★☆☆	1ページのみのスタイル設定
インラインCSS	style属性	×	★☆☆☆☆	特定要素の一時的な装飾

外部CSSは複数のページで同じスタイルを共有できるため、管理や修正がしやすいのが特徴です。一方、内部CSSは1ページ単位で完結するため、小規模なページで利用されます。インラインCSSは特定の要素だけを装飾できますが、HTMLとCSSが混在するため保守性が低くなります。そのため、長期的に運用するWebサイトではあまり推奨されていません。

初心者におすすめなのは外部CSS

HTMLとCSSを学び始めたばかりの方には、外部CSSがおすすめです。なぜなら、実際のWeb制作で最も多く使われている方法であり、HTMLとCSSの役割を分けて管理できるからです。例えば、サイト内に10ページある場合でも、1つのCSSファイルを編集するだけで全ページのデザインを変更できます。

project
├ index.html
├ about.html
└ style.css

このような構成であれば、style.cssを修正するだけで複数ページに変更が反映されます。HTMLの構造とCSSのデザインを分けて管理する考え方は、Web制作の基本です。学習段階から外部CSSに慣れておくことで、実践的なスキルを身につけやすくなります。

外部CSSを使ってHTMLにCSSを埋め込む手順

HTMLにCSSを適用する方法はいくつかありますが、実際のWeb制作では外部CSSを使う方法が最も一般的です。外部CSSを利用すると、HTMLとCSSを別々に管理できるため、コードが見やすくなります。また、複数のページで同じデザインを共有できるため、サイト全体のデザイン変更やメンテナンスも効率的に行えます。

CSSファイルを作成する

まずはCSSファイルを作成します。
Visual Studio Codeなどのエディタを開き、新しいファイルを作成してください。
ファイル名は一般的に「style.css」とすることが多いですが、任意の名前でも問題ありません。
作成したCSSファイルに、以下のようなコードを記述します。

body {
  background-color: #f5f5f5;
}

h1 {
  color: #0066cc;
}

p {
  font-size: 16px;
}

このCSSでは、ページ全体の背景色や見出しの文字色、本文の文字サイズを指定しています。
CSSファイルは必ず「.css」という拡張子で保存しましょう。例えば「style.css」のような名前になります。

HTMLとCSSのフォルダ構成を準備する

次に、HTMLファイルとCSSファイルを保存するフォルダを準備します。
初心者の場合は、まずHTMLファイルとCSSファイルを同じフォルダに保存すると管理しやすくなります。

project
├ index.html
└ style.css

ただし、実際のWeb制作ではCSS専用のフォルダを作成することが一般的です。

project
├ index.html
└ css
    └ style.css

このようにファイルを整理しておくと、サイトの規模が大きくなっても管理しやすくなります。
また、CSSが反映されない原因としてフォルダ構成の間違いは非常に多いため、HTMLファイルとCSSファイルの保存場所は必ず確認しておきましょう。

linkタグでCSSを読み込む

CSSファイルを作成したら、HTMLファイルから読み込みます。
HTMLファイルのheadタグ内に、以下のlinkタグを追加してください。

<head>
  <meta charset="UTF-8">
  <title>サンプルページ</title>
  <link rel="stylesheet" href="style.css">
</head>

もしCSSファイルをcssフォルダ内に保存している場合は、以下のように記述します。

<link rel="stylesheet" href="css/style.css">

href属性にはCSSファイルの場所を指定します。
HTMLファイルから見た位置を基準に記述するため、フォルダ構成が変わると指定方法も変わります。なお、linkタグはheadタグ内に記述するのが基本です。bodyタグ内に記述すると、意図したタイミングでCSSが読み込まれない場合があります。

CSSが適用されているか確認する

CSSファイルを読み込んだら、ブラウザでHTMLファイルを開いて表示を確認しましょう。
例えば、以下のHTMLを用意します。

<body>
  <h1>忍者CODE</h1>
  <p>HTMLとCSSを学習中です。</p>
</body>

先ほど作成したCSSが正しく読み込まれていれば、見出しの色や背景色が変更されているはずです。
もしデザインが変わらない場合は、以下の点を確認してください。

CSSファイル名が正しいか
拡張子が「.css」になっているか
href属性のパスが正しいか
CSSの記述ミスがないか

特に初心者の場合は、ファイル名の入力ミスやフォルダ構成の間違いによってCSSが読み込まれないケースが多くあります。CSSが適用されていることを確認できたら、HTMLへのCSS埋め込みは完了です。

HTMLにCSSを埋め込む際の注意点

HTMLにCSSを埋め込むだけであれば難しくありませんが、記述方法を誤ると「CSSが反映されない」「思ったデザインにならない」といった問題が発生することがあります。ここでは、HTMLにCSSを埋め込む際に知っておきたい3つの注意点を解説します。

CSSの優先順位を理解する

CSSには「どのスタイルを優先して適用するか」を決めるルールがあります。同じ要素に対して複数のCSSが指定されている場合は、優先順位の高いスタイルが適用されます。
例えば、同じpタグに対して外部CSSとインラインCSSで異なる文字色を指定した場合、インラインCSSが優先されます。

/* 外部CSS */
p {
  color: blue;
}

<p style="color: red;">
  サンプルテキスト
</p>

この場合、表示される文字色は赤色になります。
一般的な優先順位は以下の通りです。

インラインCSS（style属性）
内部CSS（styleタグ）
外部CSS（CSSファイル）

CSSを書いたのに反映されない場合は、他の場所で同じ要素に対してスタイルが指定されていないか確認してみましょう。

インラインCSSの多用を避ける

インラインCSSは手軽にスタイルを適用できる反面、多用するとコードが読みづらくなります。例えば、複数の要素に同じデザインを適用したい場合でも、毎回style属性を記述しなければなりません。

<p style="color: blue;">テキスト1</p>
<p style="color: blue;">テキスト2</p>
<p style="color: blue;">テキスト3</p>

このような書き方は、後からデザインを変更する際にすべて修正する必要があります。
一方、外部CSSを使用すれば1か所の修正で済みます。

p {
  color: blue;
}

HTMLとCSSを分けて管理することで、コードの可読性や保守性が向上します。
そのため、インラインCSSは一時的なテストや限定的な装飾にとどめ、基本的には外部CSSを使用するようにしましょう。

CSSが反映されない原因と対処方法

CSSを正しく記述したつもりでも、「デザインが変わらない」「CSSが読み込まれない」といったトラブルが発生することがあります。特にHTMLとCSSを学び始めたばかりの方は、ちょっとした入力ミスや設定ミスが原因でCSSが反映されないケースが少なくありません。

ファイルパスが間違っている

外部CSSを使用している場合、最も多い原因がファイルパスの間違いです。
HTMLファイルとCSSファイルの保存場所が異なる場合は、linkタグのhref属性に正しいパスを指定する必要があります。例えば、以下のようなフォルダ構成の場合を見てみましょう。

project
├ index.html
└ css
    └ style.css

この場合、HTMLからCSSを読み込むには以下のように記述します。

<link rel="stylesheet" href="css/style.css">

誤って以下のように記述すると、CSSファイルを見つけられません。

<link rel="stylesheet" href="style.css">

CSSが反映されない場合は、まずHTMLファイルから見たCSSファイルの位置が正しいか確認しましょう。

ファイル名や拡張子が間違っている

ファイル名や拡張子の入力ミスもよくある原因のひとつです。
例えば、CSSファイル名が「style.css」なのに、HTML側で以下のように記述している場合は読み込まれません。

<link rel="stylesheet" href="styles.css">

また、ファイル名は合っていても拡張子が間違っているケースもあります。

style.css
style.CSS
style.css.txt

これらは別のファイルとして扱われるため、意図したCSSが読み込まれない場合があります。
特にWindowsでは拡張子が非表示になっていることがあるため、ファイルの実際の名前を確認することが大切です。

CSSの優先順位で上書きされている

CSSファイルが正しく読み込まれていても、別のCSSによってスタイルが上書きされていることがあります。例えば、外部CSSで青色を指定していても、インラインCSSで赤色を指定すると赤色が適用されます。

/* style.css */
p {
  color: blue;
}

<p style="color: red;">
  サンプルテキスト
</p>

この場合、表示される文字色は赤色になります。
また、同じCSSファイル内でも後から記述したスタイルが優先されることがあります。

p {
  color: blue;
}

p {
  color: red;
}

この場合は赤色が適用されます。
CSSが反映されないように見える場合は、同じ要素に別のスタイルが指定されていないか確認してみましょう。

ブラウザキャッシュが残っている

CSSを修正したにもかかわらず表示が変わらない場合は、ブラウザキャッシュが原因かもしれません。ブラウザは表示速度を向上させるため、一度読み込んだCSSファイルを一時的に保存しています。そのため、最新のCSSではなく古いCSSが表示されることがあります。

まずはページを再読み込みしてみましょう。

Windows：Ctrl + F5
Mac：Command + Shift + R

これらの操作を行うと、キャッシュを無視して最新のファイルを読み込めます。

それでも解決しない場合は、ブラウザのキャッシュを削除したり、シークレットウィンドウで表示を確認したりすると原因を切り分けやすくなります。CSSが反映されない場合は慌てずに、ファイルパス・ファイル名・CSSの優先順位・キャッシュの4つを順番に確認してみましょう。多くのケースは、これらを見直すことで解決できます。

HTMLとCSSを効率良く学ぶ方法

HTMLにCSSを埋め込む方法を理解すると、Webページのデザインを自由に調整できるようになります。しかし、実際のWeb制作ではHTMLとCSSを組み合わせて使うため、どちらか一方だけを学んでも十分とはいえません。効率良くスキルを身につけるためには、実際に手を動かしながら学習し、HTMLとCSSの役割をセットで理解することが大切です。

実際にコードを書きながら学習する

HTMLやCSSは、参考書や動画を見るだけではなかなか身につきません。知識として理解していても、自分でコードを書けなければ実際のWeb制作には活かせないためです。
例えば、今回紹介した外部CSSの読み込み方法も、実際にHTMLファイルとCSSファイルを作成して試してみることで理解が深まります。

project
├ index.html
└ style.css

このような簡単な構成から始めて、文字色を変更したり背景色を設定したりしながら、CSSがどのように反映されるのか確認してみましょう。学習初期は「読む時間」よりも「コードを書く時間」を増やすことが上達への近道です。

独学が不安ならスクールで学ぶのもおすすめ

HTMLやCSSは比較的学習しやすい技術ですが、独学では「なぜエラーになるのかわからない」「思ったように表示されない」と悩むことも少なくありません。特に、CSSが反映されない原因の特定やレイアウト調整は、初心者がつまずきやすいポイントです。

独学に不安がある場合は、質問できる環境を活用するのもひとつの方法です。

忍者CODEでは、HTMLやCSSの基礎から実践的なWeb制作スキルまで学習できます。動画教材で学びながら、わからない部分はチャットサポートで質問できるため、初心者でも安心して学習を進められます。Web制作の基礎をしっかり身につけたい方は、HTMLとCSSを実際に使いながら学べる環境を活用してみましょう。