プログラミング入門30日 の Day 10
🎯 今日のゴール 要素・クラス・IDの3種類のセレクタを使い分けられる。
<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 の提出欄にアップロードしてください。
Q. class="important" が付いた要素にスタイルを当てるセレクタはどれでしょうか?
| 問題番号 | プログラミング入門30日 Day 10 |
|---|---|
| 学籍番号 | |
| 氏名 | |
| 提出時間 | |
| 確認コード |
提出時間はサーバー時刻に基づきます。
この画面のスクリーンショットを撮り、Teams の提出欄にアップロードしてください。