なぜ理解が必要なのか？
📌「HTMLだけだと、ページが地味…」
📌「色を付けたり、文字の大きさを変えたい」
📌「レイアウトを整えたい！」
そんなときに使うのが CSS（Cascading Style Sheets） です。
CSSを使えば、HTMLで作ったページに「色・大きさ・配置・余白」などのスタイル（見た目）をつけられます。
| できること | 例 |
|---|---|
| 文字の装飾 | 太字、色変更、サイズ変更など |
| レイアウトの調整 | 中央寄せ、余白、幅の調整 |
| 背景や枠線の設定 | 背景色、枠線、角丸など |
✅ Webサイトを「読むページ」から「見た目で印象づけるページ」に進化させます。
操作の流れ
CSSには大きく3つの書き方があります：
- 外部CSSファイルを使う（推奨）
<style>タグをHTML内に書く- タグに直接書く（非推奨）
ここでは、外部CSSファイルでの記述方法を紹介します。
【例：CSSの基本構造】
HTMLファイル側の書き方（<head>内）
<link rel="stylesheet" href="style.css">CSSファイル（style.css）の中身
body {
background-color: #f0f0f0;
font-family: sans-serif;
}
h1 {
color: navy;
font-size: 28px;
}
p {
color: #333;
line-height: 1.5;
}
📌 セレクタ { プロパティ: 値; } の形を覚えましょう！
| 用語 | 説明 |
|---|---|
| セレクタ | どのHTML要素に適用するか（例：h1, p） |
| プロパティ | 何を変えるか（例：色・サイズ） |
| 値 | 実際の設定内容（例：red, 16px） |
実際にやってみよう！
【課題：背景色と文字色を変えてみよう】
1.HTMLファイルを作成（例：index.html）→保存する
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSSの基本練習</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>私の好きなこと</h1>
<p>こんにちは。私はWeb制作を学んでいます。</p>
<p>将来は、やさしいデザインで人の役に立つサイトを作りたいです。</p>
<ul>
<li>旅行</li>
<li>読書</li>
<li>コーヒー</li>
</ul>
<p>よろしくお願いします！</p>
</body>
</html>
2.CSSファイルを作成（例：style.css）
3.下記をCSSに追加：
body {
background-color: #fffde7;
}
h1 {
color: darkgreen;
}
4.ブラウザで表示を確認
→ 背景が黄色っぽく、見出しが緑色になっていればOK！
解答
よくあるミス・注意点
- ❌
linkタグを書いていない → CSSが適用されない - ❌
.cssファイルの保存ミス → 拡張子やファイル名に注意 - ❌ セレクタのミス →
h1と書くのにH1と書いてしまう（大文字NG） - ❌ 半角記号の抜け →
:や;がないと反映されない