CSS（Cascading Style Sheets）は、HTMLで作成したウェブページの見た目をスタイリングするための言語です。ウェブデザインの基礎として、CSSを理解することでページの見栄えを自在にカスタマイズできます。本記事では、CSSの基本構造と役割について説明します。

1. CSSの概要

CSSはHTMLの要素にスタイル（色、フォント、レイアウトなど）を適用します。HTMLがページの構造を定義するのに対し、CSSはその視覚的なプレゼンテーションを制御します。

2. CSSの基本文法

CSSのスタイルルールは次のような構造を持ちます。

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

2-1. セレクタ

セレクタは、スタイルを適用するHTML要素を指定します。

p {
  color: red;
}

上記の例では、すべての<p>タグに対して文字色を赤に設定しています。

2-2. プロパティと値

プロパティは要素のスタイルの種類（例：色やフォントサイズ）、値はそのスタイルの具体的な設定です。

3. CSSの役割

3-1. レイアウトの管理

CSSはウェブページのレイアウトを制御します。displayプロパティを使うと、ブロックやインラインレイアウト、フレックスボックスやグリッドレイアウトを設定できます。

div {
  display: flex;
}

3-2. 色と背景の設定

ページの背景色や画像を指定できます。

body {
  background-color: #f0f0f0;
}

3-3. タイポグラフィの制御

文字のフォント、サイズ、行間などを調整します。

h1 {
  font-family: Arial, sans-serif;
  font-size: 24px;
}

CSSの基本を理解することは、スタイリッシュなウェブサイトを作る第一歩です。次回はスタイルの適用方法と優先順位について詳しく解説します。