Day2 - CSSで見た目を整えよう！
昨日作った「自己紹介ページ」を
CSSを使ってもっと“おしゃれ”にしてみよう！
HTMLってどう書くの？（復習）
HTMLの基本ルールは3つだけ！
- タグで囲む（例：
<p>こんにちは</p>）
- 開始タグと終了タグはセット（例：
<h1> と </h1>）
- 入れ子構造（タグは重ね順を守る）
👉 s0.htmlを開く
👉 s1.htmlを開く
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」に挑戦！
💡 おまけ：Windowsの便利なショートカット
ショートカットを覚えると作業効率がぐっと上がります！
- Ctrl + C : コピー
- Ctrl + V : 貼り付け
- Ctrl + Z : 元に戻す
- Ctrl + Shift + Z : やり直す
- Alt + Tab : ウィンドウを切り替える
- Win + D : デスクトップを表示