01 / 05
CSSは「見た目」の言語
HTMLが骨組みなら、CSSは服やメイク。色・大きさ・配置などの見た目を決める言語だよ。
CSSは <style> タグの中に書くと、同じページのHTMLに効くんだ。
<style> h1 { color: red; }</style><h1>あかい見出し</h1>ページを組み立てる
INPUT · スライド
CSSのきほん
01 / 05
CSSは「見た目」の言語
02 / 05
CSSの形 — 誰に・何を・どうする
h1… セレクタ(誰に)color… プロパティ(何を)red… 値(どうする)
「h1 の 色 を 赤 にする」と読める。区切りは プロパティ: 値; のコロンとセミコロンだよ。
h1 { color: red; }03 / 05
色を変える color
color は文字の色を変えるプロパティ。色の名前(red blue green)のほか、カラーコードでも書けるよ。
#ff6600 はオレンジ。Webでよく使われる書き方だから、見慣れておこう。
p { color: blue; }p { color: #ff6600; }04 / 05
大きさを変える font-size
font-size は文字の大きさ。単位は px(ピクセル)をよく使うよ。
1つのセレクタに複数のスタイルも書ける。1行ずつ ; で区切ろう。
h1 { color: green; font-size: 40px;}05 / 05
背景色と中央寄せ
background-color… 背景の色text-align: center;… 文字を中央寄せ
プロパティはこれからたくさん出てくるけど、「セレクタ { プロパティ: 値; }」の形は全部同じ。形を覚えれば怖くないよ。
h1 { background-color: yellow; text-align: center;}