・CSSを書いたのに反映されない
・一部だけデザインが崩れる
・修正したら別の場所が壊れた

これは珍しいことではなく、
CSSでは誰もが必ず通る道です。

重要なのは、
「勘で直す」のではなく
原因を切り分けて対処する力を身につけることです。

この記事では、
CSS崩れの典型パターンと、確認すべき順番を整理します。

この記事で学べること

・CSS崩れのよくある原因
・効かないときの確認手順
・開発者ツールの活用ポイント
・実務で通用する切り分け思考

CSS崩れは「仕様通り」で起きている

まず大前提として、
CSSが崩れる原因のほとんどは、

CSSが間違っているのではなく、
仕様通りに動いている

という点です。

「なぜそうなったのか」を
仕様に沿って確認することが重要です。

切り分けの基本手順（最重要）

CSSが効かないときは、
必ず次の順番で確認してください。

1. その要素は本当に存在しているか

2. セレクタは正しいか

3. 他のCSSに上書きされていないか

4. レイアウト仕様を誤解していないか

この順番を守るだけで、
解決までの時間が大きく短縮されます。

① 要素が存在しているか確認する

最初に確認すべきは、
HTML側の問題です。

・タグが閉じられていない
・想定と違う構造になっている
・classやidが付いていない

開発者ツールの Elements タブで、
対象要素があるかを必ず確認しましょう。

② セレクタが正しいか確認する

次に、
CSSセレクタが正しいかを確認します。

・class名のスペルミス
・idとclassの取り違え
・HTML構造と合っていない指定

「CSSは合っているはず」と思わず、
HTMLと照らし合わせて確認することが重要です。

③ 上書きされていないか確認する

CSSは、
後から書かれたもの・強い指定が優先されます。

よくある原因は次のとおりです。

・別のCSSファイルで上書き
・より具体的なセレクタが存在
・inline CSS が使われている

開発者ツールの Styles を見て、
打ち消されていないか確認しましょう。

④ レイアウト仕様の誤解

CSSが効かないのではなく、
仕様を誤解しているケースも非常に多いです。

代表例
・ブロック要素は縦に並ぶ
・widthはcontentのみ
・marginの上下は相殺される

「思った通りにならない」場合は、
仕様に立ち返って考えましょう。

よくあるCSS崩れパターン

ここからは、
実際によくある崩れを例に整理します。

パターン① 横に並ばない

原因
・ブロック要素のまま
・Flexboxを指定していない

対処
・displayの確認
・Flexboxが親要素に指定されているか確認

パターン② 中央に来ない

原因
・中央揃えの指定方向が違う
・基準となる要素が想定と違う

対処
・justify-content / align-items の役割を確認
・親要素の指定を確認

パターン③ 余白が思った通りにならない

原因
・marginとpaddingの使い分けミス
・marginの相殺

対処
・どこに余白を作りたいか言語化
・開発者ツールで余白を可視化

パターン④ 一部だけデザインが違う

原因
・classの付け忘れ
・上書きCSSの存在

対処
・該当要素の class を再確認
・Stylesで適用ルールを確認

開発者ツールを必ず使う

CSSの切り分けでは、
開発者ツールは必須です。

見るべきポイントは次の3つです。

・Elements：HTML構造
・Styles：適用されているCSS
・Computed：最終的な値

「目で見て確認する」
ことが最短ルートです。

感覚で直さないことが最大のコツ

CSSが崩れると、
つい次の行動を取りがちです。

・適当にCSSを追加する
・!important を付ける
・数値を変えて試す

これは、
一時的に直っても
後で必ず破綻します。

必ず
「なぜ今こうなっているか」
を説明できる状態で修正しましょう。

CSSが安定すると何が変わるか

この切り分け思考が身につくと、

・修正が怖くなくなる
・影響範囲を予測できる
・CSSが積み上がる設計になる

CSSが
運任せの作業から、設計作業
に変わります。

まとめ

CSS崩れは、
正しい手順で切り分ければ必ず解決できます。

・HTML構造を確認
・セレクタを確認
・上書きを確認
・仕様を確認

