ホームページを作っていると、「文字の色を変えたい」とか「背景に色をつけたい」って思うことありますよね。
でも、CSSってどうやって書けばいいの？と迷ってしまう人も多いと思います。
この記事では、HTMLにCSSを埋め込む方法について、やさしく分かりやすく説明していきます。
スタイルの書き方や実際のコード例もたっぷり紹介しますので、初めての人でも安心です。
埋め込みCSSの使い方が分かると、HTMLファイルひとつで文字の色やサイズ、背景や枠線などを自由にデザインできるようになります。
とても便利な方法なので、ぜひ最後まで参考にしてくださいね。
HTMLにCSSを埋め込む基本的な方法とは
埋め込みCSSとは何か
HTMLにCSSを直接書き込む方法にはいくつか種類がありますが、なかでも「埋め込みCSS」はとても基本的で使いやすいスタイルのひとつです。
埋め込みCSSとは、HTMLファイルの中にある
styleタグを使って、CSSをそのまま記述する方法のことです。
この方法を使えば、外部ファイルを使わずにHTMLとCSSをひとつのファイルで管理できます。
以下のような特徴があります。
- HTMLの中に直接CSSが書ける
- ファイルを1つにまとめられるので初心者にやさしい
- 小規模なページやテスト用にぴったり
- HTMLとCSSの関係がすぐにわかる
- 外部のCSSファイルを作らなくてもよい
このように、埋め込みCSSは学習やちょっとしたWebページにはとても便利な方法です。
styleタグを使ったCSSの記述方法
HTMLにCSSを埋め込むときは、<style>タグを使います。
styleタグは、HTML文書の内に書くのが基本です。
そこにCSSのルールを記述することで、HTML全体にデザインを適用できます。
たとえば、次のように書きます。
<head>
<style>
body { background-color: lightblue; }
p { color: red; font-size: 16px; }
</style>
</head>
このようにすると、<body>タグの背景が水色になり、<p>タグの文字が赤く、サイズも16pxになります。
ポイントは次の通りです。
- <style>タグは<head>内に書く
- CSSの書き方は外部ファイルと同じ
- セミコロン（;）と波かっこ（{}）を忘れない
このように基本ルールを守れば、簡単にHTMLにCSSを埋め込めます。
head内でのCSSの書き方と注意点
styleタグを内に書くと、HTML全体に影響を与えるスタイルを設定できます。
しかし、記述の仕方を間違えるとCSSが反映されないことがありますので、いくつか注意点を紹介します。
まず、書く場所が正しくないとスタイルが読み込まれません。
以下の点に気をつけましょう。
- <style>タグは<head>の中だけに書く
- セレクタとプロパティは正しい文法で書く
- コメントアウトの使い方を間違えない
- HTML構造を理解して正しいタグに適用する
- 同じプロパティが重複しないようにする
このようなポイントに注意すれば、内に書いたCSSもしっかりと反映されるようになります。
HTMLタグに直接書くインラインCSSとの違い
CSSをHTMLに書く方法には、埋め込みCSSのほかに「インラインCSS」もあります。
インラインCSSは、HTMLタグの中に直接スタイルを書く方法で、style属性を使います。
たとえば以下のように書きます。
<p style="color: blue; font-size: 18px;">これは青い文字です</p>
この方法は、特定の1つの要素だけにスタイルをつけたいときに便利です。
ただし、たくさん使うとHTMLがごちゃごちゃになりやすいという欠点もあります。
違いをまとめると以下のようになります。
- インラインCSSはHTMLタグ内に直接書く
- 埋め込みCSSは<style>タグを使ってまとめて書く
- インラインは優先順位が高いが、管理が難しい
- 埋め込みはスッキリ書けて見やすい
どちらも使い方を覚えておくと便利ですが、ページが大きくなると埋め込みCSSのほうが見やすくておすすめです。
CSSの優先順位と埋め込みCSSの影響範囲
CSSには「優先順位（カスケーディング）」があります。
これは、同じ要素に複数のスタイルがあったとき、どのスタイルが適用されるかを決めるルールです。
埋め込みCSSは、外部CSSより優先されますが、インラインCSSよりは弱いです。
優先順位の高い順に並べると次のようになります。
- インラインCSS（style属性）
- 埋め込みCSS（<style>）
- 外部CSS（linkで読み込む）
- ブラウザのデフォルトスタイル
また、セレクタの種類でも強さが変わります。
たとえばidのセレクタはclassより強いです。
CSSの優先順位を正しく理解すると、思い通りのデザインができるようになります。
埋め込みCSSが適しているケースとは
埋め込みCSSはすべての場面に適しているわけではありません。
では、どんなときに使うのが良いのでしょうか。
代表的なケースは以下のとおりです。
- ページ数が少ないサイト
- プロトタイプやサンプルページを作るとき
- CSSの学習用
- 外部ファイルを読み込めない環境
- 一時的にスタイルを変更したいとき
このような場面では、埋め込みCSSを使うと簡単でスムーズにデザインを調整できます。
逆に、大規模なサイトでは外部CSSを使った方が便利です。
HTML埋め込みCSSの具体的な記述例と使い方
文字の色やサイズを変更するCSSの例
HTMLに埋め込んだCSSを使って、文字の色や大きさを変えるのはとても基本的でよく使う方法です。
たとえば見出しや本文の色を変えたり、大事な文字を大きく表示したりできます。
以下は、文字に関するスタイルの例です。
<style>
h1 { color: red; font-size: 32px; }
p { color: blue; font-size: 16px; }
</style>
このようにCSSを埋め込むと、ページ全体の見た目が変わります。
次のようなポイントに注目して書くと便利です。
- colorで文字の色を指定できる
- font-sizeで文字の大きさを変えられる
- h1やpなどのHTMLタグに直接スタイルをつける
- 単位（pxやem）を忘れずに書く
- 半角スペースやセミコロンの抜けに注意
文字のスタイルはページの印象を大きく変えるので、読みやすくてわかりやすいデザインを心がけましょう。
背景色や枠線を設定するスタイル例
埋め込みCSSでは、文字だけでなく背景や枠線も変えることができます。
背景色を変えると見た目にメリハリがつき、情報を強調したいときに役立ちます。
たとえば、次のようなCSSを使います。
<style>
div { background-color: lightyellow; border: 2px solid gray; padding: 10px; }
</style>
この例では、divタグに薄い黄色の背景と灰色の枠線をつけています。
便利なポイントは以下の通りです。
- background-colorで背景の色を変えられる
- borderで線の太さ・種類・色を指定する
- paddingで内側の余白を調整できる
- 視覚的にグループ分けがしやすくなる
- 要素を囲んで見やすくできる
背景色や枠線をうまく使うと、デザインがぐっと見やすくなります。
複数のHTML要素にスタイルを適用する方法
HTMLで複数のタグに同じスタイルを当てたいときは、CSSでセレクタをカンマでつなげて書くと便利です。
これにより、似たようなデザインを簡単に統一できます。
以下のように記述します。
<style>
h1, h2, h3 { font-family: 'Arial'; color: darkblue; }
</style>
このように書くと、すべての見出しタグに同じフォントと色が適用されます。
さらに、次のようなポイントがあります。
- カンマで複数のタグを並べる
- ひとつのスタイルをまとめて指定できる
- 書く手間が減ってミスも少なくなる
- ページ全体の統一感が出る
このテクニックはとてもよく使うので、必ず覚えておきましょう。
hoverやactiveなどの擬似クラスの活用
擬似クラス（ぎじクラス）を使うと、マウスを乗せたときやクリックしたときにスタイルを変えることができます。
これにより、ユーザーに反応がある見やすいページが作れます。
たとえばリンクに色をつけて変化させたいとき、次のように書きます。
<style>
a { color: black; }
a:hover { color: red; text-decoration: underline; }
a:active { color: green; }
</style>
これを使うと、リンクにマウスを乗せると赤くなり、クリック中は緑になります。
以下の点を覚えておくと便利です。
- :hoverはマウスを乗せたときに使う
- :activeはクリックしているときに使う
- リンクやボタンによく使われる
- ユーザーの反応がわかりやすくなる
こういった動きがあると、ページがより親切で楽しくなります。
classやidを使ったセレクタ指定の基本
HTMLでは、classやidを使うことで、特定の要素だけにスタイルを当てることができます。
これを使えば、ページの中で細かくデザインを変えることができます。
次のように使います。
<style>
.highlight { background-color: yellow; }
#main-title { color: navy; font-size: 28px; }
</style>
<p class=”highlight”>この文はハイライトされています</p>
<h1 id=”main-title”>メインの見出しです</h1>
ここで注目したいポイントは以下の通りです。
- classは複数の要素に同じスタイルをつけられる
- idはページに1回だけ使える特別な指定
- .（ドット）でclass、#（シャープ）でidを指定する
- 同じタグでも違うデザインができる
- 名前はわかりやすくつけることが大事
classとidを使いこなせば、自由なデザインができるようになります。
外部CSSとの違いと使い分けのポイント
外部スタイルシートと埋め込みCSSの違い
HTMLにCSSを使うとき、埋め込みCSSと外部CSSの2つの方法があります。
どちらも見た目を整えるためのスタイルですが、書き方や使い方に違いがあります。
外部CSSは別ファイルにCSSを書く方法で、HTMLとは別のファイルとして管理します。
たとえば、外部CSSは次のようにHTMLに読み込みます。
<head>
<link rel="stylesheet" href="style.css">
</head>
それぞれの違いをまとめると次のようになります。
- 埋め込みCSSはHTMLの中に直接書く
- 外部CSSはHTMLと別のファイルに書く
- 外部CSSは複数ページで使い回せる
- 埋め込みCSSはそのHTMLだけに適用される
- 保守・管理は外部CSSの方がしやすい
このように、それぞれの特長を理解して使い分けることが大切です。
それぞれのメリット・デメリット
埋め込みCSSと外部CSSにはそれぞれメリットとデメリットがあります。
使う場面によって、どちらが良いかは変わってきます。
以下に分かりやすくまとめます。
まずは埋め込みCSSのメリット・デメリットです。
- メリット：コードが1つのファイルにまとまる
- メリット：手軽に書いてすぐに確認できる
- デメリット：複数ページに使い回しできない
- デメリット：コードが増えると見づらくなる
次に外部CSSのメリット・デメリットです。
- メリット：1つのCSSで複数ページを統一できる
- メリット：メンテナンスがしやすい
- デメリット：ファイルの読み込みが必要になる
- デメリット：初心者にはややハードルが高い
それぞれの長所と短所を理解して、目的に合わせて使い分けるのがポイントです。
プロジェクト規模による使い分けの基準
CSSの使い方は、作るWebサイトの規模によっても変わってきます。
たとえば1ページしかない簡単なサイトと、たくさんのページがある本格的なサイトでは、最適な方法が違います。
以下のように使い分けると効率的です。
- 1ページのテスト用サイト → 埋め込みCSS
- ランディングページや広告ページ → 埋め込みCSS
- 複数ページでデザインが共通するサイト → 外部CSS
- 大規模な企業サイトやブログ → 外部CSS
- 再利用性やチーム開発を考えるなら外部CSS
このように、作るサイトの目的や大きさでCSSの書き方を選ぶことが大事です。
保守性とパフォーマンスの観点からの選び方
Webサイトは作って終わりではなく、更新や修正も大切です。
そのため、保守性やパフォーマンスのことも考えてCSSの書き方を決める必要があります。
外部CSSはHTMLから分離されているため、あとから修正がとても楽になります。
逆に、埋め込みCSSは1ページごとにスタイルを書くため、修正に時間がかかってしまいます。
さらに、ページの読み込み速度にも影響があります。
次のように考えるとよいです。
- 外部CSSは一度読み込めばキャッシュされる
- 複数ページを高速に表示できる
- 埋め込みCSSは毎回読み込む必要がある
- ファイルサイズが増えると読み込みが遅くなる
- 更新頻度が高いサイトには外部CSSがおすすめ
パフォーマンスと保守の両方を考えると、外部CSSのほうが便利な場面が多いです。
実務での使い分けの具体例
実際の仕事やプロジェクトでは、CSSをどのように使い分けているのでしょうか。
現場では「早く」「わかりやすく」「あとで直しやすく」ということがとても大切になります。
以下は、よくある使い分けのパターンです。
- 開発初期の試作ページ → 埋め込みCSS
- チームで管理する正式サイト → 外部CSS
- テンプレートを使うCMS → 外部CSS
- 社内向けの小さなツール → 埋め込みCSS
- 本番公開サイト → 必ず外部CSS
実務では、開発のスピードと将来の管理のしやすさを考えて、どちらを使うかを選びます。
覚えておくと便利です。
読み込み速度への影響とSEOへの配慮
CSSの書き方は、ページの表示スピードやSEO（検索エンジン対策）にも影響を与えます。
特に検索エンジンは、ページの読み込みが速いかどうかを重視しています。
外部CSSは、ファイルを1回読み込めば、次のページでもキャッシュが使えるため速くなります。
一方で、埋め込みCSSは毎回HTMLの中で読み込まれるため、少しだけ遅くなります。
SEOの観点から見たポイントは以下のとおりです。
- 外部CSSの方が表示速度が安定しやすい
- HTMLファイルが軽くなってGoogleに好まれる
- 読み込みの順番が正しければどちらでもOK
- インラインCSSの多用はSEOにマイナスになる
SEOを意識したい場合や、大勢の人に見てもらいたいサイトでは、外部CSSの使用をおすすめします。
HTML埋め込みCSSのよくあるトラブルと解決策
CSSが反映されない原因と確認ポイント
HTMLにCSSを埋め込んだのに、なぜかデザインが反映されないことがあります。
このようなトラブルはとてもよくあることで、基本的なチェックをするだけで解決できる場合がほとんどです。
次のポイントを確認してみてください。
- <style>タグが<head>内に書かれているか
- セレクタの書き間違いがないか
- 中かっこ { } やセミコロン ; を忘れていないか
- スペルミス（color、background など）がないか
- キャッシュが原因で古い情報が表示されていないか
これらのチェックをひとつずつ行えば、多くの「CSSが効かない」問題は解決できます。
スタイルが他の要素に影響してしまう場合
CSSを適用したとき、意図していない要素までスタイルが変わってしまうことがあります。
これは、セレクタの指定が広すぎたり、他のスタイルとぶつかっていたりすることが原因です。
このような時は、次のような点を見直しましょう。
- セレクタをより限定的に指定する
- 必要に応じてclassやidを使って分ける
- 影響範囲を確認するため、ブラウザの開発ツールを使う
- 同じ要素に複数のスタイルが当たっていないか確認する
また、クラス名やID名をわかりやすく設計しておくと、トラブルを未然に防ぎやすくなります。
ブラウザごとの表示崩れの対処法
同じCSSを使っていても、ブラウザによって見た目が変わってしまうことがあります。
これは各ブラウザが標準で持っているスタイルや、解釈の違いが原因です。
このようなときは、次の対策が有効です。
- CSSリセット（Reset CSS）やNormalize.cssを使う
- paddingやmarginを明示的に指定する
- フォントや高さなどもブラウザ依存になるので注意する
- 古いブラウザではサポートされないCSSプロパティを避ける
- Chrome、Safari、Edgeなどで見た目を確認する
ブラウザの違いを意識してCSSを書くことで、表示崩れを防ぐことができます。
インラインCSSとの競合の対処方法
HTMLには、style属性を使った「インラインCSS」もあります。
これと埋め込みCSSが同じ要素に適用されていると、優先順位の違いで埋め込みCSSが無視されてしまうことがあります。
たとえば次のようなHTMLがあるとします。
<p style="color: red;">この文字は赤です</p>
<style>
p { color: blue; }
</style>
この場合、インラインCSSの赤が優先され、青は無視されます。
以下のように対策することが大切です。
- インラインCSSをなるべく使わない
- どうしても必要なときは!importantを使う
- どこにどのスタイルが効いているか整理する
- インラインCSSがある場合はそちらが最優先になることを理解する
スタイルの競合を防ぐには、なるべく一つの方法に統一するのが安全です。
セレクタの指定ミスによるトラブル例
CSSが反映されない原因のひとつに、セレクタの指定ミスがあります。
これにはクラス名やID名の間違い、HTMLタグのタイプミスなど、初歩的なミスが含まれます。
たとえば、HTMLで以下のように書いているのに、
<div class="box">内容</div>
CSSで次のように書いていたら反映されません。
.bok { background-color: yellow; }
このような間違いを防ぐためには、以下の工夫が有効です。
- クラス名・ID名のつづりを正しく統一する
- HTMLとCSSを並べて確認する
- 小文字・大文字の違いにも注意する
- セレクタは正確に書くことがCSSの基本
見直しをしっかり行えば、こうしたミスはすぐに解決できます。
キャッシュの影響による表示不具合の解消
CSSを更新したのに、画面に反映されないという場合、ブラウザのキャッシュが原因のことがあります。
キャッシュとは、前に読み込んだ情報を一時的に保存しておく機能のことです。
この問題を解消するには次のような方法があります。
- ブラウザのキャッシュを削除する
- ページをShift＋更新で再読み込みする
- CSSファイルのURLに?v=1などのバージョンをつける
- 開発中はキャッシュを無効にする設定を使う
- 更新した内容が正しく表示されるまで複数回リロードする
キャッシュによる不具合はとてもよくあるので、覚えておくと安心です。
まとめ
これまでに学んだ「HTMLに埋め込むCSSの方法」と「スタイルの適用例」をふりかえりましょう。
以下のポイントをおさえておくと、CSSを使うときに迷わず進められます。
- 埋め込みCSSは<style>タグを使って<head>内に書く
- 外部CSSと比べて手軽に使えるが再利用には向かない
- classやidを使うと特定の要素にだけスタイルが当てられる
- hoverやactiveで動きのあるデザインができる
- CSSが反映されないときは文法ミスやキャッシュをチェック
基本をおさえたら、実際に自分のHTMLページにCSSを埋め込んで試してみましょう！繰り返し使うことでどんどん上達できますよ。
