Day2 - CSSで見た目を整えよう！

昨日作った「自己紹介ページ」を
CSSを使ってもっと“おしゃれ”にしてみよう！

HTMLってどう書くの？（復習）

HTMLの基本ルールは3つだけ！

タグで囲む（例：<p>こんにちは</p>）
開始タグと終了タグはセット（例：<h1> と </h1>）
入れ子構造（タグは重ね順を守る）

CSSって何？

色・文字サイズ・配置など「見た目」をコントロール
HTML（中身）にデザインの力を加える！
「伝わりやすさ」「見やすさ」がUP！

CSSの書き方（まずはインラインCSS）

HTMLタグに直接 style="プロパティ: 値;" を書く
例：<p style="color: red;">赤い文字</p>
小さいページや確認に便利（本格的には外部CSSへ！）

基本のCSSプロパティ

プロパティ	例	用途
`color`	`color: red;`	文字の色
`font-size`	`font-size: 20px;`	文字の大きさ
`text-align`	`text-align: center;`	文字の並び
`background-color`	`background-color: #eeeeee;`	背景色
`padding`	`padding: 20px 10px;`	内側の余白
`margin`	`margin: 0 auto 20px;`	外側の余白
`border`	`border: 1px solid #cccccc;`	枠線

演習：自己紹介ページを装飾してみよう！

名前を大きく＆カラフルに！
ページ全体に背景色をつけてみよう
プロフィール画像に枠や角丸をつけよう

👉 s2.htmlを開く

よくある間違い

セミコロン ; やコロン : を忘れる
スペルミス（例：background-cooler ❌）
色指定は red, #ff0000, rgb(255,0,0) など

発展タスク

プロフィール全体を「カード風デザイン」にしてみよう
画像サイズを指定して整えてみよう
見出しを中央に配置してみよう
余白を工夫して読みやすく！

ふりかえり

CSSを使うと、ページがぐっと見やすくなる！
少しのスタイル変更でも印象が大きく変わる

👉 次回は「レイアウト」や「より便利なCSS」に挑戦！