CSSの一括指定（短縮）プロパティ

はじめに

こんにちは！
CSSの学習を進めていく中で複数のプロパティをまとめて指定できる一括指定（短縮）プロパティの存在を知りました。
しかし、いざ一括指定プロパティを使用するとなるとどのプロパティが対象なのかわからなかったり、そもそも対象のプロパティの機能がわからなかったりして、結局個別にプロパティを設定したことが何度かありました。
そのような経験から本記事では、CSSの一括指定プロパティについてまとめてみました。

一括指定（短縮）プロパティとは

一括指定（短縮）プロパティは、複数の CSS プロパティを一度に設定できる CSS プロパティです。
一括指定プロパティを用いると、より簡単にスタイルシートが書け、時間や労力を節約することができます。
Google HTML/CSS Style Guide や Airbnb CSS / Sass Styleguide 等のスタイルガイドでも使用が推奨されています。

代表的な一括指定（短縮）プロパティ

1.backgroundプロパティ

backgroundプロパティでは、以下のプロパティをまとめて記述することができます。

background_single.css

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

• background-color：背景色の指定
• background-image：背景画像の指定
• background-repeat：背景画像の繰り返し指定
• background-position：背景画像の初期位置の指定

background.css

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

2.fontプロパティ

fontプロパティでは、以下のプロパティをまとめて記述することができます。

font_single.css

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

• font-style：フォントスタイル（通常体、筆記体、斜体）の指定
• font-weight：フォントの太さの指定
• font-size：フォントの大きさの指定
• line-height：行間の指定
• font-family：フォントファミリーの指定／フォントファミリーの優先順位の指定

font.css

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

3.borderプロパティ

borderプロパティでは、以下のプロパティをまとめて記述することができます。

border_single.css

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

• border-width：境界線の幅の指定
• border-style：境界線のスタイルの指定
• border-color：境界線の色の指定

border.css

border: 1px solid #000;

4.mergin/paddingプロパティ

marginプロパティもしくはpaddingプロパティでは、以下のプロパティをまとめて記述することができます。

margin_single.css

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

• margin-top：上側の余白の指定
• margin-right：右側の余白の指定
• margin-bottom：下側の余白の指定
• margin-left：左側の余白の指定

margin.css

margin: 10px 5px 10px 5px;

一括指定（短縮）プロパティの注意点

1. プロパティの省略

一括指定プロパティに指定しなかった値は初期値に設定されます。つまり、以前設定した値を上書きすることになります。

以下は、値が上書きされる例です。

overwrite.css

p {
  background-color: red;
  background: url(images/bg.gif) no-repeat left top;
}

上記コードの場合、backgroundプロパティで background-color が設定されていないので、背景色は background-color の既定値である transparent に設定されます。

2. プロパティの順序

基本的に一括指定プロパティでは、プロパティを記述する順序は決まっていません。ただしこれは、各プロパティが異なる型の値を使用する場合であり、各プロパティが同じ型の値を使用する場合にはあらかじめ決められた順序でプロパティを記述する必要があります。

同じ型の値を使用する場合のプロパティの順序は、以下の2つのケースに分類されます。

• border-width, margin, padding など、ボックスの辺に関連したプロパティ。
• border-radius のように、ボックスの角に関連するプロパティ。

ボックスの辺に関連したプロパティ

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

• 値１つの構文：１つの値ですべての辺を表します。

one.css

border-width: 1em;

イメージ図

• 値２つの構文：１つ目の値は上下の辺、２つ目の値は左右の辺を表します。

two.css

border-width: 1em 2em;

イメージ図

• 値３つの構文：１つ目の値は上辺、２つ目の値は左右の辺、３つ目の値は下辺を表します。

three.css

border-width: 1em 2em 3em;

イメージ図

• 値４つの構文：４つの値がそれぞれ上、右、下、左の順に時計回りで辺を表します。

four.css

border-width: 1em 2em 3em 4em;

イメージ図

ボックスの角に関連したプロパティ

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

• 値１つの構文：１つの値ですべての角を表します。

one.css

border-radius: 1em;

イメージ図

• 値２つの構文：１つ目の値は左上と右下の角、 ２つ目の値は右上と左下の角を表します。

two.css

border-radius: 1em 2em;

イメージ図

• 値３つの構文：１つ目の値は左上、２つ目の値は右上と左下、３つ目の値は右下の角をそれぞれ表します。

three.css

border-radius: 1em 2em 3em;

イメージ図

• 値４つの構文：４つの値が左上を起点に、時計回りでそれぞれ左上、右上、右下、左下を表します。

four.css

border-radius: 1em 2em 3em 4em;

イメージ図

まとめ

一括指定プロパティは、値の上書きやプロパティの順序などに気を付ければコードを簡潔に記述することができるので便利だと感じました。
今後、スタイルシートを記述する際は、一括指定プロパティで記述するよう心掛けます。