LTech

レッスン2: CSSのルールを覚えよう！基本構文＆コメントの書き方

CSSの基本構文（セレクタ・プロパティ・値）とコメントの書き方について学びます。

🎯 学習目標

  • CSSの基本構文（セレクタ・プロパティ・値）を理解する
  • セレクタの種類を知る（タグ名・クラス・ID）
  • コメントの書き方を覚える

📘 目次

  1. CSSの基本構文
  2. セレクタの種類
  3. コメントの書き方
  4. 今日のまとめ
  5. 演習：CSSの構文を試してみよう
  6. 理解度チェック

📚 レッスン

1. CSSの基本構文

CSSは、HTMLの特定の要素に「どんな見た目を適用するか」を指定するためのルール（構文）でできています。基本的な書き方はこのような形です。

セレクタ {
  プロパティ: 値;
}

👇 例

h1 {
  color: blue;
  font-size: 24px;
}

💡 1つのセレクタに複数のスタイルを指定可能

中かっこ {} の中に複数のプロパティと値を「1行ずつ」「セミコロン区切りで」書くことができます。

p {
  color: navy;
  font-size: 18px;
  line-height: 1.6;
}

1. セレクタ

「どのHTML要素にスタイルを適用するか」を指定するもの

セレクタ 意味 例
p <p> タグすべてに適用 p { color: red; }
.class名 指定したクラスを持つ要素に適用 .title { font-weight: bold; }
#id名 指定したIDを持つ要素に適用（1ページ1回） #main { background-color: yellow; }
* すべての要素に適用 * { margin: 0; }
親要素 子要素 親要素の中の子要素に適用 .container p { color: blue; }

💡 セレクタはターゲットを決める「的（まと）」のようなものです！

2. プロパティ

「どの見た目の項目を変更するか」を指定するもの

プロパティ 内容（何を変える？） 例
color 文字の色を変更 color: red;
font-size 文字の大きさを指定 font-size: 20px;
background 背景色や背景画像を指定 background: #f0f0f0;
margin 要素の外側の余白 margin: 10px;
padding 要素の内側の余白 padding: 8px;
border 枠線の太さ・色・スタイルを設定 border: 1px solid black;
text-align テキストの配置（左寄せ・中央など） text-align: center;

💡 プロパティは「何を変えるのか？」という項目名です。

3. 値

「どのように変えるか（具体的な内容）」を指定するもの

値はプロパティとセットで使います：

  • color: blue; → 文字の色を「青」にする
  • font-size: 16px; → 文字の大きさを「16ピクセル」にする
  • margin: 20px; → 外側の余白を「20ピクセル」にする

値の書き方のポイント

  • 数値と単位を組み合わせることが多い（例：12px, 1.5em, %）
  • 色の指定方法は複数ある（例：red, #ff0000, rgb(255, 0, 0)）

2. セレクタの種類

セレクタとは、どのHTML要素にスタイルを適用するかを指定するものです。
セレクタには様々な種類があり、ここでは代表的なものを紹介します。

タグ名セレクタ

要素のタグ名で指定します（例：h1, p, div など）。

<h1>タイトル</h1>
h1 {
  color: blue;
}

クラスセレクタ（.から始める）

classに対してスタイルを適用したいときに使用。

<p class="highlight">この文章は強調表示されます</p>
.highlight {
  background-color: yellow;
}

IDセレクタ（#から始める）

idに対してスタイルを適用する場合に使用。

<p id="post">これは特別な段落です</p>
#post {
  font-weight: bold;
}
💡 クラスとIDの違い
  • クラス：複数の要素に使える
  • ID：ページ内で1つの要素にだけ使う

子孫セレクタ（スペース区切り）

特定の要素の中にある子要素を指定する場合に使用します。スペースで区切って記述します。

<div class="container">
  <p>この段落はスタイルが適用されます</p>
  <span>このspanも適用されます</span>
</div>
<p>この段落は適用されません</p>
.container p {
  color: blue;
  font-size: 18px;
}

.container span {
  background-color: yellow;
}

💡 子孫セレクタのポイント

  • スペースで区切って記述（例：.container p）
  • 直接の子要素だけでなく、孫要素にも適用される
  • より具体的な指定ができるため、スタイルの優先度が高くなる
子要素と孫要素について

HTMLでは要素が階層構造になっています。親要素の中に子要素があり、その子要素の中にさらに孫要素があるという構造です。

<div class="parent">          <!-- 親要素 -->
  <p>子要素</p>              <!-- 子要素 -->
  <div>                      <!-- 子要素 -->
    <span>孫要素</span>      <!-- 孫要素 -->
  </div>
</div>

子孫セレクタは、この階層構造を利用してスタイルを適用します。

/* 親要素内のすべてのp要素（子要素・孫要素問わず）に適用 */
.parent p {
  color: blue;
}

/* 親要素内のすべてのspan要素（子要素・孫要素問わず）に適用 */
.parent span {
  background-color: yellow;
}

3. コメントの書き方

