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

前からショートハンドプロパティって結構ややこしいよなーって思ってたんだけど調べてみたら想像してた10倍くらいややこしかった。

##ショートハンド
margin,border,background...とか、複数の値を同時に指定するやつ。
ただ、入力しなかったプロパティには勝手に初期値を補完してくれるから、初期値をきちんと把握してないと使うときにちょっと面倒くさい。
たとえば、

```css
background-color: #f00;
background: url(hoge);
```

で、背景色は#f00にならない。
なぜならbackgroundが指定するプロパティは（書き方にもよるけど）

* background-color
* background-img
* background-repeat
* background-attachment:scroll
* background-position

のいつつで、この場合は

```css
background-color: transparent;
background-image: url(hove); /*これが指定された*/
background-repeat: repeat;
background-attachment: scroll;
background-position: 0 0;
```

こういう値が入るから。
background-color:#f00はbackground-color: transparentで上書きされる。
適当に省略して使うときは初期値意識しないとまずい。


##以下、ひたすら初期値のメモが続きます

###margin/padding

```css
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
```

を一括で指定。一応、

```css
margin: 0;/*全ての方向に対して0px*/
margin: 10px 0;/*上下に10px 左右に0px*/
margin: 20px 10px 0;/*上20px左右10px下0px*/
margin: 20px 10px 5px 0;/*上20px、右10px、下5px、左0px*/
```

こういうルール。
paddingの場合はmarginがpaddingになるだけ。

###border-radius

```css
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
```

を一括指定。

書き方。

```css
border-radius: 5px;/*上下左右5px*/
border-radius: 5px 10px;/*左上と左下が5px、右上と左下が10px。初めて知った。*/
border-radius: 5px 10px 15px;/*左上5px、右上と左下が10px、右下15px。使い所なさそう。*/
border-radius: 5px 10px 15px 20px;/*左上5px右上10px右下15px左下20px。*/
```

四隅->対角線->？？？->四隅個別。
3番目はどう覚えたらいいのか……。

###border系
一括指定されるプロパティとその初期値は

```css
border-top-color: transparent;
border-top-style: none;
border-top-width: 0;
border-right-color: transparent;
border-right-style: none;
border-right-width: 0;
border-bottom-color: transparent;
border-bottom-style: none;
border-bottom-width: 0;
border-left-color: transparent;
border-left-style: none;
border-left-width: 0;
```

top,bottom,right,leftそれぞれにwidth,style,colorがあるので、合計12種類。
ショートハンドの書き方も3種類。深淵が見える。

####border-width

```css
border-top-width : 0;
border-right-wdith : 0;
border-bottom-width : 0;
border-left-wdith : 0;
```
以上のプロパティを一括指定。
書き方は

```css
border-width: 10px;/*四方の線全てが10px*/
border-width: 5px 10px;/*上下の線が5px、左右の線は10px*/
border-width: 5px 10px 15px;/*上の線は5px、左右は10px,下は15px;*/
border-width: 5px 10px 15px 20px;/*上5px右10px下15px左20px*/
```

####border-top

```css
border-top-width : 0;
border-top-style : none;
border-top-color : transparent;
```

3つのプロパティを一括指定。
書き方。

```css
border-top: 0 none transparent;
```

省略はできるけど、初期値の都合上どこが欠けても表示されない。
border-right,border-bottom,border-leftも同様。

####border

```css
border-style: none;
border-width: 0;
border-color: transparent;
```

を一括指定。
書き方はこう。

```css
border: 0 none transparent;
```

border-topとかと同じ理由でどこか一箇所でも指定が欠けると表示されない。
border-topだけを赤に、というような指定には対応していないので、必要に応じて他2つのショートハンドと併用する。

```css
border: none;
border-top: 1px solid #000;
```

とかあるあるパターン。

###background

```css
background-color: transparent;
background-image: none;
background-repeat: repeat;
background-attachment: scroll;
background-position: 0 0;
```

のいつつのプロパティを指定するショートハンドプロパティ。
かくときは

```css
background: transparent none repeat scroll 0 0;
```

こう。さらにcss3でbackground-size対応版だと、こう。

```css
background: #f00 url(hoge) 0 0 / 10px 15px no-repeat;
```

/のあとの数値がbackground-size。
複雑なことは無いんだけど、省略することが多くなりがちなので気をつけたい。
深淵が見えるその2。

###font

```css
font-style: normal;
font-variant: normal;
font-weight: normal;
font-size: medium;/
line-height: normal;
font-family: '';/*ここも初期値がよくわからない、指定なし？*/
```

以上6つを一括指定する。
書くとこうなる。

```css
font: normal normal normal medium/1.5 'メイリオ';
```

こんなかんじ。
normal3つは左からfont-style、font-variant、font-weight、の、はず。
line-heightは入れる前に/を入力。
とはいえこの要素全部リセットしてくれるとなるとそうそう使えない。怖い。そして覚えない。深淵に飲まれた。

##以上、
思いつくままに書いたので、抜けてるプロパティがあったら教えて下さい。