第2部 HTML/CSS — Day 10 / 30

セレクタ

<style>
  p { color: gray; }          /* すべての p 要素 */
  .important { color: red; }  /* class="important" の要素 */
  #title { color: green; }    /* id="title" の要素(1つだけ) */
</style>

<h1 id="title">セレクタの練習</h1>
<p>ふつうの段落</p>
<p class="important">大事な段落</p>

クラス(.名前)は同じ名前を何度でも使えますが、ID(#名前)はページ内で1つだけです。迷ったらクラスを使いましょう。

今日の練習

3つ以上の段落を作り、一部の段落だけ class を付けて色を変えてみましょう。

模範解答を見る

<style>
  .important { color: red; }
</style>

<p>ふつうの段落です。</p>
<p class="important">この段落は大事なので赤色です。</p>
<p>これもふつうの段落です。</p>
<p class="important">締め切りは金曜日!ここも赤色です。</p>

同じ class を複数の要素に付けられること、class のない段落には適用されないことが確認できれば正解です。

理解度チェック

学籍番号と氏名を入力してクイズに正解すると、確認コード付きの提出用画面が表示されます。スクリーンショットを撮って Teams の Class Notebook に提出してください。

学籍番号氏名（フルネーム）

Q. class="important" が付いた要素にスタイルを当てるセレクタはどれでしょうか?

.important #important important()

Completed

正解です！Day 10 の学習を確認しました

科目	経営情報 2026
教材	プログラミング入門30日 Day 10 セレクタ
学籍番号
氏名
提出時間
確認コード

提出時間はサーバー時刻に基づきます。

この画面のスクリーンショットを撮り、Teams の Class Notebook に提出してください。