プログラミング

CSSの基本と実践ガイド

最終更新： 06/03/2025
1 分の読み

CSS（Cascading Style Sheets）は、ウェブデザインにおいて欠かせない技術であり、HTML（HyperText Markup Language）で作成されたウェブページにスタイルやレイアウトを適用するために使用されます。この記事では、CSSの基本的な概念から実際の使い方まで、包括的に説明します。

1. CSSの基本構造

CSSの基本的な構造は、セレクタ（selector）と宣言（declaration）から成り立っています。宣言はプロパティ（property）とその値（value）で構成されており、セレクタはどのHTML要素にスタイルを適用するかを指定します。

関連記事

セレクタ

セレクタは、スタイルを適用したいHTML要素を指定するために使用されます。例えば、以下のようにHTMLタグを使って指定することができます。

css
p {
  color: blue;
}

上記の例では、pタグのテキストの色を青色に設定しています。

宣言

宣言は、プロパティとその値から成り立っています。プロパティはスタイルの種類を指定し、値はそのプロパティに設定する具体的な内容を表します。

css
color: blue;

ここでのcolorがプロパティで、blueが値です。このようにプロパティと値をコロン（:）で区切り、宣言をセミコロン（;）で終了します。

2. CSSの適用方法

CSSは、HTMLファイルに3つの方法で適用することができます。

インラインCSS

インラインCSSは、HTMLタグ内に直接CSSを記述する方法です。スタイルはstyle属性を使って指定します。

html
<p style="color: blue;">これは青色のテキストです。p>

インラインCSSは特定の要素にスタイルを適用する際に便利ですが、ページ全体に一貫性を持たせるためにはあまり推奨されません。

内部CSS

内部CSSは、HTMLファイル内の