HTML で文字が表示できるようになったら、次はいよいよ CSS の出番です。
「 CSS って難しそう…」
「どこにどう書くの？」
と不安になるかもしれませんが、安心してください。
最初は”文字の色を変える”だけで十分。
この記事では、 CSS ファイルの作り方から、 HTML とのつなげ方、文字色や背景色を変える方法までを手を動かしながらゆっくり進めていきます。
むずかしい知識はまだ必要ありません。
自分の書いた HTML が”色”で変化する楽しさをまずは体験してみましょう。
ではさっそく、 CSS ファイルを作るところから始めます。
CSSファイルを作ってみよう
CSS は、 HTML で作った”内容”に色やデザインをつけるためのファイルです。
まずはその CSS ファイルを作るところから始めましょう。
難しい操作はありません。
HTML のときと同じ流れで進めればOKです。
CSSファイルって何？
HTML が”中身を書いたファイル”だったのに対して、 CSS は”見た目のルールを書いたファイル”です。
- HTML → ページの内容（文章・画像など）
- CSS → ページの見た目（色・大きさ・余白など）
という役割分担になっています。
CSS ファイルには必ず .css という拡張子がつきます。
style.csscolor.cssmain.css
style.css を作ってみよう
一般的に最初のCSSファイルは style.css と名付けることが多いです。
- 作業フォルダを VS Code で開く
- エクスプローラー（ファイルアイコン）を押す
- 左側のフォルダ名の右にある”新しいファイル”アイコンをクリック
- ファイル名を
style.cssと入力して Enter
これで、はじめてのCSSファイルが完成です
CSSを書く前に知っておきたい超基本
CSSを書くときのルールはとてもシンプルです。
- セレクタ（どの要素に？）
- プロパティ（何を？）
- 値（どうする？）
これを
セレクタ {
プロパティ: 値;
}という形で書きます。
たとえば……
p {
color: red;
}これは” p タグの文字を赤くしてね”という意味です。
次の章で実際に色を変えていきます！
ここまでのまとめ
- CSS ファイルは見た目のルールを書くファイル
- 拡張子は
.css style.cssを作れば準備完了- 書き方は”セレクタ { プロパティ: 値; }”の形が基本
HTMLとCSSをつなげるたった1行（<link>）
CSS ファイルを作っただけでは、まだ HTML とつながっていないため何を書いても反映されません。
ここでは、 HTML と CSS をつなげるためのたった1行の魔法のコードを紹介します。
linkタグの役割
HTML と CSS をつなぐのが <link>（リンクタグ）です。
役割はとてもシンプル。
「この HTML は、この CSS を読み込んで使うよ！」とブラウザに伝えるもの
というだけ。
これを書かないと、 CSS で色を変えてもまったく反映されません。
実際にHTMLに書いてみよう
index.html を開いて、 <head> タグの中に次の1行を追加します
<link rel="stylesheet" href="style.css">これだけで、 HTML と CSS がつながりました！
ファイル名は”style.css”と完全一致させる
ここで初心者がやりがちなミスが1つ。
CSS ファイル名と、 href="" の中の名前を一致させないと読み込まれません。
スペル1文字の違いでもNGです。
HTMLとCSSがつながる仕組みはこんな感じ
イメージするとこんな流れ
- HTML が読み込まれる
<link>タグを見つけて CSS を読み込む- CSS のルールを HTML に適用する
- ブラウザが画面に表示する
なので「 CSS が反映されない…」というときはまず <link> を疑うのが鉄則です。
つながらない時のチェックポイント
初心者がひっかかりやすいポイントをまとめます
- CSS ファイル名が一致しているか
- 拡張子が
.cssになっているか <link>が<head>の中にあるか- ファイルの場所が同じフォルダか
- 全角スペースが混ざっていないか
このどれかであることがほとんどです。
ここまでのまとめ
<link>は HTML と CSS をつなぐタグ<head>の中に<link rel="stylesheet" href="style.css">を書けばOK- ファイル名は完全一致させる
- 反映されない時は
<link>の確認から！
文字の色を変えてみよう（color）
HTML と CSS がつながったら、いよいよ文字の色を変える最初の CSS に挑戦です。
はじめのうちは、 CSS の仕組みを深く理解していなくても大丈夫。
まずは「変わった！」を体験することが一番重要です。
CSSの基本形を思い出そう
CSS は次の形で書きます
セレクタ {
プロパティ: 値;
}今回の目的は文字の色を変えるなので、
- セレクタ → どこを？（どのタグを？）
- プロパティ → color （色）
- 値 → red （赤色）
となります。
pタグの文字色を赤にしてみよう
では、作成した style.css に次のコードを追加してみましょう。
p {
color: red;
}HTML側に pタグを書いて確認してみよう
index.html の <body> に、適当に文章を1行書いてみましょう。
<body>
<p>これは段落のテキストです。</p>
</body>保存してブラウザを見てみよう
- style.css を保存（ Ctrl + S ）
- index.html も保存
- ライブプレビューなら自動反映
- 手動表示ならブラウザを更新
画面の文字が赤色になっていれば成功です。
色名以外にも色を指定できる
CSSにはいろいろな色の指定方法があります。
代表的にはこの3つ
- 色名（ red 、 blue 、 green など）
- #カラーコード（#ff0000 など）
- rgb（rgb(255, 0, 0) など）
最初は色名だけ覚えればOKです！
色が変わらないときのチェックポイント
<link>の書き忘れ- CSS のファイル名ミス（
style.cssになっている？） - pタグに書いていない
- 保存していない
- 半角と全角の混ざり（特に{}や:）
ほとんどの原因はこのどれかです。
ここまでのまとめ
- CSS の基本形は”セレクタ { プロパティ: 値; }”
p { color: red; }で段落の文字が赤くなる- 色名だけでも十分使える
- 反映されない時は link と ファイル名 を確認
背景の色を変えてみよう（background-color）
文字の色が変えられたら、次は背景の色を変えてみましょう。
背景色が変わると、画面の印象がガラッと変わるので「 CSS ってすごい！」を一番実感しやすい部分です。
background-color は”背景の色”を変えるプロパティ
文字の色が color だったように、背景色は background-color を使います。
CSS の基本形に当てはめると
セレクタ {
background-color: 色;
}これだけです。
まずは body 全体の背景色を変えてみよう
画面全体の背景色を変えたい場合は、 body をセレクタに指定 します。
style.css に次を追加してみてください。
body {
background-color: lightblue;
}保存したらブラウザを確認！
画面全体が 水色（ lightblue ） になっていたら成功です。
色の指定方法は3種類（最初は色名だけでOK）
CSS では色の指定方法が複数ありますが、初心者のうちは 色名だけで十分 です。
- lightblue
- pink
- lightgreen
- yellow
- lavender
あとからカラーコードやrgbも学びますが、今は”色名でOK”と思っておいて大丈夫です。
特定のタグだけ背景色を変えることもできる
たとえば <p> だけ背景色を変えたい場合
p {
background-color: yellow;
}これで段落だけ黄色い背景になります。
HTML 側はこんな感じ
<p>この段落だけ背景が黄色になります。</p>
色が変わらないときの原因リスト（超よくある）
背景色が変わらない場合のチェックポイントをまとめておきます。
style.cssの保存を忘れているstyle.cssとindex.htmlのファイルの場所がズレている<link>の記述が間違っている- 色名を間違えている（例： lightbule → ×）
- 全角の : や ; が紛れ込んでいる
- CSS のカッコ
{ }を閉じ忘れている
特に“スペルミス”と“ファイル名のミス”は本当によくあります。
落ち着いて一つずつ確認すれば必ず解決します。
ここまでのまとめ
background-colorは背景色を変えるプロパティ- body に書くと画面全体の背景が変わる
- 色名だけでも十分遊べる
- 反映されない時はリンク・保存・スペルをチェック
クラスって何？最初のつまずきポイント解説
CSSを学び始めると、必ず出てくるのが class （クラス）という考え方。
多くの初心者がここで一度つまずきます。
でも大丈夫です。
クラスは“名前をつけて、 CSS のルールを当てるための仕組み”です。
意味がわかれば一気に楽になります。
クラスは“名前をつける”ための仕組み
HTML のタグには、 class ＝ 名前をつけることができます。
たとえば
<p class="highlight">ここだけ強調したい文章です。</p>この場合、pタグに highlight という名前（クラス）をつけた。
という意味になります。
CSS側で”その名前にスタイルを当てる”
HTML で名前をつけたら、CSS 側でその名前を使ってデザインします。
書き方はこちら
.highlight {
color: red;
}ポイントは “.（ドット）”を書くこと。
クラスを指定するときは必ずドットをつけます。
これで、 highlight というクラスがついた部分だけ文字が赤くなる。という仕組みになります。
クラスが必要な理由は？
HTML のタグ名だけでは、同じタグに全部同じデザインが当たってしまう からです。
p {
color: red;
}すべての p が赤くなる（困ることも多い）
でもクラスを使えば、
- 一部だけ色を変える
- 特定の場所だけ背景を変える
- 見出しのデザインを部分的に変える
など、細かいデザイン分けができるようになります。
これがクラスが使われる最大の理由です。
初心者がよく混乱するポイントまとめ
classは HTMLに書く、.class は CSSに書く
これ、間違いやすいです。
- HTML ：
class="name" - CSS ：
.name { … }
場所が違います。
スペルミスが多い
初心者あるある
class=がcalss=になっている- CSSの
.highlightが.hightlightになっている - ダブルクォーテーションの閉じ忘れ
1文字違うだけで反映されないので、要注意。
同じクラス名を複数のタグに使うことができる
クラスは”名前”なので、何度使ってもOKです。
<p class="note">注意書きです</p>
<p class="note">もう一つの注意</p>CSSで.noteを指定すれば、両方に同じデザインが当たります。
クラスを使ったサンプル（まとめ）
<p class="highlight">ここだけ赤くしたい文章です。</p>
<p>これは普通の文章です。</p>.highlight {
color: red;
}highlightクラスがついたpだけ赤くなる- 他の
pは変わらない
ここまでのまとめ
- クラス ＝ タグに付ける”名前”
- HTML で名前をつけて、 CSS でデザインを当てる
- CSS ではクラスに”.（ドット）”を付ける
- 一部だけデザインを変えたい時に最適
- スペルミスに要注意（最強のつまずきポイント）
CSSが反映されない時のチェックリスト
「 CSS が反映されない…」
これは初心者が必ず一度は経験する、超あるある問題です。
でも安心してください。
原因はほとんど決まったパターンに絞られています。
CSSファイル名が間違っている
最も多い原因がこれ。
style.cssがsytle.cssになっているstyle.css.cssになっているStyle.cssのように大文字混ざりstyle.csのように拡張子が違う
1文字違うだけでも読み込まれません。
HTML側の link の書き方が間違っている
これもよくあります。
<link rel="stylesheet" href="style.css">この1行の中の
stylesheetのスペルhrefの中のファイル名- クォートの閉じ忘れ
ここでミスすると CSS が読み込まれません。
HTML と CSS が同じフォルダに入っていない
階層を間違えるとリンクが切れます。
- project/
- index.html
- css/
- style.css
この場合の書き方は
<link rel="stylesheet" href="css/style.css">つまり、 CSS の場所までの道（パス）を書く必要がある。
初心者が最もつまずくポイントなので、慣れるまでは HTML と CSS を同じフォルダに置くのがおすすめです。
CSSの文法ミス（半角・全角・{} の閉じ忘れ）
スペル以外にも次のようなミスが多いです
{と}の閉じ忘れ:や;が全角になっている- セミコロン（;）を書き忘れている
- 不要な文字が混じっている
p {
color: red ← セミコロン抜け
}正しくは
p {
color: red;
}VS Code はエラーがあっても止まらないため、こういうミスに気づきにくいのが特徴です。
HTML の中身が関係ない場所にある
CSS は、
- タグの名前
- class
- id
などを使って当てています。
つまり、 CSS が当てたい対象が存在していないと反映されません。
p {
color: red;
}<body>
<div>これはdivです</div>
</body>p タグが1つもないので、色は変わらない
保存していない（最強のあるある）
初心者のトラブル原因の半分はこれです。
- CSS を保存（ Ctrl + S ）
- HTML を保存（ Ctrl + S ）
両方必要になるときもあります。
Live Server も”保存しないと反映されない”ので注意。
ブラウザが古い情報をキャッシュしている
ブラウザは一度読み込んだ CSS をしばらく覚えています（キャッシュ）。
そのせいで、新しい CSS が反映されないことがあります。
これでたいてい直ります。
ここまでのまとめ
- ファイル名（
style.css）のスペルチェック <link>の記述ミスがないか- HTML と CSS のフォルダ位置（パス）が正しいか
- セミコロン・{} の閉じ忘れがないか
- CSS が当たるタグやクラスが HTML に存在するか
- 保存しているか
- 強制再読み込み（ Ctrl + F5 ）
このチェックリストを見れば、” CSS が反映されない問題”の 90％ は解決できます。
今日できたこと＆次のステップ
ここまでできたあなたは、 CSS の”最初の一歩”をしっかり踏み出せています！
ただ色をつけただけに見えるかもしれませんが、これは” HTML と CSS をつなげる → デザインを当てる”という Web 制作の基本を理解した、すごく大きな前進です。
まずは今日学んだことを整理してみましょう。
style.cssを自分で作れるようになった<link>タグで HTML と CSS をつなげる方法を理解した- CSS の基本形”セレクタ { プロパティ: 値; }”が書けた
- 文字の色を変える（
color）ことができた - 背景色を変える（
background-color）ことができた - クラス（
class）の意味と使い方を理解した - CSS が反映されないときのチェックができるようになった
これだけできればもう、” CSS を書ける人の仲間入り”です。
確認問題
HTMLとCSSをつなぐタグはどれ？
<script><link><style>
答え：2. <link>
クラス（class）をCSSで指定するときの書き方は？
class highlight { color: red; }.highlight { color: red; }#highlight { color: red; }
答え：2. .highlight { color: red; }
自分で背景色を変える練習をしてみよう
style.css に次のように書いて、好きな色に変えてみましょう
body {
background-color: pink;
}色名を変えて好きな色にしてみてください。
次は”フォルダーとファイルの基本”に進もう
次はフォルダとファイルの基本に進んでいきます。
ここでは、
- フォルダの正しい作り方
- 画像用フォルダの作り方
- 階層（かいそう）とは？
- Web 制作で絶対に避けられない”パス”の考え方
などを、初心者でもつまずかないように解説していきます。
Web 制作ではフォルダ整理がとても大事なので、ここで理解しておくと一気に楽になりますよ。