CSSの入口（0-0）｜文字・余白・レイアウトを整える最短ロードマップ（web-programming / css）

HTMLで1ページを作れるようになると、次に気になるのが見た目です。

「文字が詰まって読みにくい」
「余白がなくて窮屈」
「なんだか全部同じに見える」

ここで登場するのが CSS です。

CSSは、ページを“派手にする”ためというより、
まずは **読みやすく整えるための道具** だと思うと入りやすいです。

親カテゴリ（地図）：web-programming（web-roadmap）
前の章：HTML 3-1（つまずき対策）
今の章：CSS 0-0（入口）

HTMLで作った“土台”に対して、
CSSで「読みやすさ」と「見た目の整理」を足していきます。

• CSS 0-0（今ここ）：章の地図（最短ルートを固定）
• CSS 1-1：CSSを書いてみる（色・文字サイズ・背景）
• CSS 1-2：余白を整える（margin / padding）
• CSS 1-3：ボックスモデルの入口（border / width）
• CSS 2-1：見た目を整えるミニ制作
• CSS 3-1：レイアウトの入口（Flexの最小）
• CSS 3-2：よくあるつまずき（効かない・崩れる・優先順位）

CSS章で必要なのは、まずこの2つだけです。
・HTMLファイルがすでにある
・CSSファイルを1つ作って読み込める

STEP1：html フォルダの中身を確認する

□ index.html がある
□ Live Server で表示できる
□ ここまでのHTMLが動いている

STEP2：CSSファイルを作る

□ style.css という名前でファイルを作る
□ index.html と同じ階層に置く
□ あとでHTMLから読み込む

この章の方針：

・コードは記事内に掲載（コピペで試せる）
・まずは小さく変えて、変化を見る
・完成版zipは必要な人だけの補助

１．外部CSS (外部のファイルにCSSを記述) ※今回採用します。
２．内部CSS (HTML内部にCSSを記述)
３．インラインCSS (タグ内にCSSを記述)

CSSを書く場所はいくつかありますが、
最初は **style.css という別ファイル** に書く形で覚えるのがおすすめです。

理由は、

・HTMLとCSSの役割が分かれやすい
・あとで見返しやすい
・記事が進んでもそのまま使いやすい

からです。

• HTMLは index.html
• CSSは style.css
• HTMLから CSS を読み込む

• 文字の色が変わる
• タイトルが少し大きくなる
• 背景に色が付く
• 段落や見出しの間に余白ができる
• “なんとなく読みやすい”状態になる

• CSSは“見た目を整える”ためのもの
• 最初は文字・余白・背景色からで十分
• HTMLとCSSは分けて書く
• まずは変化が見えることを優先する

準備ができたら、次は実際にCSSを書いてみます。
まずは「色・文字サイズ・背景色」が変わるところから始めます。