Day3：HTML+CSSでブラッシュアップ！

今日は HTML と CSS をさらに深堀りしていきます！

CSSの役割と使い方を復習
タグ指定・クラス指定・ID指定の使い分け
よく使うプロパティを体験

CSSって何？（復習）

色・大きさ・余白・配置など「見た目」を整える
HTMLのタグに対してスタイルを当てていく
Webページに「デザインの力」を加える！

CSSの書き方は3種類

① インラインCSS

タグの中に直接書く → <p style="color:red;">

その場で見た目を変えたいとき便利
でも、同じスタイルが多いと管理が大変

② 内部CSS

<head> 内に <style> を書く

同じページのスタイルをまとめられる
でも、ページごとに書かないといけない

③ 外部CSS

<link rel="stylesheet" href="style.css">

複数ページで同じスタイルを共有できる
プロジェクトでは基本この形！

CSSの書き方（基本）

セレクタ {
    プロパティ: 値;
}

例：文字色を赤にする

h1 {
  color: red;
}

セレクタの種類

h1 → タグ名
.classname → クラス名
#idname → ID名

h1 {
  color: blue;
}
.highlight { 
  background: yellow;
}
#main { 
  padding: 20px;
}

タグ指定、class指定、id指定の違い

タグ指定：そのタグすべてに適用
クラス指定：そのクラスをつけた要素だけに適用
ID指定：そのIDをつけた要素だけに適用

p { 
  color: blue; 
}
.txt { 
  color: green;
}
#txt { 
  color: red;
}

↓

<p> は青
<p class="txt"> は緑
<p class="txt" id="txt"> は赤になる！

演習：いろいろな方法でスタイルをつけよう

自己紹介ページのインラインCSSを外部CSSに移そう
タグ指定とクラス指定を組み合わせてみよう
色・余白・角の丸みなど、好きなデザインを試そう

👉 s3.htmlを開く

よく使う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;`	枠線
`border-radius`	`border-radius: 4px;`	角の丸み
`display`	`display: flex;`	要素の並び

発展タスク

クラスを使ってデザインを統一してみよう
タグ指定とクラス指定とID指定、どれが優先されるか確かめよう
複数クラス指定 class="btn red" も試してみよう

ふりかえり

CSSで「見た目」を自由にコントロールできる
タグ指定・クラス指定を使い分けると便利

👉 次回は完成見本の模写に挑戦！