一括指定プロパティ

一括指定プロパティ (shorthand property) は、他の幾つかの CSS プロパティを一度に設定できる CSS プロパティです。一括指定プロパティを用いると、もっと簡単に (そして普通はもっと読みやすく) スタイルシートが書け、時間や労力を節約することができます。

CSS 仕様書では、同じ主題に作用する共通のプロパティの定義をグループ化するために、一括指定プロパティを定義しています。例えば、 background プロパティは background-color、 background-image、 background-repeat、background-position の値を定義することができる一括指定プロパティです。同様に、フォントに関連したプロパティは一括指定の font を使用して定義することができ、ボックスの周囲のマージンは一括指定の margin を使用して定義することができます。

注意するべき場合

一括指定プロパティはとても便利なものですが、使用するにあたって注意しておかなければならない場合が若干あります。

その一括指定が対応する個別プロパティの内、省略したプロパティ全てに初期値が設定されます。それは当たり前に聞こえますが、以前設定した値を上書きすることになります。つまり、
```
background-color: red;
background: url(images/bg.gif) no-repeat left top;
```
とすると背景色を red に設定するのではなく、 2 番目のルールが優先されて background-color の既定値である transparent となります。
継承 (inherit) は個別プロパティのみで行うことができます。一括指定では欠けている値が初期値に置き換えられるため、省略することで個別のプロパティを継承させることはできません。 inherit キーワードをプロパティに適用することはできますが、全体に対して適用できるのみで、 1 つ 1 つに対するキーワードではありません。つまり、いくつか特定の値のみを継承させたい場合は、個別指定 (longhand) プロパティで inherit キーワードを指定するしかありません。

一括指定プロパティは、置き換えるプロパティの指定順序をなるべく強制しないようにしています。ただしこれは、順序が重要ではないとき、プロパティがそれぞれ異なる型の値を使用する場合はうまく機能しますが、いくつかのプロパティが同じ値を持つことができるときは簡単ではありません。このような場合の扱い方は、いくつかに分類されます。

ボックスの境界に関するプロパティを扱う一括指定 (border-style, margin, padding) は、それぞれの辺を表すために、一貫して 1 ～ 4 つの値の構文を使用します。

	値 1 つの構文: `border-width: 1em` — 1 つの値ですべての辺を表します。
	値 2 つの構文: `border-width: 1em 2em` — 最初の値は垂直、すなわち上下の辺を、次の値は水平、すなわち左右の辺を表します。
	値 3 つの構文: `border-width: 1em 2em 3em` — 最初の値は上辺、 2 番目の値は水平、すなわち左右の辺、 3 番目の値は下辺を表します。
	値 4 つの構文: `border-width: 1em 2em 3em 4em` — 4 つの値がそれぞれ上、右、下、左の辺を表し、これは上を起点に時計回りの順です (頭文字が Top-Right-Bottom-Left で、これは trouble の子音 TRBL の順と一致します) (また、時計の上で針が回転する順番として覚えることもできます。 `1em` は 12 時の位置で始まり、 3 時の位置で `2em`、それから 6 時の位置で `3em`、そして 9 時の位置で `4em` です)。

同様に、ボックスの角に関する一括指定プロパティ (border-radius など) は、それぞれの角を表すために一貫して 1 ～ 4 つの値を使用します。

	値 1 つの構文: `border-radius: 1em` — 1 つの値がすべての角を表現します
	値 2 つの構文: `border-radius: 1em 2em` — 最初の値は左上と右下の角、 2 番目の値は右上と左下の角を表します。
	値 3 つの構文: `border-radius: 1em 2em 3em` — 最初の値は左上、 2 番目の値は右上と左下、 3 番目の値は右下の角をそれぞれ表します。
	値 4 つの構文: `border-radius: 1em 2em 3em 4em` — 4 つの値がそれぞれ左上、右上、右下、左下を表し、これは左上を起点にした時計回りの順です。

background プロパティ

以下のプロパティによる背景の指定は...

background-color: #000;
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-position: left top;

...1つの宣言で一括指定することができます。

background: #000 url(images/bg.gif) no-repeat left top;

(一括指定の形式は、実際は上記の個別指定に加えて、 background-attachment: scroll や、 CSS3 ではいくつかの追加プロパティと等価になります。)

CSS3 のプロパティを含む詳しい情報は、 background をご覧ください。

font プロパティ

以下の宣言は ...

font-style: italic;
font-weight: bold;
font-size: .8em;
line-height: 1.2;
font-family: Arial, sans-serif;

... 以下のように一括指定することができます。

font: italic bold .8em/1.2 Arial, sans-serif;

この一括指定宣言は、実際には上記の個別指定宣言に加えて、 font-variant: normal と font-size-adjust: none (CSS2.0 / CSS3), font-stretch: normal (CSS3) と等価になります。

border プロパティ

境界の幅、色、スタイルについては 1 つの宣言にまとめることができます。例えば、以下の CSS ...

border-width: 1px;
border-style: solid;
border-color: #000;

... は、以下のように簡略化できます。

border: 1px solid #000;

margin プロパティと padding プロパティ

margin と padding の一括指定も同様に動作します。 margin プロパティでは、1 つ、2 つ、3 つ、または 4 つの値を使用して短縮値を指定することができます。以下の CSS 宣言は ...

margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 5px;

... は以下の値 4 つの一括指定を使用した宣言と同じです。なお、値は上から始まって時計回りに、上、右、下、左の順になります (TRBL、 "trouble" の子音)。

margin: 10px 5px 10px 5px;

マージンの値 1 つ、 2 つ、 3 つ、 4 つの一括指定宣言は次の通りです。

値が 1 つ指定された場合、全四辺に同じマージンが適用される。
値が 2 つ指定された場合、 1 つ目のマージンは上下、 2 つ目は左右の辺に適用される。
値が 3 つ指定された場合、 1 つ目のマージンは上、 2 つ目は左右、 3 つ目は下の辺に適用される。
値が 4 つ指定された場合、マージンはそれぞれ上、右、下、左の順 (時計回り) に適用される。

全体一括指定プロパティ

CSS は全体の一括指定プロパティとして all を提供しており、値を文書中のすべてのプロパティに適用させます。これは、プロパティの継承モデルを以下のいずれかに変更するためのものです。

CSS の継承がどのように動作するかについての詳細については、カスケードと継承または CSS カスケード入門をご覧ください。