なぜ理解が必要なのか？
📌 CSSはWebページの「見た目（色・サイズ・配置）」を決めるスタイルシートです。
📌 でも…どこに書いたらいいの？どうやってHTMLとつなげるの？
✅ CSSの「適用方法」は 主に3つ あります。それぞれの特徴を覚えておくと、エラーの原因をすばやく見つけられたり、応用が効くようになります！
操作の流れ
✅ 方法①：外部スタイルシート（もっともおすすめ）
特徴：CSSを別ファイルにしてリンクする方法（再利用・管理に便利）
<!-- HTMLファイルの<head>内に書く -->
<link rel="stylesheet" href="style.css">/* 別ファイル style.css の中に書く */
body {
background-color: #f0f0f0;
}🔹 おすすめ理由： ファイルが分かれていてスッキリ。複数のHTMLに使い回せる！
※赤い太字になっている部分が非常に重要になります。ファイルのパスを意識して、間違いのないようにしましょう。
ファイルのパスについてわからない人はファイルのパス（相対/絶対）を確認してください。
✅ 方法②：内部スタイルシート（ページ内に直接書く）
特徴：HTMLファイルの中に <style> タグで書く
<head>
<style>
p {
color: green;
}
</style>
</head>
🔹 こんなときに便利： この1ページだけデザインを変えたい／練習用の簡易テストなど
※外部スタイルシートよりも内部スタイルシートの方が優先です。
✅ 方法③：インラインスタイル（直接タグに書く）※推奨されない
特徴：HTMLタグの中に style 属性で書く方法
<p style="color: red;">この文字は赤です</p>🔹 注意点： HTMLがごちゃごちゃになる。あとで直すのが大変！
| 方法 | 管理しやすさ | 推奨度 |
|---|---|---|
| 外部CSS（①） | ◎（ファイル分離） | ★★★ |
| 内部CSS（②） | ○（少ない量なら） | ★★☆ |
| インラインCSS（③） | △（小規模・例外） | ★☆☆ |
実際にやってみよう！
【課題】3つの方法をそれぞれ試して、背景色を変えてみよう！
HTMLファイルを作成（index.html）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSSの基本練習</title>
</head>
<body>
<h1>私の好きなこと</h1>
<p>こんにちは。私はWeb制作を学んでいます。</p>
<p>将来は、やさしいデザインで人の役に立つサイトを作りたいです。</p>
<ul>
<li>旅行</li>
<li>読書</li>
<li>コーヒー</li>
</ul>
<p>よろしくお願いします！</p>
</body>
</html>以下の3つのパターンを使って、bodyの背景色を変えてみる
- 外部CSSファイル（
style.css） <style>タグ（内部CSS）style=""属性（インラインCSS）
解答
外部CSSファイル（style.css）↓
<!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><style> タグ（内部CSS）↓
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSSの基本練習</title>
<style>
body{
background-color:aqua;
}
</style>
</head>
<body>
<h1>私の好きなこと</h1>
<p>こんにちは。私はWeb制作を学んでいます。</p>
<p>将来は、やさしいデザインで人の役に立つサイトを作りたいです。</p>
<ul>
<li>旅行</li>
<li>読書</li>
<li>コーヒー</li>
</ul>
<p>よろしくお願いします！</p>
</body>
</html>style="" 属性（インラインCSS）↓
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSSの基本練習</title>
</head>
<body style="background-color:aqua">
<h1>私の好きなこと</h1>
<p>こんにちは。私はWeb制作を学んでいます。</p>
<p>将来は、やさしいデザインで人の役に立つサイトを作りたいです。</p>
<ul>
<li>旅行</li>
<li>読書</li>
<li>コーヒー</li>
</ul>
<p>よろしくお願いします！</p>
</body>
</html>よくあるミス・注意点
- ❌ CSSファイルのパスを間違える → リンクできず、デザインが反映されない
- ❌
<style>タグを<body>に書いてしまう → 正しくは<head>内 - ❌ インラインスタイルが優先されて、外部CSSが無視される → 優先順位の仕組みに注意