CSSには短縮形の書き方が複数
CSSには短縮形の書き方が複数あります。このページでは、その文法的なものをまとめようと思います。
値が４つあるものの短縮形
プロパティによっては指定する値が4つあるものが存在します。例えばmarginなどのプロパティはtop,right,bottom,leftの４つを指定します。
それぞれ短縮して書くことが可能なパターンがあるので、marginを例にご紹介します。
4つの値の順番
top,right,bottom,leftの４つの値の順番は、このように回ってきます。↓
例）margin:15px 20px 25px 30px;
時計回り（15px→top 20px→right 25px→bottom 30px→left）
12時の方向からtop（上）15px、次に３時になってright（右）20px、次6時になってbottom（下）25px、9時になってleft（左）30pxの順番です。それを踏まえたうえでこちらが短縮形です↓
短縮形の書き方
- 各要素の値が違う場合
margin:15px 20px 25px 30px;（上15px，右20px、下25px、左30px） - 各要素の値が全部同じ場合
margin:0;（top,right,bottom,left全部0） - 上下と左右が同じ値の場合
margin:10px 16px;（top,bottomが10pxでright,leftが16px） - 左右だけが同じ値の場合
margin:10px 16px 15px;（topが10px, right,leftが16px, bottomが15px）
値が４つのときは、先ほど解説した時計回りの順番に書いていきます。次に上下左右の値が全部同じな場合はひとつだけでOKですし、０だったらpxとかもつけなくてOKです。
値が２つしかなかったら上下と左右が２つ書かれていますし、左右だけが同じ場合は値が３つになります。
カラーコードの短縮形
カラーコードは基本的に#〇〇〇〇〇〇のような形式や、orangeなどの色名で指定すると思いますが、例えば白の場合は#ffffffになります。このように同じ文字を6つ並べるのもしんどいので、短縮形ではこのように書けます。
color:#fff;シャープはちゃんと付けなきゃだめでした。そこまでずるはできなかった。
