CSSのプロパティにはショートハンドと呼ばれる、関連するプロパティをまとめて指定できる方法があります。種類によって記述方法が異なったり順序が決まっていたりするので忘備録としてまとめてみました。

記述する順序が決まっていないプロパティ

backgroundプロパティ

背景色、背景画像、背景画像サイズなど背景に関するプロパティを一括で指定します。

//個別指定
div {
    background-image: url("../bg-image.png") ;
    background-color: #ffff00 ;
    background-repeat: no-repeat ;
    background-position: top center ;
    background-attachment: fixed ;
    background-size: cover ;
}

//ショートハンド指定
div {
    background: url("../bg-image.png") #ffff00 no-repeat top center/cover fixed ;
}

list-styleプロパティ

リストのマーカーや位置などをまとめて指定できます。

//個別指定
ul {
    list-style-type: disc ;
    list-style-position: outside ;
    list-style-image: url("../list-icon.png") ;
}

//ショートハンド指定
ul {
    list-style: disc outside url("../list-icon.png") ;
}

animationプロパティ

アニメーションに関する項目をまとめて指定します。

//個別指定
div {
    animation-name: sample-animation1 ;
    animation-duration: 12s ;
    animation-timing-function: ease ;
    animation-delay: 5s ;
    animation-iteration-count: infinite ;
    animation-direction: alternate ;
}

//ショートハンド指定
div {
    animation: sample-animation1 12s ease 5s infinite alternate ;
}

borderプロパティ（スタイル）

枠線の色、太さや形をまとめて指定します。

//個別指定
div {
    border-width: 2px ;
    border-style: solid ;
    border-color: #ff0066 ;
}

//ショートハンド指定
div {
    border: 2px solid #ff0066 ;
}

記述する順序が決まっているプロパティ

marginプロパティ

オブジェクトの外余白を周囲すべて指定します。

//個別指定
div {
    margin-top: 15px ;
    margin-right: 20px ;
    margin-bottom: 35px ;
    margin-left: 10px ;
}

//ショートハンド指定
div {
    margin: 15px 20px 35px 10px ;
}

ショートハンド設定では、（margin）top → （margin）right → （margin）bottom → （margin）leftの順に設定します。上から時計回りに指定することになります。

paddingプロパティ

オブジェクトの内余白を周囲すべて指定します。

//個別指定
div {
    padding-top: 15px ;
    padding-right: 20px ;
    padding-bottom: 35px ;
    padding-left: 10px ;
}

//ショートハンド指定
div {
    padding: 15px 20px 35px 10px ;
}

ショートハンド設定では、（padding）top → （padding）right → （padding）bottom → （padding）leftの順に設定します。上から時計回りに指定することになります。

※marginとpaddingについては共通の値がある場合は次のように省略できます。

margin: 10px 30px 15px ;　　　//top　left&right　bottom
margin: 10px 30px ;     　　　//top&bottom　left&right
margin: 10px ;          　　　//all

transitionプロパティ

効果のタイミングや時間的変化などの指定を行います。

//個別指定
div {
    transition-property: all ;
    transition-duration: 0.3s ;
    transition-timing-function: ease-in-out ;
    transition-delay: 5s ;
}

//ショートハンド指定
div {
    transition: all 0.3s ease-in-out 5s ;
}

ショートハンド設定では、transition-property → transition-duration → transition-timing-function → transition-delayの順に設定します。

fontプロパティ

フォントの太さや大きさ、書体などをまとめて指定します。

//個別指定
div {
    font-style: italic ;
    font-variant: normal ;
    font-weight: 300 ;
    font-size: 2.4em ;
    line-height: 1.6 ;
    font-family: sans-serif ;
}

//ショートハンド指定
div {
    font: italic normal 300 2.4em/1.6 sans-serif  ;
}

ショートハンド設定では、font-style・font-variant・font-weight（順番指定無し） → font-size / line-height → font-familyの順に設定します。

borderプロパティ（位置）

上下左右の枠線をまとめて指定します。スタイルとは異なり指定する順番が決まっています。

//個別指定
div {
    border-top-width: 1px ;
    border-right-width: 2px ;
    border-bottom-width: 3px ;
    border-left-width: 4px ;
}

//ショートハンド指定
div {
    border-width: 1px 2px 3px 4px ;
}

ショートハンド設定では、（border）top → （border）right → （border）bottom → （border）leftの順に設定します。上から時計回りに指定することになります。

※共通の値がある場合は次のように省略できます。

border-width: 1px 2px 3px ;　　　//top　left&right　bottom
border-width: 1px 2px ;     　　 //top&bottom　left&right
border-width: 1px ;          　　//all

border-radiusプロパティ

角丸の大きさをまとめて指定します。

//個別指定
div {
    // 水平方向の角丸半径 / 垂直方向の角丸半径
    border-radius: 6px 8px 8px 6px/6px 8px 8px 6px ;
}

//ショートハンド指定
div {
    border-radius: 6px 8px 8px 6px ;
}

ショートハンド設定では水平方向と垂直方向の角丸半径が同じ場合に省略することができます。

（指定位置については、左上 → 右上 → 右下 → 左下と左上から時計回りに指定します）

※共通の値がある場合は次のように省略できます。

border-radius: 6px 8px 10px ;　　　//左上　右上&左下　右下
border-radius: 6px 8px ;     　　 //左上&右下　右上&左下
border-radius: 10px ;          　　//全方向