CSS入門：セレクタ、プロパティ、値を理解しよう！CSSの基礎

CSSは、ウェブページの見た目を決める魔法の言葉です。この魔法を使うためには、基本的な「文法」や「ルール」を知る必要があります。ここでは、CSSを書く上で最も基本的な3つの要素、「セレクタ」、「プロパティ」、「値」について説明します。

CSSの基本構文

CSSを書くときは、このような形式を使います：

CSS

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

セレクタは、「どのHTML要素にスタイルを適用するか」を指定します。例えば、pセレクタは、ページ内のすべての段落（<p>タグ）にスタイルを適用します。

プロパティは、スタイルの種類を指定します。例えば、colorプロパティは、要素のテキスト色を変更します。

値は、プロパティに設定する具体的なスタイルを指定します。例えば、colorプロパティにredという値を設定すると、テキストの色を赤に変更します。

それでは、これらの要素を使って、実際のCSSコードを見てみましょう。

CSS

p {
  color: blue;
  font-size: 16px;
}

このコードでは、セレクタp（すべての段落）に対して、プロパティcolor（色）に値blue（青）、プロパティfont-size（フォントサイズ）に値16px（16ピクセル）を設定しています。

これにより、ページ内のすべての段落のテキストが青色になり、フォントサイズが16ピクセルに設定されます。(今、見ているページがそうです(笑))

CSSでは、「セレクタ」でスタイルを適用する要素を選び、「プロパティ」と「値」で具体的なスタイルを定義します。この基本的な構文を理解することで、あなたもウェブページの見た目を自由にカスタマイズできるようになります。