CSSのショートハンド


## ショートハンドとは
複数のプロパティをまとめて指定する方法。

- 値の順番に意味があるもの
	- padding
	- margin
	- border
	- border-radius

- 部分的に値の順番に意味があるもの
	- font
	- transition
	- animation
- 値の順番に意味が無いもの
	- background
	- list-style

という感じで整理すると覚えやすい。

## paddingとmargin
paddingとmarginは上、右、下、左の4つの値を設定できるが、
以下のようにまとめて指定することができる。

```css
padding: 10px 15px 20px 30px; /* 上 右 下 左 */
padding: 10px 15px 20px;      /* 上 左右 下 */
padding: 10px 15px;           /* 上下 左右 */
padding: 10px;                /* 上下左右 */
```
marginも同じなので省略。

## border
borderにはボーダーの幅、スタイル、色を指定するための
`border-width`,`border-style`,`border-color`の3つのプロパティがあり、
上、右、下、左のそれぞれに設定できる。

まずは幅、スタイル、色をまとめて指定する方法
幅とスタイル、色をまとめて指定する。それぞれのプロパティの順序は関係ない

```css
border: 1px solid #f00;          /* 上下左右 */
border-top: 1px solid #f00;      /* 上 */
border-right: 1px solid #f00;    /* 右 */
border-bottom: 1px solid #f00;   /* 下 */
border-left: 1px solid #f00;     /* 左 */
```

次に幅(スタイルor色)を個別に指定する方法
幅を上下左右まとめて指定する。順番はpadding、marginと同じ。

```css
border-width: 1px 2px 3px 4px;    /* 上 右 下 左 */
border-width: 1px 2px 3px;        /* 上 左右 下 */
border-width: 1px 2px;            /* 上下 左右 */
border-width: 1px;                /* 上下左右 */
```
`border-style`,`border-color`も同じなので省略。

## border-radius
ボックスの4つの角それぞれに対して、水平方向と垂直方向の半径を指定する。
水平と垂直は`/`で区切る。

```css
border-radius: 1em 2em 2em 1em/3em 2em 2em 1em; /* 左上 右上 右下 左下 */
border-radius: 1em 2em 2em/2em 1em 1em;         /* 左上 右上左下 右下 */
border-radius: 1em 2em/2em 1em;                 /* 左上右下 右上左下 */
border-radius: 1em/2em;                         /* 全部まとめて */
```
paddingやmarginは上が起点だが、それが左上になっただけ。

水平方向と垂直方向の半径が同じ値なら`/`は省略可能

```css
border-radius: 1em 2em 2em 1em;  /* 左上 右上 右下 左下 */
border-radius: 1em 2em 2em;      /* 左上 右上左下 右下 */
border-radius: 1em 2em;          /* 左上右下 右上左下 */
border-radius: 50%;              /* 全部まとめて */
```

## font
`font-style`,`font-variant`,`font-weight`,`font-size`,`line-height`,`font-family`をまとめて指定する。

- font-sizeより前に`font-style`,`font-variant`,`font-weight`を書く（順不同）
- line-heightは、font-sizeの直後に`/`を付けて指定
- font-familyは最後

```css
/* font-size、line-height、font-familyをを指定 */
font: 1.2em/1.5 sans-serif;
```

## transition
`transition-property`,`transition-duration`,`transition-timing-function`,`transition-delay`をまとめて指定する。
基本的に順不同だが、`transition-duration`は`transition-delay`より先に書く。

```css
/* property duration timing-function delayを指定 */
transition: width 1s linear 2s;
/* durationのみ指定 */
transition: 1s;
``` 

`transition-property`を複数指定する場合は、それぞれの設定をカンマで区切る。

```css
transition: width 1s linear 2s,height 1s ease-in 500ms;
```

## animation
`animation-name`,`animation-duration`,`animation-timing-function`, `animation-delay`,`animation-iteration-count`,`animation-direction`をまとめて指定する。
transitionと同じで基本的に順不同だが、`animation-duration`は`animation-delay`より先に書く。

```css
animation: 'anime1' 1s ease 0s infinite alternate;
```

複数のアニメーションを指定するには、カンマで区切る。

```css
animation: 'anime1' 1s ease 0s infinite alternate,
			'anime2' 2s ease 1s infinite;
```


## background
`background-attachment`,`background-color`,`background-image`,`background-position`,`background-repeat`,`background-size`
をまとめて指定する。プロパティ順序は関係ない。

```css
/* image,color,repeat,attachmentを指定 */
background: url("logo.png") #00A repeat-y fixed; 
```



## list-style
`list-style-type`,`list-style-position`,`list-style-image`をまとめて指定する。

```css
list-style: square inside url(icon.gif);
```