Emmet│CSSに関するチートシート

Web制作をしている時はコード量がどうしても多くなりますが、

少しでも時短になるようにEmmetの記法を使うことにしています。

ということで、まとめてみました。

Emmet│CSSに関するチートシートまとめ

この記事ではEmmetのCSSに関するチートシートをテーブルでまとめました。

検索して使いたいコマンドを探してみてください。

Visual Formatting

ショートカット	CSSプロパティ
pos	position:relative;
pos:s	position:static;
pos:a	position:absolute;
pos:r	position:relative;
pos:f	position:fixed;
t	top:;
t:a	top:auto;
r	right:;
r:a	right:auto;
b	bottom:;
b:a	bottom:auto;
l	left:;
l:a	left:auto;
z	z-index:;
z:a	z-index:auto;
fl	float:left;
fl:n	float:none;
fl:l	float:left;
fl:r	float:right;
cl	clear:both;
cl:n	clear:none;
cl:l	clear:left;
cl:r	clear:right;
cl:b	clear:both;
d	display:block;
d:n	display:none;
d:b	display:block;
d:f	display:flex;
d:if	display:inline-flex;
d:i	display:inline;
d:ib	display:inline-block;
d:li	display:list-item;
d:ri	display:run-in;
d:cp	display:compact;
d:tb	display:table;
d:itb	display:inline-table;
d:tbcp	display:table-caption;
d:tbcl	display:table-column;
d:tbclg	display:table-column-group;
d:tbhg	display:table-header-group;
d:tbfg	display:table-footer-group;
d:tbr	display:table-row;
d:tbrg	display:table-row-group;
d:tbc	display:table-cell;
d:rb	display:ruby;
d:rbb	display:ruby-base;
d:rbbg	display:ruby-base-group;
d:rbt	display:ruby-text;
d:rbtg	display:ruby-text-group;
v	visibility:hidden;
v:v	visibility:visible;
v:h	visibility:hidden;
v:c	visibility:collapse;
ov	overflow:hidden;
ov:v	overflow:visible;
ov:h	overflow:hidden;
ov:s	overflow:scroll;
ov:a	overflow:auto;
ovx	overflow-x:hidden;
ovx:v	overflow-x:visible;
ovx:h	overflow-x:hidden;
ovx:s	overflow-x:scroll;
ovx:a	overflow-x:auto;
ovy	overflow-y:hidden;
ovy:v	overflow-y:visible;
ovy:h	overflow-y:hidden;
ovy:s	overflow-y:scroll;
ovy:a	overflow-y:auto;
ovs	overflow-style:scrollbar;
ovs:a	overflow-style:auto;
ovs:s	overflow-style:scrollbar;
ovs:p	overflow-style:panner;
ovs:m	overflow-style:move;
ovs:mq	overflow-style:marquee;
zoo, zm	zoom:1;
cp	clip:;
cp:a	clip:auto;
cp:r	clip:rect(top right bottom left);
rsz	resize:;
rsz:n	resize:none;
rsz:b	resize:both;
rsz:h	resize:horizontal;
rsz:v	resize:vertical;
cur	cursor:${pointer};
cur:a	cursor:auto;
cur:d	cursor:default;
cur:c	cursor:crosshair;
cur:ha	cursor:hand;
cur:he	cursor:help;
cur:m	cursor:move;
cur:p	cursor:pointer;
cur:t	cursor:text;

Margin & Padding

ショートカット	CSSプロパティ
m	margin:;
m:a	margin:auto;
mt	margin-top:;
mt:a	margin-top:auto;
mr	margin-right:;
mr:a	margin-right:auto;
mb	margin-bottom:;
mb:a	margin-bottom:auto;
ml	margin-left:;
ml:a	margin-left:auto;
p	padding:;
pt	padding-top:;
pr	padding-right:;
pb	padding-bottom:;
pl	padding-left:;

Box Sizing