CSSでは、メモや説明文を「コメント」として書くことができます。コメントはブラウザには表示されず、スタイルにも影響を与えません。

/* これはコメントです */
p {
  color: green;  /* 緑色にする */
}

コメントの使い方

  • ブロックごとの区切り説明
  • 特定の設定の理由を残す
  • テスト用に一時的にスタイルを無効化する（コメントアウト）

今日のまとめ

学んだこと 内容
CSSの基本構文 セレクタ { プロパティ: 値; } 形式で記述
セレクタの種類 タグ名、クラス（.）、ID（#）
コメントの書き方 /* コメント */ で説明を追加できる
クラスとIDの違い クラスは複数に使える、IDは1つだけ

📚 リファレンス

このレッスンで学んだCSSプロパティの詳細については、リファレンスページで確認できます。

✍️ 演習問題

ここでは学んだ内容を実際に使って、簡単な演習問題に挑戦してみましょう。エディタを使って実際にコードを書いてみてください。

右側のエディタにコードを入力して「実行」ボタンをクリックすると、結果をプレビューで確認できます。

1. CSSの構文を試してみよう

  1. 右側のインラインエディタにコードを書いてみましょう
  2. それぞれのセレクタがどの要素に適用されているか観察してみよう
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>CSS練習</title>
  <style>
    /* 見出しの色を青に */
    h1 {
      color: blue;
    }

    /* 段落の文字色を赤に */
    p {
      color: red;
    }

    /* 特別な段落の背景を黄色に */
    .highlight {
      background-color: yellow;
    }

    /* メイン段落のフォントを太字に */
    #main {
      font-weight: bold;
    }
    
    /* コンテナ内の段落の色を緑に */
    .container p {
      color: green;
    }
  </style>
</head>
<body>
  <h1>CSSの練習</h1>
  <p>これは普通の段落です。</p>
  <p class="highlight">これはハイライトされた段落です。</p>
  <p id="main">これは特別な段落です。</p>
  
  <div class="container">
    <p>これはコンテナ内の段落です。緑色で表示されます。</p>
    <span>これはコンテナ内のspanです。</span>
    <div class="nested">
      <p>これはネストされた段落です（孫要素）</p>
      <span>これはネストされたspanです（孫要素）</span>
    </div>
  </div>
</body>
</html>

2. 変更してみよう！

  1. 見出しの色を紫色（purple）に変更してみましょう
  2. highlightクラスの背景色をライトブルー（lightblue）に変更してみましょう
  3. 新しく.noteというクラスを作成し、斜体（font-style: italic;）のスタイルを適用してみましょう
  4. コンテナ内のspan要素の背景色をピンク（pink）に変更してみましょう
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>CSS練習</title>
  <style>
    /* 見出しの色を紫色に */
    h1 {
      color: purple;
    }

    /* 段落の文字色を赤に */
    p {
      color: red;
    }

    /* 特別な段落の背景をライトブルーに */
    .highlight {
      background-color: lightblue;
    }

    /* メイン段落のフォントを太字に */
    #main {
      font-weight: bold;
    }
    
    /* 新しいnoteクラスに斜体スタイルを適用 */
    .note {
      font-style: italic;
    }
    
    /* コンテナ内の段落の色を緑に */
    .container p {
      color: green;
    }
    
    /* コンテナ内のspan要素の背景色をピンクに */
    .container span {
      background-color: pink;
    }
    
  </style>
</head>
<body>
  <h1>CSSの練習</h1>
  <p>これは普通の段落です。</p>
  <p class="highlight">これはハイライトされた段落です。背景色がライトブルーになっています。</p>
  <p id="main">これは特別な段落です。太字で表示されています。</p>
  <p class="note">これはノートです。斜体で表示されます。</p>
  
  <div class="container">
    <p>これはコンテナ内の段落です。緑色で表示され、オレンジの枠線が付きます。</p>
    <span>これはコンテナ内のspanです。ピンクの背景色が適用されます。</span>
    <div class="nested">
      <p>これはネストされた段落です（孫要素）。緑色ですが、枠線は付きません。</p>
      <span>これはネストされたspanです（孫要素）。ピンクの背景色が適用されます。</span>
    </div>
  </div>
</body>
</html>
ポイント解説
  • 見出し（h1）の色を青から紫色に変更
  • highlightクラスの背景色を黄色からライトブルーに変更
  • 新しくnoteクラスを作成し、斜体スタイルを適用
  • 子孫セレクタを使って、コンテナ内のspan要素にピンクの背景色を適用

✅ 理解度チェック

クイズに正解すると、このレッスンは「完了済み」として記録されます。

1. CSSでコメントを書く正しい方法はどれですか？

2. クラスセレクタを使用する正しい記述はどれですか？

3. 以下のうち、IDセレクタについての説明として正しいものはどれですか？

📘 次回予告

次回は、文字で印象が変わる！フォントとサイズを使いこなそうを学びます。

フォントの種類やサイズの指定方法について学び、読みやすく美しい文字表現をマスターしましょう！

« 前のレッスンへ戻る レッスン3へ進む »

インラインエディタ