トップページの中の CSSの基本の中の ショートハンド

ショートハンド

  • 最終更新:2010年1月17日 13:28

特定のプロパティにおいては簡略化表記ができるため、宣言をいくつもすることなく一括指定できます。これをショートハンドと言います。

例えば以下のように書いていたとします。

p {
  margin-top: 5px;
  margin-right: 20px;
  margin-bottom: 15px;
  margin-left: 0;
}

これをショートハンドで書くと以下のようになります。

p {
  margin: 5px 20px 15px 0;
}

1行で済むため、かなりすっきりするのが分かると思います。
それぞれの値を変更しているので何処がどのプロパティか分かると思いますが、ショートハンドを使った場合、上から時計回りに指定されます。

上の例では、上下左右4つの指定が有りましたが、指定している値の数によって適用対象が変わります。

  • 値1つ:上下左右全て
  • 値2つ:「上下」と「左右」
  • 値3つ:「上」と「左右」と「下」
  • 値4つ:「上」と「右」と「下」と「左」

覚えてしまえばこれと言って難しい事は有りません。
この時計回りに指定されるのは「paddingプロパティ」、「marginプロパティ」、「border-colorプロパティ」、「border-widthプロパティ」になります。

他に、ショートハンドで書けるプロパティは以下になります。

  • background関連プロパティ
  • border関連プロパティ
  • font関連プロパティ
  • list-style関連プロパティ

これらショートハンドプロパティに関しては各プロパティの解説をお読みください。

このページの上部へ