ショートカット	CSSプロパティ
bxz	box-sizing:border-box;
bxz:cb	box-sizing:content-box;
bxz:bb	box-sizing:border-box;
bxsh	box-shadow:inset hoff voff blur color;
bxsh:r	box-shadow:inset hoff voff blur spread rgb(0, 0, 0);
bxsh:ra	box-shadow:inset h v blur spread rgba(0, 0, 0, .5);
bxsh:n	box-shadow:none;
w	width:;
w:a	width:auto;
h	height:;
h:a	height:auto;
maw	max-width:;
maw:n	max-width:none;
mah	max-height:;
mah:n	max-height:none;
miw	min-width:;
mih	min-height:;

Font

ショートカット	CSSプロパティ
f	font:;
f+	font:1em Arial,sans-serif;
fw	font-weight:;
fw:n	font-weight:normal;
fw:b	font-weight:bold;
fw:br	font-weight:bolder;
fw:lr	font-weight:lighter;
fs	font-style:${italic};
fs:n	font-style:normal;
fs:i	font-style:italic;
fs:o	font-style:oblique;
fv	font-variant:;
fv:n	font-variant:normal;
fv:sc	font-variant:small-caps;
fz	font-size:;
fza	font-size-adjust:;
fza:n	font-size-adjust:none;
ff	font-family:;
ff:s	font-family:serif;
ff:ss	font-family:sans-serif;
ff:c	font-family:cursive;
ff:f	font-family:fantasy;
ff:m	font-family:monospace;
ff:a	font-family: Arial, “Helvetica Neue”, Helvetica, sans-serif;
ff:t	font-family: “Times New Roman”, Times, Baskerville, Georgia, serif;
ff:v	font-family: Verdana, Geneva, sans-serif;
fef	font-effect:;
fef:n	font-effect:none;
fef:eg	font-effect:engrave;
fef:eb	font-effect:emboss;
fef:o	font-effect:outline;
fem	font-emphasize:;
femp	font-emphasize-position:;
femp:b	font-emphasize-position:before;
femp:a	font-emphasize-position:after;
fems	font-emphasize-style:;
fems:n	font-emphasize-style:none;
fems:ac	font-emphasize-style:accent;
fems:dt	font-emphasize-style:dot;
fems:c	font-emphasize-style:circle;
fems:ds	font-emphasize-style:disc;
fsm	font-smooth:;
fsm:a	font-smooth:auto;
fsm:n	font-smooth:never;
fsm:aw	font-smooth:always;
fst	font-stretch:;
fst:n	font-stretch:normal;
fst:uc	font-stretch:ultra-condensed;
fst:ec	font-stretch:extra-condensed;
fst:c	font-stretch:condensed;
fst:sc	font-stretch:semi-condensed;
fst:se	font-stretch:semi-expanded;
fst:e	font-stretch:expanded;
fst:ee	font-stretch:extra-expanded;
fst:ue	font-stretch:ultra-expanded;

Text