この流れを身につけることで、
CSSトラブルは大幅に減ります。

これで、
4章 CSS基礎は完全に終了です。

次に読むべき記事

▶ 次の記事
5-1 JavaScriptとは何か

▶ 関連記事
4-6 Flexboxの基本
2-7 ブラウザ開発者ツールの基本的な使い方

しかし、実際にレイアウトを組もうとすると、
次のような悩みが出てきます。

・要素を横に並べたいだけなのにCSSが複雑になる
・中央揃えが思った以上に難しい
・間隔を均等にしたいが計算が面倒

こうした問題を一気に解決してくれるのが、
Flexbox（フレックスボックス） です。

この記事では、
Flexboxの考え方と最低限覚えるプロパティ に絞って、
初心者向けに解説します。

この記事で学べること

・Flexboxとは何か
・Flexboxの基本的な考え方
・コンテナとアイテムの関係
・よく使うFlexboxプロパティ
・Flexboxでできること

Flexboxとは何か

Flexboxとは、
要素を柔軟に並べるためのCSSレイアウト手法です。

従来のレイアウトでは、

・float
・position
・inline-block

などを組み合わせる必要がありましたが、
Flexboxを使うことで、
これらを シンプルな指定 で実現できます。

Flexboxの基本構造

Flexboxには、
明確な役割分担があります。

・flexコンテナ
・flexアイテム

まず、この関係を理解することが重要です。

flexコンテナとは

flexコンテナとは、
Flexboxを適用する親要素です。

この要素に
display を指定することで、
中の要素の並び方を制御します。

flexアイテムとは

flexアイテムとは、
flexコンテナの直下にある子要素です。

Flexboxの指定は、
基本的にこの子要素に影響します。

Flexboxを有効にする

Flexboxを使うために必要なのは、
たった1つの指定です。

親要素を
フレックスコンテナにする
という意識を持ちましょう。

横並びが一瞬でできる理由

Flexboxを使うと、
ブロック要素でも
簡単に横並びになります。

これは、
Flexboxが
「並べ方を管理する仕組み」
だからです。

divが横に並ばない問題は、
Flexboxでほぼ解決します。

主軸と交差軸の考え方

Flexboxを理解するうえで、
重要な概念があります。

それが、

・主軸
・交差軸

です。

主軸とは

主軸とは、
要素が並ぶ方向です。

初期状態では、
左から右へ並びます。

交差軸とは

交差軸は、
主軸に対して直角の方向です。

縦方向の揃えは、
この交差軸で考えます。

justify-content（主軸の揃え）

justify-contentは、
主軸方向の揃え方を指定します。

よく使われる考え方は次のとおりです。

・左寄せ
・中央寄せ
・右寄せ
・均等配置

「横方向の配置」と思って問題ありません。

align-items（交差軸の揃え）

align-itemsは、
交差軸方向の揃え方を指定します。

よくある使いどころは、

・縦方向の中央揃え
・高さが違う要素の揃え

Flexboxで
縦中央揃えが簡単になる理由は、
このプロパティにあります。

Flexboxでできることまとめ

Flexboxを使うと、
次のようなことが簡単にできます。

・横並びレイアウト
・中央揃え（縦・横）
・間隔の均等配置
・高さが違う要素の整列

これらは、
実務で非常によく使われます。

初心者が最初に覚えるべきポイント

Flexboxは多機能ですが、
最初は次の点だけ覚えれば十分です。

・親要素に Flexbox を指定する
・主軸と交差軸を意識する
・justify-content と align-items

これだけで、
多くのレイアウトが組めるようになります。

display / position との関係

Flexboxは、
display や position の代替ではありません。

・display：並び方の基本
・position：位置調整
・Flexbox：柔軟な並び制御

用途ごとに
使い分けることが大切です。

なぜFlexboxが重要なのか

現代のWeb制作では、
Flexboxは 標準スキル です。

・管理画面
・カードレイアウト
・ヘッダーやフッター

ほぼすべての場面で使われます。

ここで基礎を押さえておくことで、
後の学習が非常に楽になります。

まとめ

