前からショートハンドプロパティって結構ややこしいよなーって思ってたんだけど調べてみたら想像してた10倍くらいややこしかった。
ショートハンド
margin,border,background...とか、複数の値を同時に指定するやつ。
ただ、入力しなかったプロパティには勝手に初期値を補完してくれるから、初期値をきちんと把握してないと使うときにちょっと面倒くさい。
たとえば、
background-color: #f00;
background: url(hoge);
で、背景色は#f00にならない。
なぜならbackgroundが指定するプロパティは（書き方にもよるけど）
- background-color
- background-img
- background-repeat
- background-attachment:scroll
- background-position
のいつつで、この場合は
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
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
を一括で指定。一応、
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
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
を一括指定。
書き方。
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系
一括指定されるプロパティとその初期値は
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
border-top-width : 0;
border-right-wdith : 0;
border-bottom-width : 0;
border-left-wdith : 0;
以上のプロパティを一括指定。
書き方は
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
border-top-width : 0;
border-top-style : none;
border-top-color : transparent;
3つのプロパティを一括指定。
書き方。
border-top: 0 none transparent;
省略はできるけど、初期値の都合上どこが欠けても表示されない。
border-right,border-bottom,border-leftも同様。
border
border-style: none;
border-width: 0;
border-color: transparent;
を一括指定。
書き方はこう。
border: 0 none transparent;
border-topとかと同じ理由でどこか一箇所でも指定が欠けると表示されない。
border-topだけを赤に、というような指定には対応していないので、必要に応じて他2つのショートハンドと併用する。
border: none;
border-top: 1px solid #000;
とかあるあるパターン。
background
background-color: transparent;
background-image: none;
background-repeat: repeat;
background-attachment: scroll;
background-position: 0 0;
のいつつのプロパティを指定するショートハンドプロパティ。
かくときは
background: transparent none repeat scroll 0 0;
こう。さらにcss3でbackground-size対応版だと、こう。
background: #f00 url(hoge) 0 0 / 10px 15px no-repeat;
/のあとの数値がbackground-size。
複雑なことは無いんだけど、省略することが多くなりがちなので気をつけたい。
深淵が見えるその2。
font
font-style: normal;
font-variant: normal;
font-weight: normal;
font-size: medium;/
line-height: normal;
font-family: '';/*ここも初期値がよくわからない、指定なし？*/
以上6つを一括指定する。
書くとこうなる。
font: normal normal normal medium/1.5 'メイリオ';
こんなかんじ。
normal3つは左からfont-style、font-variant、font-weight、の、はず。
line-heightは入れる前に/を入力。
とはいえこの要素全部リセットしてくれるとなるとそうそう使えない。怖い。そして覚えない。深淵に飲まれた。
以上、
思いつくままに書いたので、抜けてるプロパティがあったら教えて下さい。