一括指定プロパティ

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

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

注意するべき場合

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

  1. その一括指定が対応する個別プロパティの内、省略したプロパティ全てに初期値が設定されます。それは当たり前に聞こえますが、以前設定した値を上書きすることになります。つまり、 
    background-color: red;
background: url(images/bg.gif) no-repeat left top;
    とすると背景色を red に設定するのではなく、2番目のルールが優先されて background-color の既定値である transparent となります。
  2. 継承 (inherit) は個別プロパティのみで行うことができます。一括指定では欠けている値が初期値に置き換えられるため、省略することで個別のプロパティを継承させることはできません。 inherit キーワードをプロパティに適用することはできますが、全体に対して適用できるのみで、1つ1つに対するキーワードではありません。つまり、いくつか特定の値のみを継承させたい場合は、個別指定 (longhand) プロパティで inherit キーワードを指定するしかありません。
  3. 一括指定プロパティは、置き換えるプロパティの指定順序をなるべく強制しないようにしています。ただしこれは、順序が重要ではないとき、プロパティがそれぞれ異なる型の値を使用する場合はうまく機能しますが、いくつかのプロパティが同じ値を持つことができるときは簡単ではありません。このような場合の扱い方は、いくつかに分類されます。
    1. ボックスの境界に関するプロパティを扱う一括指定 (border-style, margin, padding) は、それぞれの辺を表すために、一貫して1～4つの値の構文を使用します。
      border1.png 値1つの構文: border-width: 1em — 1つの値ですべての辺を表します
      border2.png 値2つの構文: border-width: 1em 2em — 最初の値は垂直、すなわち上下の辺を、2番目の値は水平、すなわち左右の辺を表します。
      border3.png 値3つの構文: border-width: 1em 2em 3em — 最初の値は上辺、 2番目の値は水平、すなわち左右の辺、3番目の値は下辺を表します。
      border4.png

      値4つの構文: border-width: 1em 2em 3em 4em — 4つの値がそれぞれ上、右、下、左の辺を表し、これは上を起点に時計回りの順です (頭文字が Top-Right-Bottom-Left で、これは trouble の子音 TRBL の順と一致します) (また、時計の上で針が回転する順番として覚えることもできます。 1em は12時の位置で始まり、3時の位置で 2em、それから6時の位置で 3em、そして9時の位置で 4em です)。
    2. 同様に、ボックスの角に関する一括指定プロパティ (border-radius など) は、それぞれの角を表すために一貫して1～4つの値を使用します。
      corner1.png 値1つの構文: border-radius: 1em — 1つの値がすべての角を表現します
      corner2.png 値2つの構文: border-radius: 1em 2em — 最初の値は左上と右下の角、2番目の値は右上と左下の角を表します。
      corner3.png 値3つの構文: border-radius: 1em 2em 3em — 最初の値は左上、2番目の値は右上と左下、3番目の値は右下の角をそれぞれ表します。
      corner4.png

      値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 は、継承を制御するための 4 つ の特別なユニバーサルプロパティ値 (universal property values) を提供します。すべての CSS プロパティはこれらの値を受け入れます。

inherit
選択した要素に適用されるプロパティ値を、その親要素と同じものに設定します。これは「継承を有効にする」ことを意味します。
initial
選択された要素に適用されるプロパティ値を、ブラウザーのデフォルトスタイルシートでその要素に設定されているものと同じ値に設定します。ブラウザーのデフォルトのスタイルシートで値が設定されておらず、かつ、そのプロパティが自然に継承される場合は inherit が代わりにプロパティ値として設定されます。
unset
プロパティを自然な値にリセットします。つまり、プロパティが自然に継承される場合は inherit のように動作し、そうでない場合は initial のように動作します。

注: 新しい値で revert もありますが、これはブラウザーのサポートが制限されます。

注: それらの動作の詳細については CSS カスケード入門の CSS 宣言のオリジンを参照してください。

リンクのリストを見て、ユニバーサル値 (universal values) がどのように機能するかを調べることができます。以下のライブサンプルでは、CSS に変更を加えて何が起こるかを確認できます。HTML と CSS を理解するには、実際にコードを試すのが最善の方法です。

以下を試してみてください。

  1. 2番目 のリストアイテムには、my-class-1 が適用されています。これは、内部にネストされた <a> 要素に色を継承します。ルールを削除すると、リンクの色はどのように変わるでしょうか？
  2. なぜ 3番目 と 4番目 のリンクがその色であるのか理解できていますか？そうでない場合は、上述しているそれぞれの値の説明を確認してください。
  3. 例えば a { color: red; } というように <a> 要素に新しい色を定義すると、どのリンクの色が変わるでしょうか？

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

関連情報