Flexboxは、
CSSレイアウトを劇的に簡単にする仕組みです。

・親要素がコンテナ
・子要素がアイテム
・主軸と交差軸で考える

この3点を理解できれば、
Flexboxの基礎は十分です。

次は、
CSSで起きやすい崩れやトラブルの原因と切り分け方
を学び、CSS基礎を完成させます。

次に読むべき記事

▶ 次の記事
4-7 よくあるCSS崩れと原因の切り分け方

▶ 関連記事
4-5 レイアウトの基本（display / position）

次に出てくる疑問は、次のようなものです。

・要素を横に並べたい
・特定の位置に固定したい
・なぜ勝手に改行されるのか分からない

これらを制御するのが、
display と position です。

この記事では、
CSSレイアウトの基礎となる
display と position の考え方を整理します。

この記事で学べること

・displayとは何か
・ブロック要素とインライン要素
・positionの基本
・relative / absolute / fixed の違い
・レイアウトで迷わない考え方

displayとは何か

displayは、
要素の表示形式を決めるプロパティです。

「この要素は、
どんな並び方をするか」
を指定します。

HTMLタグには、
初期状態の display が決まっています。

ブロック要素とは

ブロック要素は、
縦に並ぶ要素です。

特徴
・横幅いっぱいに広がる
・前後で改行される

代表例
・div
・p
・h1〜h6

何も指定しなければ、
これらは縦に積み重なります。

インライン要素とは

インライン要素は、
横に並ぶ要素です。

特徴
・内容の幅だけを持つ
・改行されない

代表例
・span
・a
・strong

文章の流れの中で使われます。

なぜ要素が横に並ばないのか

初心者が最初につまずくポイントです。

原因はシンプルで、
ブロック要素は縦に並ぶ仕様だからです。

div を並べても横に並ばないのは、
CSSが正しく動いていないのではなく
「仕様どおり動いている」状態です。

displayで並び方を変える

displayを指定することで、
要素の並び方を変更できます。

よく使われる指定は次のとおりです。

・block
・inline
・inline-block
・none

inline-blockの考え方

inline-blockは、
横に並びつつ、サイズ指定ができる
表示形式です。

・横並びにしたい
・幅や高さも指定したい

といった場合に使われます。

display:none の注意点

display:none を指定すると、
要素は 完全に非表示 になります。

・画面に表示されない
・場所も存在しない

「見えないだけ」ではなく、
存在しない扱いになる点に注意しましょう。

positionとは何か

positionは、
要素の配置方法を決めるプロパティです。

「どこを基準に、
どこへ配置するか」
を指定します。

positionを使わない場合、
要素は通常の流れに従って配置されます。

positionの種類

よく使われる position は、
次の4つです。

・static
・relative
・absolute
・fixed

この違いを理解することが重要です。

static（初期状態）

staticは、
positionの初期値です。

特別な指定はなく、
HTMLの流れ通りに配置されます。

relative（相対位置）

relativeは、
元の位置を基準に動かす 指定です。

ポイント
・元の場所は保持される
・微調整に使われる

後述する absolute の
基準としても重要です。

absolute（絶対位置）

absoluteは、
特定の基準を元に配置する 指定です。

特徴
・通常の流れから外れる
・基準は親要素になることが多い

absoluteを使う場合、
親要素に relative を指定する
というセット運用が基本です。

fixed（画面固定）

fixedは、
画面を基準に固定表示する指定です。

使いどころ
・ヘッダー固定
・追従メニュー

スクロールしても、
位置が変わらないのが特徴です。

なぜpositionが難しく感じるのか

理由は、
基準が分かりにくい からです。

・どこを基準にしているのか
・通常の流れに含まれるか

この2点を意識することで、
positionの理解は一気に楽になります。

display と position の使い分け

考え方を整理します。

・並び方を変えたい
　→ display

・位置を調整したい
　→ position

まず display、
それでも足りなければ position
という順で考えると混乱しにくくなります。

Flexboxは次のステップ

ここまでの内容は、
Flexboxを理解するための前提知識です。

いきなりFlexboxに進むと、
「なぜそう動くのか」が分からなくなります。

