CSSのショートハンド
ショートハンド ＝ 省略する書き方
ひとつのプロパティでまとめて書ける
記述する量を減らせる→時間短縮
ショートハンドの記述ができるプロパティ
margin 外側の余白
padding 内側の余白
background 背景
border 線
border-width 線幅
border-style 線のスタイル
border-color 線の色
border-radius 角丸
font 書体
書き順に指定がある
margin padding のショートハンド
指定したい箇所によって書き方を変えられる
使えるタイミング
上下左右、4方向の値がばらばら
左右は同じ（上下は違う）
上下と左右がそれぞれ同じ
上下左右、4方向の値がすべて同じ
https://gyazo.com/f765b61198ed88333cf8f26353a33fe8
margin: 上 右 下 左 4方向が違う値のとき
覚え方：上から時計回り
margin: 10px 5px 15px 20px;
上10px 右5px 下15px 左20px
margin: 上 左右 左
左右は同じ値のとき
やはり上から書く
margin: 10px 20px 15px;
上10px 左右20px 下15px
margin: 上下 左右
上下同じ・左右同じ値のとき
やはり上から書く
margin: 10px 20px;
上下10px 左右20px
margin: 上下左右
4方向全て同じ値を指定するときは1つの値を指定するだけで済む→楽！
margin: 10px;
上下左右10px
padding も同様
background のショートハンド
以下のプロパティをまとめられる
背景色の指定background-color）
背景画像のURLbackground-image
背景画像の繰り返しbackground-repeat
背景画像の位置background-position
背景画像の大きさbackground-size
画像の位置をスクロールさせるか／固定させるかbackground-attachment
背景の領域background-clip
背景画像の基準位置background-origin
書き順に決まりはない
指定しないときは初期値になる
background: #ccc url(sample.png) no-repeat top right
border のショートハンド
以下のプロパティをまとめられる
線幅 border-width
線のスタイル border-style
線の色 border-color
上下左右すべて同じ値の場合に使える。
border: 1px solid #999
四方向とも 1px の実線で色は薄いグレーの線
border-width のショートハンド
以下のプロパティ：線幅のみをまとめたショートハンド
border-top-width
border-right-width
border-bottom-width
border-left-width
margin や padding と同様に4方向の指定が可能
4方向ばらばら
上／左右／下
上下／左右
4方向とも同じ
border-styleのショートハンド
以下のプロパティ：線のスタイルのみをまとめたショートハンド
border-top-style
border-right-style
border-bottom-style
border-left-style
margin や padding と同様に4方向の指定が可能
4方向ばらばら
上／左右／下
上下／左右
4方向とも同じ
スタイルの一部
border-style: dotted 破線
border-style: dashed 点線
border-style: solid 実線
border-style: double 二重の線
border-color のショートハンド
以下のプロパティ：上下左右4方向の線の色のみをまとめたショートハンド
border-top-color
border-right-color
border-bottom-color
border-left-color
margin や padding と同様に4方向の指定が可能
4方向ばらばら
上／左右／下
上下／左右
4方向とも同じ
参考
感想
border-width、border-style、border-color のショートハンドのこと知らなかった……
三角矢印とか作るときに有効活用できそう。
https://gyazo.com/7a632efef5b0d780337a406913e39137