1. HOME
  2. WEB制作
WEB制作 公開

記事更新日

Emmetによる快適高速コーディングを習得するための記事です。
EmmetでのCSSコーディングをなるべく分かりやすくまとめてみました。

慣れると超高速になるので、早いところemmetの記述方法を覚えておきましょう。
なお、導入編とHTML編もあるので興味があれば見てください。

記述方法と展開例

SublimeText2での使用例となります。
記述後にTABキーもしくはctrl+Eキーで展開されます。

よく使いそうな記述を例に挙げます。


p
padding: ;

/* 値を指定したい場合 */
p:10
padding: 10px;

/* 複数の値指定 */
p:10-5
padding: 10px 5px;
p:10-5-1-8
padding: 10px 5px 1px 8px;

/* 単位の指定 */
p:10em
padding: 10em;

/* 単位複数指定*/
p:10%5em
padding: 10% 5em;

通常の指定だとプロパティ名だけが出力されますが、コロンの後に数値を入れることで数値を指定できます。また(-)ハイフンで区切る事で複数の指定も可能です。

何も指定してあげないとデフォルトの展開では、pxになります。
%やemなどで指定したい時は、数値の後に希望の単位を指定する必要があります。

単位の指定を省略している場合で、複数の数値を指定する場合は、(-)ハイフンが必要ですが、単位を入力している場合には(-)ハイフンは必要ありません

ベンダープレフィックスも自動で付けてくれる

-webkit-や-moz-などのベンダープレフィックスを手打ちで入力するのは面倒ですよね。emmetならそんな面倒も一発で解決してくれます。


/* ベンダープレフィックスも自動付与 */
bxsh:0px0px1px1px#666-inset;

-webkit-box-shadow: 0px 0px 1px 1px #666 inset;
-moz-box-shadow: 0px 0px 1px 1px #666 inset;
box-shadow: 0px 0px 1px 1px #666 inset;

/* -を前に付けることでも付与される */
-ts:0px0px1px#999

-webkit-text-shadow: 0px 0px 1px #999;
-moz-text-shadow: 0px 0px 1px #999;
-ms-text-shadow: 0px 0px 1px #999;
-o-text-shadow: 0px 0px 1px #999;
text-shadow: 0px 0px 1px #999;

グラデーションの展開も便利

面倒なグラデーションの記述もこれで手間が省けます。