基礎を押さえたうえで進むことが、
遠回りに見えて最短ルートです。

まとめ

display と position は、
CSSレイアウトの基本中の基本です。

・display：並び方を決める
・position：配置基準を決める
・ブロックとインラインの違いを理解する

ここまで理解できれば、
CSSレイアウトの土台は完成です。

次は、
現代CSSレイアウトの主役である Flexbox
に進みます。

次に読むべき記事

▶ 次の記事
4-6 Flexboxの基本

▶ 関連記事
4-4 ボックスモデルを完全に理解する

・余白を指定したのに思った位置にならない
・widthを指定したのに要素がはみ出す
・paddingやmarginの違いが分からない

これらの原因は、
ボックスモデルの理解不足です。

この記事では、
CSSの土台中の土台である
ボックスモデルを図がなくても理解できるレベル
まで整理します。

この記事で学べること

・ボックスモデルとは何か
・content / padding / border / margin の役割
・widthと高さの考え方
・よくあるレイアウト崩れの原因

ボックスモデルとは何か

CSSでは、
すべての要素は「四角い箱（ボックス）」として扱われます。

文字でも画像でも、
HTML上の要素はすべて
目に見えない箱を持っています。

この箱の構造を定義したものが、
ボックスモデルです。

ボックスモデルの4つの要素

1つのボックスは、
次の4つで構成されています。

・content（内容）
・padding（内側の余白）
・border（枠線）
・margin（外側の余白）

この順番は非常に重要です。

content（内容）

contentは、
文字や画像そのものが表示される領域です。

width や height を指定した場合、
基本的にはこの content のサイズを指定しています。

padding（内側の余白）

paddingは、
content と border の間の余白です。

・要素の中に余白を作りたい
・文字と枠線を離したい

といった場合に使います。

paddingを増やすと、
要素の「見た目の大きさ」は大きくなります。

border（枠線）

borderは、
要素の枠線です。

・線の太さ
・線の種類
・線の色

を指定できます。

borderも、
要素のサイズに影響します。

margin（外側の余白）

marginは、
要素の外側に作る余白です。

・要素同士の間隔を空けたい
・上下の距離を調整したい

ときに使います。

marginは、
自分自身のサイズではなく
周囲との距離を調整します。

width指定で混乱する理由

初心者が最も混乱するのが、
次の点です。

「widthを指定したのに、
思ったより大きくなる」

これは、
widthがcontentだけを指している
ことが原因です。

見た目のサイズは合計で決まる

要素の見た目の横幅は、
次の合計になります。

・content
・padding（左右）
・border（左右）

marginは含まれませんが、
周囲との距離として影響します。

この合計を意識しないと、
レイアウトは必ず崩れます。

box-sizingという考え方

この混乱を解消するために使われるのが、
box-sizing というプロパティです。

box-sizingを使うことで、
widthの考え方を変更できます。

box-sizing: border-box の考え方

この指定を使うと、

・width に padding と border を含める

という扱いになります。

現在のWeb制作では、
border-box を使うのがほぼ標準です。

なぜborder-boxがよく使われるのか

理由はシンプルです。

・指定した幅からはみ出しにくい
・レイアウト計算が直感的
・レスポンシブ対応が楽

そのため、
最初から全要素に適用する設計も
よく使われます。

marginとpaddingの使い分け

ここも重要なポイントです。

・padding
　要素の内側
　クリック範囲を広げたいとき

・margin
　要素の外側
　要素同士の間隔調整

迷ったら、
「どこに余白が欲しいか」
を言語化して考えましょう。

marginの上下が重なる現象

marginには、
上下方向が重なる特性があります。

これを
「マージンの相殺」
と呼びます。

上下の余白が思った通りにならない場合、
この仕様が原因であることが多いです。

ボックスモデルを理解すると何が変わるか

ここまで理解できると、

・余白調整が怖くなくなる
・レイアウト崩れの原因が分かる
・CSSを感覚で書かなくなる

CSSが
「試行錯誤」から「設計」
に変わります。

開発者ツールとセットで確認する