ショートカット	CSSプロパティ
va	vertical-align:top;
va:sup	vertical-align:super;
va:t	vertical-align:top;
va:tt	vertical-align:text-top;
va:m	vertical-align:middle;
va:bl	vertical-align:baseline;
va:b	vertical-align:bottom;
va:tb	vertical-align:text-bottom;
va:sub	vertical-align:sub;
ta	text-align:left;
ta:l	text-align:left;
ta:c	text-align:center;
ta:r	text-align:right;
ta:j	text-align:justify;
ta-lst	text-align-last:;
tal:a	text-align-last:auto;
tal:l	text-align-last:left;
tal:c	text-align-last:center;
tal:r	text-align-last:right;
td	text-decoration:none;
td:n	text-decoration:none;
td:u	text-decoration:underline;
td:o	text-decoration:overline;
td:l	text-decoration:line-through;
te	text-emphasis:;
te:n	text-emphasis:none;
te:ac	text-emphasis:accent;
te:dt	text-emphasis:dot;
te:c	text-emphasis:circle;
te:ds	text-emphasis:disc;
te:b	text-emphasis:before;
te:a	text-emphasis:after;
th	text-height:;
th:a	text-height:auto;
th:f	text-height:font-size;
th:t	text-height:text-size;
th:m	text-height:max-size;
ti	text-indent:;
ti:-	text-indent:-9999px;
tj	text-justify:;
tj:a	text-justify:auto;
tj:iw	text-justify:inter-word;
tj:ii	text-justify:inter-ideograph;
tj:ic	text-justify:inter-cluster;
tj:d	text-justify:distribute;
tj:k	text-justify:kashida;
tj:t	text-justify:tibetan;
to	text-outline:;
to+	text-outline:0 0 #000;
to:n	text-outline:none;
tr	text-replace:;
tr:n	text-replace:none;
tt	text-transform:uppercase;
tt:n	text-transform:none;
tt:c	text-transform:capitalize;
tt:u	text-transform:uppercase;
tt:l	text-transform:lowercase;
tw	text-wrap:;
tw:n	text-wrap:normal;
tw:no	text-wrap:none;
tw:u	text-wrap:unrestricted;
tw:s	text-wrap:suppress;
tsh	text-shadow:hoff voff blur #000;
tsh:r	text-shadow:h v blur rgb(0, 0, 0);
tsh:ra	text-shadow:h v blur rgba(0, 0, 0, .5);
tsh+	text-shadow:0 0 0 #000;
tsh:n	text-shadow:none;
lh	line-height:;
lts	letter-spacing:;
lts-n	letter-spacing:normal;
whs	white-space:;
whs:n	white-space:normal;
whs:p	white-space:pre;
whs:nw	white-space:nowrap;
whs:pw	white-space:pre-wrap;
whs:pl	white-space:pre-line;
whsc	white-space-collapse:;
whsc:n	white-space-collapse:normal;
whsc:k	white-space-collapse:keep-all;
whsc:l	white-space-collapse:loose;
whsc:bs	white-space-collapse:break-strict;
whsc:ba	white-space-collapse:break-all;
wob	word-break:;
wob:n	word-break:normal;
wob:k	word-break:keep-all;
wob:ba	word-break:break-all;
wos	word-spacing:;
wow	word-wrap:;
wow:nm	word-wrap:normal;
wow:n	word-wrap:none;
wow:u	word-wrap:unrestricted;
wow:s	word-wrap:suppress;
wow:b	word-wrap:break-word;

Background

ショートカット	CSSプロパティ
bg	background:#000;
bg+	background:#fff url() 0 0 no-repeat;
bg:n	background:none;
bgc	background-color:#fff;
bgc:t	background-color:transparent;
bgi	background-image:url();
bgi:n	background-image:none;
bgr	background-repeat:;
bgr:n	background-repeat:no-repeat;
bgr:x	background-repeat:repeat-x;
bgr:y	background-repeat:repeat-y;
bgr:sp	background-repeat:space;
bgr:rd	background-repeat:round;
bga	background-attachment:;
bga:f	background-attachment:fixed;
bga:s	background-attachment:scroll;
bgp	background-position:0 0;
bgpx	background-position-x:;
bgpy	background-position-y:;
bgbk	background-break:;
bgbk:bb	background-break:bounding-box;
bgbk:eb	background-break:each-box;
bgbk:c	background-break:continuous;
bgcp	background-clip:padding-box;
bgcp:bb	background-clip:border-box;
bgcp:pb	background-clip:padding-box;
bgcp:cb	background-clip:content-box;
bgcp:nc	background-clip:no-clip;
bgo	background-origin:;
bgo:pb	background-origin:padding-box;
bgo:bb	background-origin:border-box;
bgo:cb	background-origin:content-box;
bgsz	background-size:;
bgsz:a	background-size:auto;
bgsz:ct	background-size:contain;
bgsz:cv	background-size:cover;

Color

ショートカット	CSSプロパティ
c	color:#000;
c:r	color:rgb(0, 0, 0);
c:ra	color:rgba(0, 0, 0, .5);
op	opacity:;

Generated content

ショートカット	CSSプロパティ
cnt	content:”;
cnt:n, ct:n	content:normal;
cnt:oq, ct:oq	content:open-quote;
cnt:noq, ct:noq	content:no-open-quote;
cnt:cq, ct:cq	content:close-quote;
cnt:ncq, ct:ncq	content:no-close-quote;
cnt:a, ct:a	content:attr();
cnt:c, ct:c	content:counter();
cnt:cs, ct:cs	content:counters();
ct	content:;
q	quotes:;
q:n	quotes:none;
q:ru	quotes:’\00AB’ ‘\00BB’ ‘\201E’ ‘\201C’;
q:en	quotes:’\201C’ ‘\201D’ ‘\2018’ ‘\2019’;
coi	counter-increment:;
cor	counter-reset:;

