一括指定プロパティ

ジャンプ先:
  1. 注意するべき場合
  2. background プロパティ
  3. font プロパティ
  4. border プロパティ
  5. margin プロパティと padding プロパティ
  6. 全体一括指定プロパティ
  7. 関連情報

一括指定プロパティ (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 の順と一致します)
    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 の一括指定は似た方法です。以下の CSS 宣言は ...

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

... は以下の宣言と同じです。なお、値は上から始まって時計回りに、上、右、下、左の順になります (TRBL、 "trouble" の子音)。

margin: 10px 5px 10px 5px;

全体一括指定プロパティ

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

CSS は継承を指定するために、四つの特殊なプロパティ値を提供しています。

inherit
選択された要素に適用されたプロパティ値を、親要素のものと同じになるように設定します。
initial
選択された要素に適用されたプロパティ値を、ブラウザーの既定のスタイルシートの値と同じになるように設定します。ブラウザーの既定のスタイルシートで値が設定されておらず、プロパティが自然に継承された場合は、プロパティ値は代わりに inherit に設定されます。
unset
プロパティを自然の値にリセット、つまりプロパティが自然に継承されたものであれば inherit のように動作し、そうでなければ initial のように動作します。
revert
現在のオリジンがスタイルを適用していなかった場合のようにプロパティの値を戻します。つまり、プロパティの値は (設定されている場合は) ユーザースタイルシートの値に設定されるか、そうでなければ、ユーザーエージェントの既定のスタイルシートから取得されます。

それぞれの値や動作の仕組みは、 CSS 宣言のオリジン in CSS カスケード入門を参照してください。

メモ: initial 及び unset は Internet Explorer は対応していません。

この中で、 inherit は頻繁に興味深いものです。 — これは要素に対して、明示的に親からプロパティ値を継承させることができます。

例を見てみましょう。まず、 HTML です。

<ul>
  <li>Default <a href="#">link</a> color</li>
  <li class="my-class-1">Inherit the <a href="#">link</a> color</li>
  <li class="my-class-2">Reset the <a href="#">link</a> color</li>
  <li class="my-class-3">Unset the <a href="#">link</a> color</li>
</ul>

そしてスタイル付けのための CSS です。

body {
  color: green;
}

.my-class-1 a {
  color: inherit;
}

.my-class-2 a {
  color: initial;
}

.my-class-3 a {
  color: unset;
}

結果:

何が起きているのかを説明しましょう。

  • 最初の規則は、<body> の color を緑色に設定しています
  • color プロパティが自然に継承されると、本文の全ての子要素が同じ緑色になります。なお、ブラウザはリンクの色を color プロパティの自然な継承ではなく既定の青に設定するので、リスト中の最初のリンクは青になります
  • 二番目の規則は、my-class-1 クラスを持つ要素のリンクを、親から色を継承するように設定します。この場合、リンクは色をその親である <li> から継承し、既定ではそれがさらにそのその親である <ul> から継承し、最終的には <body> から継承するので、 color は最初のルールで設定した green に設定されます
  • 三番目の規則は、my-class-2 クラスを持つ要素内の全てのリンクを選択し、色を initial に設定します。ブラウザによって文字列に設定されている初期値は黒なので、このリンクは黒に設定されます
  • 最後の規則は、my-class-3 クラスを持つ要素内の全てのリンクを選択し、その色を unset に設定します。つまり値の設定を解除します。color プロパティは自然に継承されるプロパティなので、値に inherit の値を設定したように動作します。その結果、このリンクは本文と同じ色 — 緑に設定されます

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

関連情報

ドキュメントのタグと貢献者

タグ: 
このページの貢献者: mfuji09, fscholz, ethertank, sosleepy
最終更新者: mfuji09,