ボックスモデルは、
ブラウザの開発者ツールで
視覚的に確認できます。

・どこがcontentか
・どこにpaddingがあるか
・marginはどれくらいか

困ったら必ず確認しましょう。

初心者がよくやる間違い

よくあるミスです。

・marginとpaddingを適当に使う
・widthだけ見て全体サイズを考えない
・box-sizingを理解していない

これらは、
ボックスモデル理解で確実に解消できます。

まとめ

ボックスモデルは、
CSSレイアウトの基礎中の基礎です。

・すべての要素は箱
・content / padding / border / margin
・見た目サイズは合計で決まる

ここを理解できれば、
CSSは一気に扱いやすくなります。

次は、
要素の配置を制御するための基本プロパティ
に進みます。

次に読むべき記事

▶ 次の記事
4-5 レイアウトの基本（display / position）

▶ 関連記事
4-3 CSSセレクタの基本（class / id / 要素）

・CSSを書いたのに反映されない
・なぜこの要素だけ変わらないのか分からない
・どこを指定しているのか曖昧

その原因の多くは、
CSSセレクタの理解不足にあります。

この記事では、
CSSの中核となる
セレクタの基本（要素 / class / id） を整理し、
「なぜこのCSSが当たるのか」を説明できる状態を目指します。

この記事で学べること

・CSSセレクタとは何か
・要素セレクタ
・classセレクタ
・idセレクタ
・正しい使い分けの考え方

CSSセレクタとは何か

CSSセレクタとは、
「どのHTML要素にスタイルを適用するか」
を指定するための仕組みです。

CSSは、
「誰に」「何を」適用するか
をセットで指定しています。

・セレクタ：誰に
・スタイル：何を

この関係を理解することが重要です。

要素セレクタとは

要素セレクタは、
HTMLタグそのものを指定する方法です。

例
・p
・h1
・a

など、タグ名をそのまま使います。

要素セレクタの特徴

要素セレクタの特徴は次のとおりです。

・同じタグすべてに適用される
・広範囲に影響する
・デザインのベース指定に向いている

ページ全体の
「基本ルール」を決めるときに使われます。

classセレクタとは

classセレクタは、
class属性を持つ要素を指定する方法です。

HTML側で付けた class を使って、
特定のグループにスタイルを当てます。

classセレクタの特徴

classセレクタの特徴は次のとおりです。

・複数の要素に使える
・最もよく使われる
・柔軟にデザイン指定できる

実務では、
CSS指定の中心は class になります。

idセレクタとは

idセレクタは、
id属性を持つ要素を指定する方法です。

idは、
ページ内で一意（1回のみ）
というルールがあります。

idセレクタの特徴

idセレクタの特徴は次のとおりです。

・1ページに1つだけ
・強い指定になる
・ピンポイント指定向き

ただし、
CSSでは 多用しません。

class と id の使い分け

ここで、
多くの初心者が迷うポイントを整理します。

・class
　複数要素
　デザイン指定の基本

・id
　単一要素
　JavaScriptやリンク用途が中心

CSSでは、
「迷ったら class」
が基本ルールです。

なぜidセレクタは避けられがちなのか

idセレクタは便利ですが、
CSSでは次の理由から控えめに使われます。

・指定が強すぎる
・後から上書きしづらい
・再利用できない

そのため、
CSS設計では
class中心の指定が推奨されます。

セレクタの強さ（優先順位）

CSSには、
どの指定が優先されるか
というルールがあります。

基本的な強さは次の順です。

・要素セレクタ
・classセレクタ
・idセレクタ

強い指定ほど、
他のCSSを上書きします。

CSSが効かないときの考え方

CSSが効かない場合、
次の順で確認してください。

・そもそも指定している要素は合っているか
・class名やid名に間違いはないか
・他のCSSに上書きされていないか

この切り分けができるようになると、
CSSのトラブルは激減します。

HTMLとCSSは必ずセットで考える

CSSセレクタは、
HTMLの構造が分かっていないと使えません。

・HTMLで何にclassを付けたか
・どのタグが使われているか

CSSを書くときは、
必ずHTMLと行き来しながら考えましょう。

