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

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

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

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

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

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

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

順番に読むためのブログカード

CSS 1-1：CSSを書いてみる

【CSS 1-1】CSSを書いてみる｜色・文字サイズ・背景色を変えて“見た目が変わる体験”をする（初心者向け）

CSS 1-2：余白を整える

【CSS 1-2】余白を整える｜margin・paddingで“窮屈じゃない見た目”を作る（初心者向け）

CSS 1-3：ボックスモデルの入口

【CSS 1-3】ボックスモデルの入口｜width・border・paddingで“箱として見る感覚”をつかむ（初心者向け）

CSS 2-1：見た目を整えるミニ制作

【CSS 2-1】見た目を整えるミニ制作｜色・余白・箱を1ページにまとめる（初心者向け）

CSS 3-1：レイアウトの入口

【CSS 3-1】レイアウトの入口｜Flexの最小で“並び方”を整える（初心者向け）

CSS 3-2：よくあるつまずき

【CSS 3-2】よくあるつまずき｜CSSが効かない・崩れる・優先順位で困ったときの見直し方（初心者向け）

CSS 4-1：自己紹介ページを作る

【CSS 4-1】ミニ制作｜自己紹介ページを作る｜見出し・画像・プロフィールを1ページにまとめる（初心者向け）

CSS 4-2：お問い合わせページを作る

【CSS 4-2】ミニ制作｜お問い合わせページを作る｜フォームを“読みやすく使いやすく”整える（初心者向け）

CSS 4-3：ここまでの到達点

【CSS 4-3】まとめ｜HTMLとCSSで“自己紹介ページ”と“お問い合わせページ”が作れたら最初は十分（初心者向け）

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を書いてみます。
まずは「色・文字サイズ・背景色」が変わるところから始めます。