CSSの基礎文法を初心者向けに解説（セレクタとプロパティ）【文法編】

CSSは、ウェブページのデザインを整えるための重要な言語です。
本記事では、CSSの基本文法であるセレクタとプロパティの使い方などを初心者向けに詳しく解説します。
これを読めば、ウェブサイトのスタイルを自在にコントロールできるようになります。

CSSの基本構造

CSSは、主に「セレクタ」「プロパティ」「値」の組み合わせで構成されています。セレクタはスタイルを適用するHTML要素を指定し、プロパティは変更したいスタイルの種類、値は具体的なスタイル設定です。

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

例として、段落要素のテキスト色を青に設定する場合、以下のように記述します。

HTML

p {
    color: blue;
}

CSSセレクタの種類

要素セレクタ

HTML要素を指定してスタイルを適用します。
例として、h1タグの文字色を赤にする場合は以下のように書きます。

HTML

h1 {
    color: red;
}

クラスセレクタ

同じクラス名が付けられた要素すべてにスタイルを適用します。
クラス名の前に「.（ドット）」を付けて指定します。

CSS

.example {
    font-size: 16px;
}

IDセレクタ

特定のID属性を持つ要素にスタイルを適用します。
ID名の前には「#（ハッシュ）」を付けます。

CSS

#header {
    background-color: #f0f0f0;
}

属性セレクタ

特定の属性を持つHTML要素にスタイルを適用します。
例えば、type=”text”のinput要素にスタイルを適用する場合は以下のように書きます。

CSS

input[type="text"] {
    border: 1px solid #ccc;
}

CSSプロパティと値

CSSでは、要素のスタイルを決めるために様々なプロパティを使用します。
以下によく使われるプロパティと値をいくつか紹介します。

CSS

p {
    color: green;
}
h1 {
    font-size: 2em;
}
div {
    margin: 10px;
}
.box {
    padding: 20px;
}

• color: 文字の色を指定します。
• font-size: 文字のサイズを指定します。
• margin: 要素の外側の余白を指定します。
• padding: 要素の内側の余白を指定します。

まとめ

CSSはウェブデザインにおいて不可欠な要素であり、その基本的な文法を理解することで、より自由にデザインをカスタマイズできます。本記事では、セレクタ、プロパティ、値の基本構造から、代表的なプロパティの使い方までを解説しました。