CSSコース じてん
みためを かえる「プロパティ」と「セレクタ」
🌟 CSSの きほんルール 🌟
CSSは、HTMLで つくった ものの「みため」を かざる ことばだよ。
<head> の なかに <style> タグを つくって、その なかに 書いていくよ！
かきかたの ルール
- セレクタ: 「だれに」 (れい:
h1,p,.item) - プロパティ: 「なにを」 (れい:
color,font-size) - あたい: 「どうする」 (れい:
red,30px)
1. セレクタ じてん（だれを？）
HTMLタグの なまえを そのまま 書くよ。
ページにある <h1> や <p> ぜんぶに スタイルが あたるよ。
かきかた
プレビュー（みため）
ぶんしょうが あおくなる
なまえの まえに . (ドット) を つけるよ。
HTMLで class="item" と なまえを つけたタグだけに スタイルが あたるんだ。
かきかた
プレビュー（みため）
この もじだけ みどり
こっちは かわらない
なまえの まえに # (シャープ) を つけるよ。
HTMLで id="header" と なまえを つけた、たった ひとつの タグだけに スタイルが あたる。
かきかた
プレビュー（みため）
ヘッダーだけ おおきい
2. プロパティ じてん（なにを？）
もじの いろを かえるよ。red や #ff0000 のような かきかたが あるよ。
かきかた
プレビュー（みため）
もじが あかく なる
もじの おおきさを かえるよ。px (ピクセル) という たんいを つかうことが おおいよ。
かきかた
プレビュー（みため）
もじが おおきくなる
タグの うしろがわ（はいけい）の いろを ぬるよ。
かきかた
プレビュー（みため）
うすい グレーの はいけい
もじを みぎよせ・ひだりよせ・ちゅうおうよせ に するよ。center (ちゅうおう) を よくつかうよ。
かきかた
プレビュー（みため）
ちゅうおう に よる
タグの まわりに わくせん を ひくよ。「ふとさ」「せんの しゅるい (solid=いっぽんせん)」「いろ」を じゅんに かくよ。
かきかた
プレビュー（みため）
あおい せんで かこむ
わくせん の かどを まるく するよ。すうじが おおきいほど まるくなるよ。
かきかた
プレビュー（みため）
かどが まるくなる
わくせん の「うちがわ」に よはく を つくるよ。きゅうくつじゃ なくなるね。
かきかた
プレビュー（みため）
うちがわに よはくが できる
わくせん の「そとがわ」に よはく を つくるよ。となりの タグと きょりが できるよ。
かきかた
プレビュー（みため）
そとがわに よはくが できる
となりの タグと はなれる
タグ（とくに がぞう <img>）の おおきさを きめられるよ。
かきかた
プレビュー（みため）
100pxの おおきさ
リンク (<a>) に じどうで ついてしまう したせん (アンダーライン) を けす ときに よくつかうよ。
かきかた
プレビュー（みため）
3. 「はこ」の しくみ (ボックスモデル)
CSSでは、すべてのタグが「はこ」として あつかわれるよ。
margin (そと)、border (せん)、padding (うち) の じゅんばんを おぼえよう！
PADDING (うちがわの よはく)
ここに もじ が はいるよ