Emmetの書き方をまとめてみた(CSS編)

よく使いそうなEmmetのCSSの書き方をまとめてみました。

EmmetのHTMLの書き方についてはその1はこちら

EmmetのHTMLの書き方についてはその2はこちら

さらに詳しく知りたい方はEmmetの公式サイトとチートサイトをご覧ください。

align-items

ai→align-items:;
ai:c→align-items:center;
ai:fe→align-items:flex-end;
ai:fs→align-items:flex-start;
ai:s→align-items:stretch;

background

bg→background: #000;
bgc→background-color: #fff;
bgi→background-image: url();
bgi:n→background-image: none;
bgr→background-repeat:;
bgsz→background-size:;

bottom

b→bottom:;
b20→bottom:20px;
b20%→bottom:20%;

border

bd→border:;
bd+→border:1px solid #000;
bd:n→border:none;
bdc→border-color:#000;
bdt→border-top:;
bdr→border-right:;
bdb→border-bottom:;
bdl→border-left:;

border-radius

bdrs→border-radius:;

color

c→color:#000;
c:r→color:rgb(0, 0, 0);
c:rg→color:rgba(0, 0, 0, .5);

display

d→display:block;
d:n→display:none;
d:f→display:flex;
d:i→display:inline;
d:ib→display:inline-block;

font-weight

fw→font-weight:;
fw:b→font-weight:bold;

font-size

fz→font-size:;
fz20→font-size:20px;
fz2em→font-size:2em;

justify-content

jc→jusfity-content:;
jc:c→jusfity-content:center;
jc:fe→jusfity-content:flex-end;
jc:fs→jusfity-content:flex-start;
jc:sa→jusfity-content:space-around;
jc:sb→jusfity-content:space-between;

left

l→left:;
l20→left:20px;
l20%→left:20%;

line-height

lh→line-height:;

letter-spacing

lts→letter-spacing:;

margin

m→margin:;
m:a→margin:auto;
mt→margin-top;
mr→margin-right;
mb→margin-bottom;
ml→margin-left;
m20→margin: 20px;
m20-20→margin: 20px 20px;

max-height

mah→max-height:;

max-width

maw→max-width:;

min-height

mih→min-height:;

min-width

miw→min-width:;

overflow

ov→overflow:hidden;
ov:v→overflow:visible;
ov:s→overflow:scroll;
ov:a→overflow:auto;
ovx→overflow-x:hidden;
ovx:v→overflow-x:visible;
ovx:s→overflow-x:scroll;
ovx:a→overflow-x:auto;
ovy→overflow-y:hidden;
ovy:v→overflow-y:visible;
ovy:s→overflow-y:scroll
ovy:a→overflow-y:auto;

padding

p→padding:;
p:a→padding:auto;
pt→padding-top;
pr→padding-right;
pb→padding-bottom;
p20→padding: 20px;
pt20→padding-top:20px;
p2em→padding: 2em;
p20-20→padding: 20px 20px;

position

pos→position:relative;
pos:s→position:static;
pos:a→position:absolute;
pos:r→position:relative;
pos:f→position:fixed;

right

r→right:;
r20→right:20px;
r20%→right:20%;

top

t→top:;
t20→top:20px;
t20%→top:20%;

text-align

tac→text-align: center;
tar→text-align: right;
ta:l→text-align: left;

vertical-align

va→vertical-align:top;
vam→vertical-align:middle;
vab→vertical-align:bottom;

white-space

whs→white-space:;
whs:nw→white-space:nowrap;

width

w→width:;
w:a→width:auto;
w20→width:20px;
w20%→width:20%;

z-index

z→z-index:;
z5→z-index:5;