Outline

ショートカット	CSSプロパティ
ol	outline:;
ol:n	outline:none;
olo	outline-offset:;
olw	outline-width:;
olw:tn	outline-width:thin;
olw:m	outline-width:medium;
olw:tc	outline-width:thick;
ols	outline-style:;
ols:n	outline-style:none;
ols:dt	outline-style:dotted;
ols:ds	outline-style:dashed;
ols:s	outline-style:solid;
ols:db	outline-style:double;
ols:g	outline-style:groove;
ols:r	outline-style:ridge;
ols:i	outline-style:inset;
ols:o	outline-style:outset;
olc	outline-color:#000;
olc:i	outline-color:invert;

Tables

ショートカット	CSSプロパティ
tbl	table-layout:;
tbl:a	table-layout:auto;
tbl:f	table-layout:fixed;
cps	caption-side:;
cps:t	caption-side:top;
cps:b	caption-side:bottom;
ec	empty-cells:;
ec:s	empty-cells:show;
ec:h	empty-cells:hide;

Border

ショートカット	CSSプロパティ
bd	border:;
bd+	border:1px solid #000;
bd:n	border:none;
bdbk	border-break:close;
bdbk:c	border-break:close;
bdcl	border-collapse:;
bdcl:c	border-collapse:collapse;
bdcl:s	border-collapse:separate;
bdc	border-color:#000;
bdc:t	border-color:transparent;
bdi	border-image:url();
bdi:n	border-image:none;
bdti	border-top-image:url();
bdti:n	border-top-image:none;
bdri	border-right-image:url();
bdri:n	border-right-image:none;
bdbi	border-bottom-image:url();
bdbi:n	border-bottom-image:none;
bdli	border-left-image:url();
bdli:n	border-left-image:none;
bdci	border-corner-image:url();
bdci:n	border-corner-image:none;
bdci:c	border-corner-image:continue;
bdtli	border-top-left-image:url();
bdtli:n	border-top-left-image:none;
bdtli:c	border-top-left-image:continue;
bdtri	border-top-right-image:url();
bdtri:n	border-top-right-image:none;
bdtri:c	border-top-right-image:continue;
bdbri	border-bottom-right-image:url();
bdbri:n	border-bottom-right-image:none;
bdbri:c	border-bottom-right-image:continue;
bdbli	border-bottom-left-image:url();
bdbli:n	border-bottom-left-image:none;
bdbli:c	border-bottom-left-image:continue;
bdf	border-fit:repeat;
bdf:c	border-fit:clip;
bdf:r	border-fit:repeat;
bdf:sc	border-fit:scale;
bdf:st	border-fit:stretch;
bdf:ow	border-fit:overwrite;
bdf:of	border-fit:overflow;
bdf:sp	border-fit:space;
bdlen	border-length:;
bdlen:a	border-length:auto;
bdsp	border-spacing:;
bds	border-style:;
bds:n	border-style:none;
bds:h	border-style:hidden;
bds:dt	border-style:dotted;
bds:ds	border-style:dashed;
bds:s	border-style:solid;
bds:db	border-style:double;
bds:dtds	border-style:dot-dash;
bds:dtdtds	border-style:dot-dot-dash;
bds:w	border-style:wave;
bds:g	border-style:groove;
bds:r	border-style:ridge;
bds:i	border-style:inset;
bds:o	border-style:outset;
bdw	border-width:;
bdt, bt	border-top:;
bdt+	border-top:1px solid #000;
bdt:n	border-top:none;
bdtw	border-top-width:;
bdts	border-top-style:;
bdts:n	border-top-style:none;
bdtc	border-top-color:#000;
bdtc:t	border-top-color:transparent;
bdr, br	border-right:;
bdr+	border-right:1px solid #000;
bdr:n	border-right:none;
bdrw	border-right-width:;
bdrst	border-right-style:;
bdrst:n	border-right-style:none;
bdrc	border-right-color:#000;
bdrc:t	border-right-color:transparent;
bdb, bb	border-bottom:;
bdb+	border-bottom:1px solid #000;
bdb:n	border-bottom:none;
bdbw	border-bottom-width:;
bdbs	border-bottom-style:;
bdbs:n	border-bottom-style:none;
bdbc	border-bottom-color:#000;
bdbc:t	border-bottom-color:transparent;
bdl, bl	border-left:;
bdl+	border-left:1px solid #000;
bdl:n	border-left:none;
bdlw	border-left-width:;
bdls	border-left-style:;
bdls:n	border-left-style:none;
bdlc	border-left-color:#000;
bdlc:t	border-left-color:transparent;
bdrs	border-radius:;
bdtrrs	border-top-right-radius:;
bdtlrs	border-top-left-radius:;
bdbrrs	border-bottom-right-radius:;
bdblrs	border-bottom-left-radius:;