初心者がよくやるミス

よくあるミスを整理します。

・idを多用してしまう
・意味のないclass名を付ける
・どこに効いているか分からない

これらはすべて、
セレクタの役割を意識することで防げます。

まとめ

CSSセレクタは、
CSSの中で最も重要な要素のひとつです。

・要素セレクタ：全体ルール
・classセレクタ：基本の指定
・idセレクタ：限定的な指定

この使い分けを理解できれば、
CSSが「なんとなく」ではなく
論理的に書ける ようになります。

次は、
CSS理解の最大の壁である
ボックスモデル に進みます。

次に読むべき記事

▶ 次の記事
4-4 ボックスモデルを完全に理解する

▶ 関連記事
4-2 CSSの書き方（inline / internal / external）
3-3 HTML属性とは？class・id・nameの違い

次に出てくる疑問は、ほぼ確実にこれです。

・CSSはどこに書けばいいのか
・HTMLの中？別ファイル？
・書き方が複数あって混乱する

CSSには、
大きく3つの書き方があります。

この記事では、
それぞれの書き方の特徴と使い分けを整理し、
「実務ではどれを使うべきか」まで明確にします。

この記事で学べること

・CSSの3つの書き方
・それぞれの特徴と違い
・メリット・デメリット
・実務での正しい選択基準

CSSの書き方は3種類ある

CSSには、次の3つの書き方があります。

・inline（インラインCSS）
・internal（内部CSS）
・external（外部CSS）

どれもCSSですが、
書く場所が違う という点が最大の違いです。

inline CSSとは何か

inline CSSは、
HTMLタグに直接CSSを書く方法です。

特徴としては、

・その要素だけに適用される
・HTMLとCSSが混ざる
・最も優先度が高い

という点があります。

inline CSSの特徴

inline CSSは、

・一時的な確認
・ごく小さな修正

には使えますが、
基本的には 常用しません。

理由は、
HTMLが非常に読みにくくなり、
管理が難しくなるためです。

internal CSSとは何か

internal CSSは、
HTMLファイル内にまとめてCSSを書く方法です。

HTMLの head 内に、
スタイルを記述します。

internal CSSの特徴

internal CSSの特徴は次のとおりです。

・1ページ内で完結する
・ファイルが増えない
・小規模なページに向いている

学習初期や、
1ページだけの簡単な検証では
使われることがあります。

external CSSとは何か

external CSSは、
CSSを別ファイルに分けて管理する方法です。

HTMLからは、
そのCSSファイルを読み込みます。

external CSSの特徴

external CSSには、
最も多くのメリットがあります。

・HTMLとCSSを完全に分離できる
・複数ページで使い回せる
・管理・保守がしやすい

そのため、
実務では基本的にこの方法が使われます。

3つの書き方の比較

ここで、
それぞれの違いを整理します。

・inline
　最優先で適用される
　管理しにくい

・internal
　1ページ完結
　規模が大きくなると不向き

・external
　再利用可能
　実務の標準

実務で使うのはどれか

結論は明確です。

実務では external CSS を使います。

inline や internal は、
理由がある場合にだけ使うものです。

初心者のうちから、
external CSSを前提に学習することで、
後から困ることがなくなります。

CSSの適用順序を知っておこう

CSSには、
どのスタイルが優先されるか
というルールがあります。

基本的な考え方は次のとおりです。

・後から指定されたものが優先される
・より具体的な指定が優先される
・inline が最も強い

この「優先順位」の理解は、
次の記事以降で詳しく扱います。

初心者がやりがちなミス

CSSの書き方で、
よくあるミスを整理します。

・どこに書いたCSSか分からなくなる
・inlineとexternalが混在する
・なぜ効いているか説明できない

これらを防ぐためにも、
CSSは1か所にまとめる
という意識が重要です。

学習段階でのおすすめ方針

学習中は、
次の方針をおすすめします。

・CSSは基本 external に書く
・1つのCSSファイルで管理する
・書いた場所を意識する

この習慣が、
実務レベルへの近道になります。

まとめ

CSSには、
3つの書き方があります。

