前回のEmmetのhtmlに引き続き、今回はcssの使い方について紹介します。
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を効率的にコーデイングする方法