前回のEmmetのhtmlに引き続き、今回はcssの使い方について紹介します。

emmetを使ってhtmlを効率的にコーデイングする方法

Emmetはhtmlと同様に、cssについても自動で展開してくれる機能があります。
こちらも非常に便利なものとなっています。

例えば、margin-bottomを指定したいとき

mb10

と入力し、tabキーまたは、エンターキーを入力すると

margin-bottom: 10px;

のように展開されます。

このように非常に少ない入力で済みますので、cssについてもEmmetを使えば効率的に入力ができます。

マージン

先頭にm、最後に数字の組み合わせマージンを指定できます。

展開前
m10
mt10
mr10
mb10
ml10
m10-10-10-10

展開後
margin: 10px;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
margin: 10px 10px 10px 10px;

パディング

先頭にp、最後に数字の組み合わせパディングを指定できます。

展開前
p10
pt10
pr10
pb10
pl10
p10-10-10-10

展開後
padding: 10px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding: 10px 10px 10px 10px;

テキスト・フォント

展開前
fz
fw
fs
ta
va
lh
td
lts

展開後
font-size: ;
font-weight: normal;
font-style: italic;
text-emphasis: after;
vertical-align: top;
line-height: ;
text-decoration: none;
letter-spacing: ;

色・背景

展開前
c
bg
bc
bi
bp

展開後
color: #000;
background: #000;
background-color: #fff;
background-image: url();
background-position: 0 0;

幅・高さ

展開前
w10
h10
maw10
mw10
mah10
mh10

展開後
width: 10px;
height: 10px;
max-width: 10px;
min-width: 10px;
max-height: 10px;
min-height: 10px;

境界線

展開前
bor
bw
borc
bors

展開後
border: ;
border-width: ;
border-color: ;
border-style: ;

表示・配置

展開前
ov
di
vi
fl
cl
po

展開後
overflow: hidden;
display: inline;
visibility: inherit;
float: left;
clear: both;
position: relative;

プロパティをつなげる「+」

「+」をつけることによってプロパティをつなげることができます。

展開前
p10+m10

展開後
padding: 10px;
margin: 10px;

最後に

Emmetで実際に使えるプロパティはここで全て紹介できないくらい、かなりの数あります。
今回はcssでよく使うプロパティを中心に紹介しました。

この他びプロパティについてはチートシートに記載していますので、こちらをみてください。

Emmetのhtmlについてはこちらで詳しく解説しています。
emmetを使ってhtmlを効率的にコーデイングする方法