MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

ショートハンドプロパティ

定義

ショートハンドプロパティ とは、他の幾つかの CSS プロパティをまとめて 1 つのプロパティで指定する事が出来る短縮プロパティの事を指します。これを用いる事により、Web ページの製作者はスタイルシートの内容をより読みやすくしたり、記述時間を短縮したり、コード量を削減する事が出来ます。

CSS 仕様書では、関連するプロパティ群に対してショートハンドプロパティが定義されています。例えば、 background プロパティでは background-color 、 background-image 、 background-repeat 、background-position などの関連プロパティを同時に適用可能です。同様に、フォント関連プロパティの一括指定には font が。そして 各辺のマージンの一括指定には margin が利用可能です。

トリッキーなエッジケース

ショートハンドプロパティは非常に便利なものですが、幾つかのトリッキーなエッジケースを念頭に置いて使用する必要があります。

  1. そのショートハンドが対応する個別プロパティの内、省略したプロパティ全てに初期値が設定されます。 
    body {
  background-color: red;
  background: url(images/bg.gif) no-repeat top right;
}
    上記コードでは先に background-color に red が指定されているので、背景色は赤になると考えてしまうかもしれませんが、そうではないという事です。background ショートハンドプロパティで記述が省略されている background-color に対しては、このプロパティの初期値である transparent が補完されているのです。したがって 最初の指定は上書きされ、背景色は透明となります。
  2. 個別プロパティだけが値を継承できます。ショートハンドは欠けている値を初期値で置き換えるため、省略して対応する個別のプロパティの値を継承することは不可能です。キーワード inherit はプロパティ全体に対して用いるもので、一部の値だけに使うことはできません。つまり特定の値を継承させるようにするには、対応する個別の（longhandの）プロパティの値にキーワード inherit を与えるしかないということです。
  3. ショートハンドプロパティは、置き換えるプロパティの指定順序をなるべく強制しないようにしています。ただしこれは、プロパティがそれぞれ違う型の値を使うときにはうまく機能するとしても、指定順序が自由である限りは、複数のプロパティが同じ値を持てるときに簡単に機能しなくなります。こうしたケースの扱い方は、プロパティの特徴別に決められています:
    1. ボックス辺に関連するプロパティ (border-style, margin, padding) には全て以下の構文に従って記述可能です。
      border1.png 1 値構文: border-width: 1em — 全方向の辺に対し同じ値が適用されます。
      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 — 最初の値が上辺に適用され、その後時計回りの順で各辺に適用されます。英単語 "trouble" の母音 …… TRBL(Top/Right/Bottom/Left) の順序として覚える方法もあります。
    2. 同様に、border-radius のように ボックスの角 に関するショートハンドプロパティについては、以下の構文に従って記述します。
      corner1.png 1 値構文: border-radius: 1em — 全ての角に対し同じ値が適用されます。
      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 — 左上、右上、右下、左下というふうに、左上の角から時計回りに順に適用されます。

background プロパティ

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

上記の宣言は、以下のように background ショートハンドプロパティで纏めて記述する事が出来ます。

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

このショートハンドプロパティでは、省略されている個別プロパティに対しては全て初期値が適用されます。（※ background-attachment: scroll など）

詳細については 『background』 を参照して下さい。

font プロパティ

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

上記の宣言は、以下のように font ショートハンドプロパティで纏めて記述する事が出来ます。

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

このショートハンドプロパティでは、省略されているプロパティは次の様に解釈されます。

  • font-variant: normal
  • font-size-adjust: none (CSS2.0 / css3)
  • font-stretch: normal (css3)

【訳注: font ショートハンドに関しては、他のショートハンドよりも記述順や省略可能な個別プロパティが厳密に定められており、やや指定方法が難しくなっています。また、上記の例の様に、記述を省略したフォント関連プロパティに関しても全て上書きされてしまいます。単一のセレクタに対してこれらを全て指定するケースは多くは無いでしょう。結果的に、ショートハンドを利用しない方がコード量が少なくなる場合も多いでしょう。よって、font ショートハンドは利用しないか、もしくは body 要素などでの使用に留め、他の部位では継承を活かしながら個別のプロパティで記述するのが無難といえます。】

詳細については 『font』 を参照して下さい。

border 関連プロパティ

border-width、border-style、border-color

border-width は border-top-width / border-right-width / border-bottom-width / border-left-width のショートハンドプロパティです。

また同様に、
border-style は border-top-style / border-right-style / border-bottom-style / border-left-style のショートハンドプロパティ、
border-color は border-top-color / border-right-color / border-bottom-color / border-left-color のショートハンドプロパティです。

border-top-width:    10px;
border-right-width:  20px;
border-bottom-width: 30px;
border-left-width:   40px;

border-top-style:    solid;
border-right-style:  dotted;
border-bottom-style: solid;
border-left-style:   dotted;

border-top-color:    blue;
border-right-color:  blue;
border-bottom-color: blue;
border-left-color:   blue;

上記は以下のように短縮する事が可能です。
border-width は各辺の値がバラバラであるため、4 値構文で。
border-style は上下 (solid) と左右 (dotted) が等しい値であるため、2 値構文で。
border-color は全ての辺が同じ値であるため、1 値構文とする事が出来ます。

border-width: 10px 20px 30px 40px; /* top から 時計回りに適用されます。 */
border-style: solid dotted; /* 上下には solid、 左右には dotted が適用されます。 */
border-color: blue; /* 全辺に blue が適用されます。 */

border

borders-width、 border-style、 border-color のそれぞれの各辺が全て等しい値の場合、これらは border ショートハンドで全て纏めて記述する事が可能です。

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

上記のスタイルは以下の様に記述する事が出来ます。

border: 1px solid #000;

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

margin と padding は同じ様な規則となります。

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

上記は次の宣言と同じ動作となります。

margin: 10px 5px 10px 5px;

top から時計回りに適用されます。ちなみにこのショートハンドでは、上下 (10px)、左右 (5px) それぞれの値が等しいものです。このような場合は以下の様に記述し、更に短縮する事ができます。

margin: 10px 5px;

関連情報

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

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