Lists

ショートカット	CSSプロパティ
lis	list-style:;
lis:n	list-style:none;
lisp	list-style-position:;
lisp:i	list-style-position:inside;
lisp:o	list-style-position:outside;
list	list-style-type:;
list:n	list-style-type:none;
list:d	list-style-type:disc;
list:c	list-style-type:circle;
list:s	list-style-type:square;
list:dc	list-style-type:decimal;
list:dclz	list-style-type:decimal-leading-zero;
list:lr	list-style-type:lower-roman;
list:ur	list-style-type:upper-roman;
lisi	list-style-image:;
lisi:n	list-style-image:none;

Print

ショートカット	CSSプロパティ
pgbb	page-break-before:;
pgbb:au	page-break-before:auto;
pgbb:al	page-break-before:always;
pgbb:l	page-break-before:left;
pgbb:r	page-break-before:right;
pgbi	page-break-inside:;
pgbi:au	page-break-inside:auto;
pgbi:av	page-break-inside:avoid;
pgba	page-break-after:;
pgba:au	page-break-after:auto;
pgba:al	page-break-after:always;
pgba:l	page-break-after:left;
pgba:r	page-break-after:right;
orp	orphans:;
wid	widows:;

Others

ショートカット	CSSプロパティ
!	!important
@f	@font-face { font-family:; src:url(
@f+	@font-face { font-family: ‘FontName’; src: url(‘FileName.eot’); src: url(‘FileName.eot?#iefix’) format(‘embedded-opentype’), url(‘FileName.woff’) format(‘woff’), url(‘FileName.ttf’) format(‘truetype’), url(‘FileName.svg#FontName’) format(‘svg’); font-style: normal; font-weight: normal; }
@i, @import	@import url();
@kf	@-webkit-keyframes identifier { from { } to { } }
@-o-keyframes	identifier { from { } to { } }
@-moz-keyframes	identifier { from { } to { } }
@keyframes	identifier { from { } to { } }
@m, @media	@media screen { }
ac	align-content:;
ac:c	align-content:center;
ac:fe	align-content:flex-end;
ac:fs	align-content:flex-start;
ac:s	align-content:stretch;
ac:sa	align-content:space-around;
ac:sb	align-content:space-between;
ai	align-items:;
ai:b	align-items:baseline;
ai:c	align-items:center;
ai:fe	align-items:flex-end;
ai:fs	align-items:flex-start;
ai:s	align-items:stretch;
anim	animation:;
anim-	animation:name duration timing-function delay iteration-count direction fill-mode;
animdel	animation-delay:time;
animdir	animation-direction:normal;
animdir:a	animation-direction:alternate;
animdir:ar	animation-direction:alternate-reverse;
animdir:n	animation-direction:normal;
animdir:r	animation-direction:reverse;
animdur	animation-duration:0s;
animfm	animation-fill-mode:both;
animfm:b	animation-fill-mode:backwards;
animfm:bt, animfm:bh	animation-fill-mode:both;
animfm:f	animation-fill-mode:forwards;
animic	animation-iteration-count:1;
animic:i	animation-iteration-count:infinite;
animn	animation-name:none;
animps	animation-play-state:running;
animps:p	animation-play-state:paused;
animps:r	animation-play-state:running;
animtf	animation-timing-function:linear;
animtf:cb	animation-timing-function:cubic-bezier(0.1, 0.7, 1.0, 0.1);
animtf:e	animation-timing-function:ease;
animtf:ei	animation-timing-function:ease-in;
animtf:eio	animation-timing-function:ease-in-out;
animtf:eo	animation-timing-function:ease-out;
animtf:l	animation-timing-function:linear;
ap	appearance:${none};
as	align-self:;
as:a	align-self:auto;
as:b	align-self:baseline;
as:c	align-self:center;
as:fe	align-self:flex-end;
as:fs	align-self:flex-start;
as:s	align-self:stretch;
bfv	backface-visibility:;
bfv:h	backface-visibility:hidden;
bfv:v	backface-visibility:visible;
bg:ie	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’x.png’,sizingMethod=’crop’);
cm	/* ${child} */
colm	columns:;
colmc	column-count:;
colmf	column-fill:;
colmg	column-gap:;
colmr	column-rule:;
colmrc	column-rule-color:;
colmrs	column-rule-style:;
colmrw	column-rule-width:;
colms	column-span:;
colmw	column-width:;
d:ib+	display: inline-block; *display: inline; *zoom: 1;
fx	flex:;
fxb	flex-basis:;
fxd	flex-direction:;
fxd:c	flex-direction:column;
fxd:cr	flex-direction:column-reverse;
fxd:r	flex-direction:row;
fxd:rr	flex-direction:row-reverse;
fxf	flex-flow:;
fxg	flex-grow:;
fxsh	flex-shrink:;
fxw	flex-wrap: ;
fxw:n	flex-wrap:nowrap;
fxw:w	flex-wrap:wrap;
fxw:wr	flex-wrap:wrap-reverse;
jc	justify-content:;
jc:c	justify-content:center;
jc:fe	justify-content:flex-end;
jc:fs	justify-content:flex-start;
jc:sa	justify-content:space-around;
jc:sb	justify-content:space-between;
mar	max-resolution:res;
mir	min-resolution:res;
op+	opacity: ; filter: alpha(opacity=);
op:ie	filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
op:ms	-ms-filter:’progid:DXImageTransform.Microsoft.Alpha(Opacity=100)’;
ord	order:;
ori	orientation:;
ori:l	orientation:landscape;
ori:p	orientation:portrait;
tov	text-overflow:${ellipsis};
tov:c	text-overflow:clip;
tov:e	text-overflow:ellipsis;
trf	transform:;
trf:r	transform: rotate(angle);
trf:rx	transform: rotateX(angle);
trf:ry	transform: rotateY(angle);
trf:rz	transform: rotateZ(angle);
trf:sc	transform: scale(x, y);
trf:sc3	transform: scale3d(x, y, z);
trf:scx	transform: scaleX(x);
trf:scy	transform: scaleY(y);
trf:scz	transform: scaleZ(z);
trf:skx	transform: skewX(angle);
trf:sky	transform: skewY(angle);
trf:t	transform: translate(x, y);
trf:t3	transform: translate3d(tx, ty, tz);
trf:tx	transform: translateX(x);
trf:ty	transform: translateY(y);
trf:tz	transform: translateZ(z);
trfo	transform-origin:;
trfs	transform-style:preserve-3d;
trs	transition:prop time;
trsde	transition-delay:time;
trsdu	transition-duration:time;
trsp	transition-property:prop;
trstf	transition-timing-function:tfunc;
us	user-select:${none};
wfsm	-webkit-font-smoothing:${antialiased};
wfsm:a	-webkit-font-smoothing:antialiased;
wfsm:n	-webkit-font-smoothing:none;
wfsm:s, wfsm:sa	-webkit-font-smoothing:subpixel-antialiased;
wm	writing-mode:lr-tb;
wm:btl	writing-mode:bt-lr;
wm:btr	writing-mode:bt-rl;
wm:lrb	writing-mode:lr-bt;
wm:lrt	writing-mode:lr-tb;
wm:rlb	writing-mode:rl-bt;
wm:rlt	writing-mode:rl-tb;
wm:tbl	writing-mode:tb-lr;
wm:tbr	writing-mode:tb-rl;