・inline：一時的・例外的
・internal：小規模向け
・external：実務の標準

最初から
external CSSを前提に学習すること
が、最も効率的な進め方です。

次は、
CSSを書くうえで最重要とも言える
セレクタの考え方 に進みます。

次に読むべき記事

▶ 次の記事
4-3 CSSセレクタの基本（class / id / 要素）

▶ 関連記事
4-1 CSSとは何か｜HTMLとCSSの役割分担

しかし、
HTMLだけでページを作ると、
次のような状態になります。

・文字はすべて同じ見た目
・レイアウトが整っていない
・デザインがほとんどない

ここで登場するのが、
CSS（Cascading Style Sheets） です。

この記事では、
CSSとは何か
HTMLとCSSの役割分担
を中心に、CSS学習の土台となる考え方を整理します。

この記事で学べること

・CSSとは何か
・CSSが必要な理由
・HTMLとCSSの役割の違い
・CSS学習で最初に意識すべきポイント

CSSとは何か

CSSとは、
Webページの見た目を指定するための言語です。

CSSを使うことで、

・文字の色やサイズ
・余白や配置
・レイアウト構造

などを自由にコントロールできます。

HTMLが「構造」を作るのに対し、
CSSは 見た目とレイアウト を担当します。

なぜCSSが必要なのか

HTMLだけでも、
Webページは表示されます。

しかし、HTMLだけでは、

・読みづらい
・使いづらい
・デザイン性がない

という問題が出てきます。

CSSは、
情報を分かりやすく、使いやすく伝えるため
に欠かせない存在です。

HTMLとCSSの役割分担

Webページは、
主に次の2つで構成されています。

・HTML：構造と意味
・CSS：見た目と配置

この役割分担を理解することが、
CSS学習の第一歩です。

HTMLの役割（おさらい）

HTMLは、

・見出し
・文章
・リンク
・フォーム

といった
ページの骨組み を作ります。

HTMLは、
「この部分は何か」を伝える言語です。

CSSの役割

CSSは、

・文字の大きさ
・色
・背景
・配置

など、
どう見せるか を指定します。

CSSは、
HTMLで作った構造に対して
「見た目のルール」を与える存在です。

CSSが分離されている理由

「HTMLに直接デザインを書けばいいのでは？」
と思うかもしれません。

しかし、
HTMLとCSSを分けることで、
次のメリットがあります。

・HTMLが読みやすくなる
・デザイン変更が簡単になる
・複数ページで使い回せる

これは、
保守性の高いWebサイト を作るための
重要な考え方です。

CSSはどこで使われるのか

CSSは、
次のような場所で使われます。

・個人ブログ
・企業サイト
・Webアプリケーション
・管理画面

見た目があるWebページには、
必ずCSSが使われていると言っても過言ではありません。

CSSは「後から」適用される

CSSは、
HTMLが読み込まれた後に適用されます。

そのため、

・同じHTMLでも
・CSSを変えるだけで

まったく違う見た目にすることが可能です。

この性質を理解しておくと、
CSSの考え方がぐっと楽になります。

初心者が最初につまずきやすい点

CSS学習の初期では、
次の点でつまずきやすくなります。

・CSSが効かない
・どこに書けばいいか分からない
・なぜ上書きされるのか分からない

これらは、
CSSの仕組みを理解することで
必ず解消できます。

これからCSSで学ぶこと

4章では、
次の内容を順番に学んでいきます。

・CSSの書き方
・セレクタの考え方
・レイアウトの基本
・よくある崩れの原因

「デザインセンス」ではなく、
ルールと仕組み を理解することが目的です。

まとめ

CSSは、
Webページの見た目を作るための言語です。

・HTML：構造と意味
・CSS：見た目と配置

この役割分担を理解することで、
HTMLとCSSを正しく組み合わせられるようになります。

次は、
CSSを実際にどこに、どう書くのか
という具体的な書き方に進みます。

次に読むべき記事

▶ 次の記事
4-2 CSSの書き方（inline / internal / external）

▶ 関連記事
3-7 HTMLフォーム送信の仕組みを理解する（GET / POST）