/* グラデーションも楽チン記述 */
lg(left, #fc0 30%, red)
background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.3, #fc0), to(red));
background-image: -webkit-linear-gradient(left, #fc0 30%, red);
background-image: -moz-linear-gradient(left, #fc0 30%, red);
background-image: -o-linear-gradient(left, #fc0 30%, red);
background-image: linear-gradient(left, #fc0 30%, red);

展開例早見表

展開例の早見表を作ってみました。
結構な量だったので、ちょっと削った部分はありますが、それでも多い。

視覚整形モデル

記述展開後
posposition: relative;
pos:sposition: static;
pos:aposition: absolute;
pos:rposition: relative;
pos:fposition: fixed;
ttop: ;
rright: ;
bbottom: ;
lleft: ;
zz-index: ;
flfloat: left;
fl:rfloat: right;
fl:lfloat: left;
fl:nfloat: none;
clclear: both;
cl:nclear: none;
cl:rclear: right;
cl:lclear: left;
cl:bclear: both;
ddisplay: block;
d:ndisplay: none;
d:bdisplay: block;
d:idisplay: inline;
d:ibdisplay: inline-block;
d:lidisplay: list-item;
d:ridisplay: run-in;
d:cpdisplay: compact;
d:tbdisplay: table;
d:itbdisplay: inline-table;
d:tbcpdisplay: table-caption;
d:tbcldisplay: table-column;
d:tbclgdisplay: table-column-group;
d:tbhgdisplay: table-header-group;
d:tbfgdisplay: table-footer-group;
d:tbrdisplay: table-row;
d:tbrgdisplay: table-row-group;
d:tbcdisplay: table-cell;
d:rbdisplay: table-ruby;
d:rbbdisplay: table-ruby-base;
d:rbbgdisplay: table-ruby-base-group;
d:rbtdisplay: table-ruby-text;
d:rbtgdisplay: table-ruby-text-group;
vvisibility: hidden;
v:vvisibility: visible;
v:hvisibility: hidden;
v:cvisibility: collapse;
ovoverflow: hidden;
ov:voverflow: visible;
ov:hoverflow: hidden;
ov:soverflow: scroll;
ov:aoverflow: auto;
ovxoverflow-x: hidden;
ovx:voverflow-x: visible;
ovx:hoverflow-x: hidden;
ovx:soverflow-x: scroll;
ovx:aoverflow-x: auto;
ovyoverflow-y: hidden;
ovy:voverflow-y: visible;
ovy:hoverflow-y: hidden;
ovy:soverflow-y: scroll;
ovy:aoverflow-y: auto;
ovsoverflow-style: scrollbar;
ovs:aoverflow-style: auto;
ovs:soverflow-style: scrollbar;
ovs:poverflow-style: panner;
ovs:moverflow-style: move;
ovs:mqoverflow-style: marquee;
zoozoom: 1;
zmzoom: 1;
cpclip: ;
cp:aclip: auto;
cp:rclip: rect(top right bottom left);
rszresize: 1;
rsz:nresize: none;
rsz:bresize: both;
rsz:hresize: horizontal;
rsz:vresize: vertical;
curcursor: pointer;
cur:acursor: auto;
cur:bcursor: default;
cur:ccursor: crosshair;
cur:hacursor: hand;
cur:hecursor: help;
cur:mcursor: move;
cur:pcursor: pointer;
cur:tcursor: text;

Outline

記述展開後
oloutline: ;
ol:noutline: none;
olooutline-offset: ;
olwoutline-width: ;
olsoutline-style: ;
olcoutline-color: #000;
olc:ioutline-color: invert;

Table

記述展開後
tbltable-layout: ;
tbl:atable-layout: auto;
tbl:ftable-layout: fixed;
cpscaption-side: ;
cps:tcaption-side: top;
cps:bcaption-side: bottom;
ecempty-cells: ;
ec:sempty-cells: show;
ec:hempty-cells: hide;

border

記述展開後
bdborder: ;
bd+border: 1px solid #000;
bd:nborder: none;
bdbkborder-break: close;
bdbk:cborder-break: close;
bdclborder-collapse: ;
bdcl:cborder-collapse: collapse;
bdcl:sborder-collapse: separate;
bdcborder-color: #000;
bdc:tborder-color: transparent;
bdiborder-image: url();
bdi:nborder-image: none;
bdtiborder-top-image: url();
bdriborder-right-image: url();
bdbiborder-bottom-image: url();
bdliborder-left-image: url();
bdciborder-corner-image: url();
bdci:nborder-corner-image: none;
bdci:cborder-corner-image: continue;
bdtliborder-top-left-image: url();
bdtriborder-top-right-image: url();
bdbriborder-bottom-right-image: url();
bdbliborder-bottom-left-image: url();
bdfborder-fit: repeat;
bdf:cborder-fit: clip;
bdf:rborder-fit: repeat;
bdf:scborder-fit: scale;
bdf:stborder-fit: stretch;
bdf:owborder-fit: overwrite;
bdf:spborder-fit: space;
bdlenborder-length: ;
bdlen:aborder-length: auto;
bdspborder-spacing: ;
bdsborder-style: ;
bds:nborder-style: none;
bds:hborder-style: hidden;
bds:dtborder-style: dotted;
bds:dsborder-style: dashed;
bds:sborder-style: solid;
bds:dbborder-style: double;
bds:dtdsborder-style: dot-dash;
bds:dtdtdsborder-style: dot-dot-dash;
bds:wborder-style: wave;
bds:gborder-style: groove;
bds:rborder-style: ridge;
bds:iborder-style: inset;
bds:oborder-style: outset;
bdwborder-width: ;
bdtborder-top: ;
btborder-top: ;
bdt+border-top: 1px solid #000;
bdt:nborder-top: none;
bdtwborder-top-width: ;
bdtsborder-top-style: ;
bdtcborder-top-color: #000;
bdrborder-right: ;
bdlborder-left: ;
bdbborder-bottom: ;
bdrsborder-radius: ;
bdtrrsborder-top-right-radius: ;
bdtlrsborder-top-left-radius: ;
bdbrrsborder-bottom-right-radius: ;
bdblrsborder-bottom-right-radius: ;

paddingとmargin

記述展開後
mmargin: ;
m:amargin: auto;
mtmargin-top: ;
mrmargin-right: ;
mbmargin-bottom: ;
mlmargin-left: ;
ppadding: ;
ptpadding-top: ;
prpadding-right: ;
pbpadding-bottom: ;
plpadding-left: ;

list-style

記述展開後
lislist-style: ;
lisplist-style-position: ;
lisp:ilist-style-position: inside;
lisp:olist-style-position: outside;
listlist-style-type: ;
list:nlist-style-type: none;
list:dlist-style-type: disc;
list:clist-style-type: circle;
list:slist-style-type: square;
list:dclist-style-type: decimal;
list:dclzlist-style-type: decimal-leading-zero;
list:lrlist-style-type: lower-roman;
list:urlist-style-type: upper-roman;
lisilist-style-image: ;

font

記述展開後
ffont: ;
f+font: 1em Arial,sans-serif;
fwfont-weight: ;
fsfont-style: italic;
fvfont-variant: ;
fzfont-size: ;
fzafont-size-adjust: ;
fffont-family: ;
feffont-effect: ;
femfont-emphasize: ;
fempfont-emphasize-position: ;
femsfont-emphasize-style: ;
fsmfont-smooth: ;
fstfont-stretch: ;

Text関連

記述展開後
vavertical-align: top;
tatext-align: left;
tdtext-decoration: none;
tetext-emhasis: ;
thtext-height: ;
titext-indent: ;
tjtext-justify: ;
totext-outline: ;
trtext-replace: ;
tttext-transform: uppercase;
twtext-wrap: ;
tshtext-shadow: hoff voff blur #000;
lhline-height: ;
ltsletter-spacing: ;
whswhite-space: ;
whscwhite-space-collapse: ;
wobword-break: ;
wosword-spacing: ;
wowword-wrap: ;

Background

記述展開後
bgbackground: ;
bgcbackground-color: ;
bgibackground-image: url();
bgrbackground-repeat: ;
bgabackground-attachment: ;
bgpbackground-position: ;
bgpxbackground-position-x: ;
bgpybackground-position-y: ;
bgbkbackground-break: ;
bgcpbackground-clip: ;
bgobackground-origin: ;
bgszbackground-size: ;

color

記述展開後
ccolor: #000;
c:rcolor: rgb(0,0,0);
c:racolor: rgba(0,0,0,.5)
opopacity: ;

Generated content

記述展開後
cntcontent: ”;
cnt:ncontent: normal;
cnt:oqcontent: open-quote;
cnt:noqcontent: no-open-quote;
cnt:cqcontent: close-quote;
cnt:ncqcontent: no-close-quote;
cnt:acontent: attr();
cnt:ccontent: counter();
cnt:cscontent: counters();
ctcontent: ;
qquotes: ;
coicounter-increment: ;
corcounter-reset

Box Sizing

記述展開後
bxzbox-sizing: border-box;
bxshbox-shadow: inset hoff voff blur color;
wwidth: ;
hheight: ;
mawmax-width: ;
mahmax-height: ;
miwmin-width: ;
mihmin-height: ;

Print

記述展開後
pgbbpage-break-before: ;
pgbipage-break-inside: ;
pgbapage-break-after: ;
orporphans: ;
widwidows: ;

その他

記述展開後
!!important
@f@font-face {
font-family:;
src:url();
}
@i@import url();
@kf@-webkit-keyframes identifier {
from { }
to { }
}
@-o-keyframes identifier {
from { }
to { }
}
@-moz-keyframes identifier {
from { }
to { }
}
@keyframes identifier {
from { }
to { }
}
@m@media screen {

}

animanimation: ;
animdelanimation-delay: time;
animdiranimation-direction: ;
animduranimation-duration: 0s;
animfmanimation-fill-mode: both;
animicanimation-iteration-count: 1;
animnanimation-name: none;
animpsanimation-play-state: running;
animtfanimation-timing-function: linear;
apappearance: none;
cm/* */
colmcolumns : ;
colmccolumn-count: ;
colmfcolumn-fill: ;
colmgcolumn-gap: ;
colmrcolumn-rule: ;
colmscolumn-span: ;
colmwcolumn-width: ;
marmax-resolution: res;
mirmin-resolution: res;
op:iefilter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
op:ms-ms-filter:’progid:DXImageTransform.Microsoft.Alpha(Opacity=100)’;
oriorientation: ;
tovtext-overflow: ;
trftransform: ;
trfotransform-orign: ;
trfstransform-style: ;
trstransition: ;
trsdetransition-delay: ;
trsdutransition-duration: ;
trsptransition-property: ;
trstftransition-timing-function: ;
ususer-select: ;
wfsm-webkit-font-smoothing: ;