3章では、
HTMLを使ってWebページの構造を作る方法を学びました。
しかし、
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）
コメント