CSSとは何か — Webスタイリングの基本を理解する - CSS入門 — Flexbox & Gridレイアウト

Webページの見た目を決めるのが**CSS（Cascading Style Sheets）**です。HTMLが「構造」を担当するのに対し、CSSは「見た目」を担当します。文字の色・大きさ、要素の配置、背景、余白——これらはすべてCSSで制御します。

学習者

CSSって「色や文字を変えるやつ」くらいの理解で止まってる…。ちゃんと体系的に分かってないかも。

HTMLとCSSの役割分担

HTMLは「見出しはここ、段落はここ、画像はここ」という構造を定義します。CSSはその構造に対して「見出しは赤・フォントサイズ24px、背景は白」というスタイルを適用します。

<!-- HTML：構造 -->
<h1>こんにちは</h1>
<p>Webの世界へようこそ。</p>

/* CSS：見た目 */
h1 {
  color: #1a1a2e;
  font-size: 2rem;
}
 
p {
  color: #444;
  line-height: 1.8;
}

この分離が重要です。HTMLを変えずにCSSだけ差し替えれば、全く違うデザインになります。

CSSの基本単位はルールセットです。

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

/* h2要素すべてに適用 */
h2 {
  color: #2563eb;
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

<head>
  <link rel="stylesheet" href="styles.css">
</head>

別ファイルに書いてHTMLから読み込む方法が最も一般的です。複数ページで同じスタイルを使い回せます。

<head>
  <style>
    h1 { color: red; }
  </style>
</head>

HTMLの中に直接書く方法。小規模な場合やコンポーネント単位で使うことがあります。

<h1 style="color: red; font-size: 2rem;">タイトル</h1>

要素に直接書く方法。詳細度が高いため、テストや一時的な上書きには使えますが、保守性が下がるので基本的には避けます。

何もCSSを書いていなくても、ブラウザはHTMLにデフォルトのスタイルを適用します。h1 は大きく太字になり、ul にはドットが付く——これはブラウザが持つUser Agent Stylesheetによるものです。

実務では、ブラウザ間のデフォルト差異をなくすために CSS Reset や Normalize.css を使うことが多いです。

/* シンプルなCSS Reset の例 */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

CSSの名前に含まれる Cascade（滝） は、複数のスタイルが重なったときの優先順位のルールを表しています。同じ要素に複数のスタイルが当たった場合、どれが適用されるかは：

詳細度の仕組みは後の章で詳しく解説します。

次の章では、スタイルを当てる対象を指定するセレクタの種類と使い分けを学びます。