01 / 05
タグ名だけだと全部変わる
p { color: red; } と書くと、すべての p が赤くなる。
「この段落だけ赤くしたい」というときに使うのが class(クラス) だよ。
<p>ふつうの段落</p><p class="alert">ここだけ赤くしたい</p>ページを組み立てる
INPUT · スライド
class と div
01 / 05
タグ名だけだと全部変わる
02 / 05
class にスタイルをあてる
CSS側では、class名の前にドット . をつける。
- HTML側:
class="alert"(ドットなし) - CSS側:
.alert(ドットあり)
この対応がclassの基本ルールだよ。
<style> .alert { color: red; }</style><p class="alert">ちゅうい!</p>03 / 05
class は使いまわせる
同じclassは複数の要素につけられる。違うタグ(p と li)につけてもOK。
「だいじなところ用」「ボタン用」のように、役割ごとにclassを作るのがコツだよ。
<style> .point { background-color: yellow; }</style><p class="point">だいじなところ</p><li class="point">これもだいじ</li>04 / 05
グループ化する div
div は「意味を持たないただの箱」。複数の要素をまとめてグループにするのに使うよ。
div にclassをつけてスタイルをあてれば、カードのような見た目が作れる。
<div class="profile"> <h2>なまえ</h2> <p>プログラミング学習中</p></div>05 / 05
まとめ
- 全部変えたい → タグ名セレクタ(
p { }) - 一部だけ変えたい → class(HTML:
class="name"/ CSS:.name { }) - まとめて箱にしたい →
div
この3つで「ねらった場所に、ねらったスタイル」ができるようになるよ。