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);
展開例早見表
展開例の早見表を作ってみました。
結構な量だったので、ちょっと削った部分はありますが、それでも多い。
視覚整形モデル
記述 | 展開後 |
---|---|
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
記述 | 展開後 |
---|---|
f | font: ; |
f+ | font: 1em Arial,sans-serif; |
fw | font-weight: ; |
fs | font-style: italic; |
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
記述 | 展開後 |
---|---|
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: ; |
記述 | 展開後 |
---|---|
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: ; |