【CSS編】初心者向けEmmetの書き方

2016年11月6日tool, WEB制作

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

慣れると超高速になるので、早いところemmetの記述方法を覚えておきましょう。
なお、導入編とHTML編に別れているのでそちらをチェックしていない場合は要チェック!

 Emmetの導入方法
 【HTML編】初心者向けEmmetの基本

記述方法と展開例

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

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

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

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

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

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

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

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

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

展開例早見表

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

視覚整形モデル

記述 展開後
pos position: relative;
pos:s position: static;
pos:a position: absolute;
pos:r position: relative;
pos:f position: fixed;
t top: ;
r right: ;
b bottom: ;
l left: ;
z z-index: ;
fl float: left;
fl:r float: right;
fl:l float: left;
fl:n float: none;
cl clear: both;
cl:n clear: none;
cl:r clear: right;
cl:l clear: left;
cl:b clear: both;
d display: block;
d:n display: none;
d:b display: block;
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: table-ruby;
d:rbb display: table-ruby-base;
d:rbbg display: table-ruby-base-group;
d:rbt display: table-ruby-text;
d:rbtg display: table-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 zoom: 1;
zm zoom: 1;
cp clip: ;
cp:a clip: auto;
cp:r clip: rect(top right bottom left);
rsz resize: 1;
rsz:n resize: none;
rsz:b resize: both;
rsz:h resize: horizontal;
rsz:v resize: vertical;
cur cursor: pointer;
cur:a cursor: auto;
cur:b 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;

Outline

記述 展開後
ol outline: ;
ol:n outline: none;
olo outline-offset: ;
olw outline-width: ;
ols outline-style: ;
olc outline-color: #000;
olc:i outline-color: invert;

Table

記述 展開後
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

記述 展開後
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();
bdri border-right-image: url();
bdbi border-bottom-image: url();
bdli border-left-image: url();
bdci border-corner-image: url();
bdci:n border-corner-image: none;
bdci:c border-corner-image: continue;
bdtli border-top-left-image: url();
bdtri border-top-right-image: url();
bdbri border-bottom-right-image: url();
bdbli border-bottom-left-image: url();
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: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 border-top: ;
bt border-top: ;
bdt+ border-top: 1px solid #000;
bdt:n border-top: none;
bdtw border-top-width: ;
bdts border-top-style: ;
bdtc border-top-color: #000;
bdr border-right: ;
bdl border-left: ;
bdb border-bottom: ;
bdrs border-radius: ;
bdtrrs border-top-right-radius: ;
bdtlrs border-top-left-radius: ;
bdbrrs border-bottom-right-radius: ;
bdblrs border-bottom-right-radius: ;

paddingとmargin

記述 展開後
m margin: ;
m:a margin: auto;
mt margin-top: ;
mr margin-right: ;
mb margin-bottom: ;
ml margin-left: ;
p padding: ;
pt padding-top: ;
pr padding-right: ;
pb padding-bottom: ;
pl padding-left: ;

list-style

記述 展開後
lis list-style: ;
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: ;

font

font-style: italic;

記述 展開後
f font: ;
f+ font: 1em Arial,sans-serif;
fw font-weight: ;
fs
fv font-variant: ;
fz font-size: ;
fza font-size-adjust: ;
ff font-family: ;
fef font-effect: ;
fem font-emphasize: ;
femp font-emphasize-position: ;
fems font-emphasize-style: ;
fsm font-smooth: ;
fst font-stretch: ;

Text関連

記述 展開後
va vertical-align: top;
ta text-align: left;
td text-decoration: none;
te text-emhasis: ;
th text-height: ;
ti text-indent: ;
tj text-justify: ;
to text-outline: ;
tr text-replace: ;
tt text-transform: uppercase;
tw text-wrap: ;
tsh text-shadow: hoff voff blur #000;
lh line-height: ;
lts letter-spacing: ;
whs white-space: ;
whsc white-space-collapse: ;
wob word-break: ;
wos word-spacing: ;
wow word-wrap: ;

Background

記述 展開後
bg background: ;
bgc background-color: ;
bgi background-image: url();
bgr background-repeat: ;
bga background-attachment: ;
bgp background-position: ;
bgpx background-position-x: ;
bgpy background-position-y: ;
bgbk background-break: ;
bgcp background-clip: ;
bgo background-origin: ;
bgsz background-size: ;

color

colorはrgbaをよく使うので、結構c:raは使いますね。

記述 展開後
c color: #000;
c:r color: rgb(0,0,0);
c:ra color: rgba(0,0,0,.5)
op opacity: ;

Generated content

記述 展開後
cnt content: ”;
cnt:n content: normal;
cnt:oq content: open-quote;
cnt:noq content: no-open-quote;
cnt:cq content: close-quote;
cnt:ncq content: no-close-quote;
cnt:a content: attr();
cnt:c content: counter();
cnt:cs content: counters();
ct content: ;
q quotes: ;
coi counter-increment: ;
cor counter-reset

Box Sizing

記述 展開後
bxz box-sizing: border-box;
bxsh box-shadow: inset hoff voff blur color;
w width: ;
h height: ;
maw max-width: ;
mah max-height: ;
miw min-width: ;
mih min-height: ;

Print

記述 展開後
pgbb page-break-before: ;
pgbi page-break-inside: ;
pgba page-break-after: ;
orp orphans: ;
wid widows: ;

その他

記述 展開後
! !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 {

}

anim animation: ;
animdel animation-delay: time;
animdir animation-direction: ;
animdur animation-duration: 0s;
animfm animation-fill-mode: both;
animic animation-iteration-count: 1;
animn animation-name: none;
animps animation-play-state: running;
animtf animation-timing-function: linear;
ap appearance: none;
cm /* */
colm columns : ;
colmc column-count: ;
colmf column-fill: ;
colmg column-gap: ;
colmr column-rule: ;
colms column-span: ;
colmw column-width: ;
mar max-resolution: res;
mir min-resolution: res;
op:ie filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
op:ms -ms-filter:’progid:DXImageTransform.Microsoft.Alpha(Opacity=100)’;
ori orientation: ;
tov text-overflow: ;
trf transform: ;
trfo transform-orign: ;
trfs transform-style: ;
trs transition: ;
trsde transition-delay: ;
trsdu transition-duration: ;
trsp transition-property: ;
trstf transition-timing-function: ;
us user-select: ;
wfsm -webkit-font-smoothing: ;

この記事が気に入ったら
『いいね』しよう!