CSS コース
1 2 3 4 5 6
1 STEP 1 / 6

CSSとは？初心者向けわかりやすい解説【中高生向け】

⏱ 約25分 やってみよう 1 クイズ 1

🎯 このレッスンで学ぶこと

  • CSSとは何かを説明できます。
  • セレクタ・プロパティ・値の3つを書けます。
  • CSSファイルをHTMLに読み込めます。
  • 背景色と文字色を変えられます。

📖 HTMLコースの復習

  • HTMLはウェブページの骨格を作る言語
  • <div> や <p> などのタグで構造を作る
  • HTMLコースで学んだ div・span・id・class を使って、CSSでデザインを当てていきます（class 属性の使い方は、このレッスンで詳しく学びます）

📖 導入 — HTMLだけだと、こんな見た目になる

前のHTMLコースで、ウェブページの「骨格」を作る方法を学びましたね。でも、HTMLだけで作ったページは白い背景・黒い文字・飾り気がない…という見た目になります。

お気に入りのウェブサイトみたいに、色やデザインをつけるには CSS を使います！

▼ HTMLだけの場合（CSSなし）:

▶ プレビュー

▼ CSSを適用した場合:

▶ プレビュー

同じHTMLでも、CSSを加えるだけでこんなに印象が変わります！

📝 CSSとは？

CSS（Cascading Style Sheets）は、ウェブページの「見た目」を整えるための言語です。HTMLが「骨格」なら、CSSは「服や化粧」のようなものです。

CSSは セレクタ・プロパティ・値 の3つで構成されます。

セレクタ {
  プロパティ: 値;
}
🤔 考えてみよう：color: red; の red を blue や #ff6600 に変えるとどうなる？ブラウザで試してみよう！
  • セレクタ：どのHTML要素に適用するか（例：h1、p、.クラス名）
  • プロパティ：何を変えるか（例：color、background-color、font-size）
  • 値：どう変えるか（例：red、blue、20px）

具体例:

h1 {
  color: darkblue;       /* 文字色を紺色に */
  font-size: 24px;       /* 文字サイズを24pxに */
  background-color: lightyellow;  /* 背景色を薄黄色に */
}

CSSは別ファイル（.css）に書いて、HTMLの <head> から読み込むのが一般的です。

💡 CSSの3つの書き方:
① 外部CSS（推奨）: 別ファイルに書いて <link> で読み込む
② 内部CSS: HTMLの <style> タグ内に書く
③ インラインCSS: タグに直接 style="..." と書く

基本的には①の外部CSSを使いましょう。HTMLとCSSを分けることで管理しやすくなります。 
<link rel="stylesheet" href="style.css">
部分意味
rel="stylesheet"「これはスタイルシートです」とブラウザに伝える
href="style.css"読み込むCSSファイルの名前

🎨 段階的に試してみよう

CSSの書き方を3ステップで体験しましょう。

ステップ1：文字色を変える

h1 {
  color: red;
}

▶ プレビュー

ステップ2：背景色を変える

body {
  background-color: lightblue;
}

▶ プレビュー

ステップ3：複数の要素にスタイルを当てる

h1 {
  color: darkblue;
}

p {
  color: green;
}

▶ プレビュー

ステップ4：classセレクタを使う

特定の要素だけにスタイルを当てたいときは、HTMLに class 属性をつけて、CSSで .クラス名 と書きます。

.highlight {
  color: red;
  font-weight: bold;
}
<p class="highlight">この文だけ赤く太字になります</p>
<p>この文は普通のままです</p>

▶ プレビュー

🎨 色の指定方法（予告）:
CSSでは色を3つの方法で指定できます:
・色名: red, blue, green
・16進数: #ff0000, #4338ca
・RGB: rgb(255, 0, 0)
詳しくは次のレッスンで学びます！

💻 やってみよう！

  1. ファイルを2つ用意する
    lesson0で作った my-practice フォルダを VS Code で開き、index.html と style.css という新しいファイルを2つ作ります。（2つのファイルは必ず同じフォルダに置いてください。別のフォルダに置くとCSSが読み込まれません）（HTMLコースで作った index.html は使いません。CSSの練習用に新しいファイルを作ります）
  2. 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>はじめてのCSS</h1>
    <p>文字の色と背景色を変えてみました！</p>
  </body>
</html>
  • CSSを書く
    style.css
    body {
  background-color: lightyellow;
}

h1 {
  color: darkblue;
}

p {
  color: green;
}

    ▶ プレビュー

  • ブラウザで確認する
    index.html をダブルクリックして Google Chrome などのブラウザで開いて、黄色い背景に紺色の見出しと緑の文章が表示されたら成功です！ 🎉
  • 自由に実験してみよう
    style.css の色を変えてみましょう。darkblue を purple に、lightyellow を #ffe0e0 に変えるとどうなる？保存してブラウザを更新して確認！
    • ⚠️ CSSが効かないときの確認手順:
    ① ファイル名が正しいか確認（style.css と href="style.css" が一致しているか）
    ② HTMLとCSSが同じフォルダにあるか確認
    ③ セミコロン（;）や波括弧（）の閉じ忘れがないか確認
    ④ ブラウザのキャッシュをクリア（Ctrl+Shift+R）して再読み込み

    ⚠️ よくあるミス

    ⚠️ セミコロン（;）を忘れるとスタイルが効かない！
    color: red ← セミコロンがないと、次のプロパティも巻き込んで効かなくなることがあります。必ず color: red; と書きましょう。
    ⚠️ 波括弧（）の閉じ忘れ！
    h1 { color: red; ← } を忘れると、それ以降のスタイルがすべて壊れます。開いたら必ず閉じましょう。
    ⚠️ ファイル名のスペルミス（link タグの href）！
    HTMLで href="style.css" と書いたのに、ファイル名が stlye.css だとCSSが読み込まれません。ファイル名を正確に一致させましょう。

    📌 まとめ

    • ✅ CSS はウェブページの見た目を整える言語
    • ✅ セレクタ { プロパティ: 値; } の形で書く
    • ✅ セレクタで「どの要素か」、プロパティで「何を変えるか」、値で「どう変えるか」を指定する
    • ✅ CSSは別ファイルに書いて <link> タグでHTMLに読み込む

    🚀 次のレッスンへ

    次のレッスンでは、文字の大きさやフォントを変える方法を学びます！

    🔍 もっと調べてみよう：「CSS セレクタ 書き方」で検索してみよう。わからないことはどんどん検索する習慣をつけよう！

    ✅ このレッスンが終わったら

    ドリルで知識を確認してから次に進むと、理解が定着しやすいよ！

    次のレッスン: 文字のスタイル → 📝 このレッスンの問題を解く →

    このレッスンは役に立ちましたか？

    目次
      他の質問を見る → 詰まった？質問する

      📖 このレッスンの用語

      ⚠️ よくあるエラー

      📝 関連ブログ記事

      🏋️ 練習問題

      このレッスンの練習問題に挑戦（Q1〜Q5）→

      📋 チートシート

      チートシートを見る →
      ← CSS コース一覧に戻る
      𝕏 シェア LINE シェア
      次のレッスン: 文字のスタイル →