CSS一括指定プロパティ

一括指定プロパティ

一括指定プロパティ は、他の幾つかの CSS プロパティを一度に設定できる CSS プロパティです。

CSS では、同じ主題に作用する共通のプロパティの定義をグループ化するために、一括指定プロパティを定義しています。

一括指定プロパティ使用時の注意点

1.省略したプロパティの値の扱い

その一括指定が対応する個別プロパティの内、省略したプロパティ全てに初期値が設定されます。例えば、以下のような記述があったとします。

background-color: aliceblue;
background: url(images/bg.png) no-repeat left top;

一見すると、背景色は”aliceblue”になりそうですが、そうはなりません。

後に定義されている、background プロパティで一括指定できるプロパティは下記の通り多数あり、background-color プロパティも含まれますので、background-color プロパティの初期値である、”transparent”が背景色となります。

• background-attachment （初期値：scroll）
• background-clip （初期値：border-box）
• background-color （初期値：transparent）
• background-image （初期値：none）
• background-origin （初期値：padding-box）
• background-position （初期値：0% 0%）
• background-repeat （初期値：repeat）
• background-size （初期値：auto auto）

2.継承の扱い

継承は個別プロパティのみで行うことができます。一括指定では欠けている値が初期値に置き換えられるため、省略することで個別のプロパティを継承させることはできません。

いくつか特定の値のみを継承させたい場合は、個別指定プロパティで inherit キーワードを指定するしかありません。

3.プロパティの指定順序

一括指定プロパティは、置き換えるプロパティの指定順序をなるべく強制しないようにしています。しかし、border や margin などのように、いくつかのプロパティが同じ値を持つことができるときは指定順序は一定のルールに従います。

ボックスの境界に関するプロパティの場合

border-style, margin, padding が該当します。この場合は、それぞれの辺を表すために、以下の4パターンの構文を使用します。

1. 値1つの構文：1つの値ですべての辺を表します
   
2. 値2つの構文：1つ目の値は上下の辺、2つ目の値は左右の辺を表します。
   
3. 値3つの構文：1つ目の値は上辺、2つ目の値は左右の辺、3つ目の値は下辺を表します。
   
4. 値4つの構文：1つ目の値は上辺、2つ目の値は右辺、3つ目の値は下辺、4つ目の値は左辺を表します。（上辺を起点に時計回り）
   

ボックスの角に関するプロパティの場合

border-radius などが該当します。この場合は、それぞれの角を表すために、以下の4パターンの構文を使用します。

1. 値1つの構文：1つの値ですべての角を表します
   
2. 値2つの構文：1つ目の値は左上と右下の角、2つ目の値は右上と左下の角を表します。
   
3. 値3つの構文：1つ目の値は左上の角、2つ目の値は右上と左下の角、3つ目の値は右下の角を表します。
   
4. 値4つの構文：1つ目の値は左上、2つ目の値は右上、3つ目の値は右下、4つ目の値は左下を表します。（左上を基点に時計回り）