CSS(スタイルシート)の基本的な書式

CSS(スタイルシート)の書き方

CSSは次の3つのパーツで構成されています。

• セレクタ
• 宣言ブロック
• プロパティ

セレクタ

セレクタはCSSをどこに適用するかを指定します。
次のコードの赤い部分がセレクタです。

セレクタの例

<style>
/* 要素名で指定 */
p {
	font-size: 150%;
	font-style: italic;
	color: #333;
}

/* クラス名を指定 */
.class_name {
	color: #333;
}

/* IDを指定 */
#id_name {
	font-weight:bold;
}

/* 要素名 + クラス名で指定 */
p.class_name {
	color: #c00;
}

/* 要素名 + IDで指定 */
p#id_name {
	background-color: #f7f7f7;
}

/* コンマ(,)で区切って複数のセレクタを指定 */
h1,
h2,
h3 {
	font-weight: normal;
}
</style>

宣言ブロック

宣言ブロックは、プロパティを囲む括弧「{」と「}」です。
このブロックで適用するプロパティを囲みます。

宣言ブロックの例

<style>
p {
	font-size: 150%;
	font-style: italic;
	color: #333;
}
</style>

プロパティ

プロパティは「プロパティ名」と「値」のペアを、コロン(:)で区切って指定します。
プロパティの最後にはセミコロン(;)が必要です。

プロパティの例

<style>
p {
	color: #333;
}
</style>

こちらのコードの場合、colorがプロパティ名、#333が値となります。
プロパティによっては、半角スペースで区切って複数の値を指定できるものもあります。

複数の値を指定するプロパティの例

<style>
p {
	padding: 10px 20px 10px;
	color: #333;
}
</style>