2026年4月14日
CSSとは何か？
HTMLでウェブページの「内容」を作ったあと、次に必要なのが CSS（シーエスエス） です。CSSは Cascading Style Sheets の略で、「ウェブページの見た目を整えるための言語」です。
HTMLだけで作ったページは、白い背景に黒い文字が並ぶだけのシンプルな見た目になります。CSSを使うことで、文字の色・大きさ・背景色・余白などを自由に変えられます。
HTML = 骨格（何を表示するか）、CSS = 見た目（どう見せるか） と覚えておきましょう。
CSSを学ぶ前に、HTMLの基本を知っておく必要があります。HTMLがわからないと、CSSで「どこにスタイルを当てるか」が理解できないからです。HTMLをまだ学んでいない人は「HTMLで最初のページを作ろう」を先に読んでおきましょう。
CSSは1996年に生まれた技術です。それ以来ずっと進化を続けています。今ではアニメーションやレイアウトなど、高度なデザインもCSSだけで実現できます。でも最初は「文字の色を変える」「背景色をつける」だけで十分です。少しずつできることを増やしていきましょう。
CSSでできること
CSSを使うと、次のようなことができます。
- 文字の色・大きさを変える：赤い見出し、大きなタイトルなど
- 背景色をつける：ページ全体やボタンの背景を好きな色に
- 余白を調整する：文字や画像の間隔を整えて読みやすくする
- ボタンをデザインする：角を丸くしたり、影をつけたり
- レイアウトを組む：横並びや中央揃えなど、配置を自由に決める
お気に入りのウェブサイトのカラフルなデザインも、すべてCSSで作られています。
🔗 あわせてpositionプロパティ完全解説もチェックしてみましょう。
CSSの基本的な書き方
CSSは セレクタ・プロパティ・値 の3つで構成されています。
基本の形
/* セレクタ（例：h1, p, .btn） */ {\n /* プロパティ: 値; */\n}▶ プレビュー
- セレクタ：どのHTML要素にスタイルを当てるか（例：
h1・p・.btn） - プロパティ：何を変えるか（例：
color・font-size・background-color） - 値：どう変えるか（例：
red・24px・#f0f0f0）
コード例：文字色と背景色を変える
h1 {\n color: red;\n background-color: lightyellow;\n}\n\np {\n font-size: 18px;\n color: #333333;\n}よく使うプロパティ一覧
| プロパティ | 意味 | 例 |
|---|---|---|
color | 文字の色 | color: blue; |
background-color | 背景色 | background-color: #fff; |
font-size | 文字の大きさ | font-size: 20px; |
font-weight | 文字の太さ | font-weight: bold; |
margin | 要素の外側の余白 | margin: 16px; |
padding | 要素の内側の余白 | padding: 8px 16px; |
border-radius | 角を丸くする | border-radius: 8px; |
CSSの3つの書き方
CSSをHTMLに適用する方法は3つあります。それぞれの特徴を知っておきましょう。
1つ目：インラインスタイル
HTMLタグに直接style属性を書く方法です。たとえば「style="color: red;"」のように書きます。手軽ですが、同じスタイルを何度も書くことになるので、あまりおすすめしません。
2つ目：内部スタイルシート
headタグの中にstyleタグを書く方法です。この記事のハンズオンで使っている方法がこれです。1つのHTMLファイルの中で完結するので、練習には最適です。
3つ目：外部スタイルシート
CSSを別ファイル（例：style.css）に書いて、HTMLからlinkタグで読み込む方法です。実際のウェブサイト制作ではこの方法が主流です。複数のページで同じデザインを使い回せるからです。
初心者のうちは2つ目の内部スタイルシートで練習しましょう。慣れてきたら3つ目の外部スタイルシートに切り替えるのがおすすめです。
📖 詳しくはCSSカスタムプロパティで解説しています。
セレクタの種類を覚えよう
セレクタには主に3つの種類があります。
1つ目：タグセレクタ
HTMLのタグ名をそのまま書きます。たとえば「h1」や「p」です。そのタグすべてにスタイルが当たります。
2つ目：クラスセレクタ
ドット（.）のあとにクラス名を書きます。たとえば「.card」です。HTMLでclass="card"と指定した要素だけにスタイルが当たります。同じクラスを複数の要素につけられるので、一番よく使います。
3つ目：IDセレクタ
シャープ（#）のあとにID名を書きます。たとえば「#header」です。HTMLでid="header"と指定した要素に当たります。IDはページ内で1つだけなので、特定の1つの要素にだけスタイルを当てたいときに使います。
セレクタについてもっと詳しく知りたい人は「CSSセレクタの種類と使い方」を読んでみてください。子孫セレクタや擬似クラスなど、便利なセレクタを学べます。
CSSを書いてみよう（ハンズオン）
HTMLファイルにCSSを追加して、自己紹介ページをデザインしてみましょう。
HTMLにCSSを書く方法
<head> の中に <style> タグを追加して、その中にCSSを書きます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>自己紹介ページ</title>
<style>
body {
background-color: #f0f9ff;
font-family: sans-serif;
}
h1 {
color: #0d9488;
font-size: 32px;
}
p {
font-size: 18px;
color: #333;
}
.card {
background-color: white;
padding: 24px;
border-radius: 12px;
max-width: 480px;
margin: 40px auto;
}
</style>
</head>
<body>
<div class="card">
<h1>はじめまして！</h1>
<p>私の名前は【名前】です。</p>
<p>好きなものはプログラミングです。</p>
</div>
</body>
</html>💡 ポイント：
.cardのように.から始まるセレクタは、class="card"の要素に当たるmargin: 40px auto;で要素を中央に配置できる- 色は名前（
red）でも16進数（#ff0000）でも書ける
⚠️ よくあるミス：
- プロパティと値の間の
:（コロン）を忘れる - 各行末の
;（セミコロン）を忘れる と（波かっこ）の対応がずれる
色の指定方法
CSSで色を指定する方法は3つあります。
1つ目：色の名前
「red」「blue」「green」など、英語の色名で指定します。約140種類の色名が使えます。手軽ですが、細かい色の調整はできません。
2つ目：16進数（ヘキサ）
「#ff0000」のように、シャープのあとに6桁の英数字で指定します。最初の2桁が赤、次の2桁が緑、最後の2桁が青の強さを表します。「#ff0000」は赤が最大で、緑と青がゼロなので、真っ赤になります。
3つ目：rgb関数
「rgb(255, 0, 0)」のように、赤・緑・青の値を0〜255で指定します。16進数と同じ仕組みですが、数字で書くのでわかりやすいです。
最初は色の名前で書いて、慣れてきたら16進数を使うのがおすすめです。好きな色の16進数コードは、ブラウザで「カラーピッカー」と検索すると調べられます。
CSSが効かないときの対処法
CSSを書いたのに見た目が変わらないことがあります。よくある原因と対策を紹介します。
原因1：セレクタのスペルミス
クラス名を「.card」と書くべきところを「.crad」と書いていませんか。HTMLのclass属性とCSSのセレクタが完全に一致しているか確認しましょう。
原因2：セミコロンの書き忘れ
プロパティの末尾にセミコロン（;）がないと、その行以降のスタイルが全部無視されます。
原因3：波かっこの閉じ忘れ
閉じかっこ（}）が足りないと、それ以降のスタイルが全部壊れます。開きかっこと閉じかっこの数が同じか数えてみましょう。
原因4：キャッシュが残っている
ブラウザが古いCSSを記憶していることがあります。Ctrl + Shift + R（Macの場合はCommand + Shift + R）で強制リロードしてみましょう。
困ったときはブラウザの開発者ツールを使いましょう。F12キーで開けます。要素を選ぶと、どのCSSが当たっているか確認できます。
余白の使い方
ウェブページを読みやすくするには、余白（よはく）が大切です。CSSではmarginとpaddingで余白を設定します。
margin（マージン）は要素の外側の余白です。要素と要素の間隔を空けるときに使います。padding（パディング）は要素の内側の余白です。要素の枠と中身の間隔を空けるときに使います。
余白の詳しい使い方は「marginとpaddingの違いと使い方」で解説しています。
👉 Flexbox入門も参考にしてください。
CSSを学んだあとの次のステップ
CSSの基本がわかったら、次に学ぶべきことを紹介します。
1つ目はFlexbox（フレックスボックス）です。要素を横並びにしたり、中央に揃えたりするレイアウト技術です。ナビゲーションメニューやカードの横並びに使います。
2つ目はGrid（グリッド）です。ページ全体を格子状に区切ってレイアウトする技術です。複雑なページ構成を作るときに便利です。
3つ目はレスポンシブデザインです。画面の大きさに合わせてレイアウトを変える技術です。スマホでもパソコンでも見やすいページを作れます。メディアクエリ（media query）という仕組みを使います。
4つ目はアニメーションです。ボタンにカーソルを乗せたときに色が変わったり、要素がふわっと表示されたりする動きをCSSだけで作れます。
すべてを一度に覚える必要はありません。まずはこの記事で学んだ基本をしっかり使えるようになりましょう。そのあとで、作りたいものに合わせて新しい技術を1つずつ学んでいけば大丈夫です。
まとめ
- ✅ CSS はウェブページの見た目を整えるための言語
- ✅ セレクタ { プロパティ: 値; } の形で書く
- ✅
color・font-size・background-colorなど、よく使うプロパティを覚えよう - ✅
<style>タグを<head>の中に書くと、HTMLにCSSを追加できる - ✅
.クラス名セレクタで、特定の要素だけにスタイルを当てられる
CSSの基本がわかったら、レッスンでもっと詳しく学んでみましょう。余白・ボックスモデル・レイアウトなど、実践的なデザインの作り方を学べます。
あわせて読みたい記事
- CSS練習問題 — 学んだCSSの知識を問題で定着させよう