読者です 読者をやめる 読者になる 読者になる

tamlog

主にwebのフロント回り たまに登山

もっとコーディングが早くなる「Emmet」使い方CSS編

スポンサーリンク

1, 基本編
2, 応用
3, まとめ

1, 基本編

control+Eで展開 以下チートシートを参考にHTML編と同じで展開するとOKです。 http://docs.emmet.io/cheat-sheet/ ただすべて覚えるのは大変です。。 しかし!ある程度いい加減でも展開されるみたいです。 以下でいい加減具合を試せます。 http://docs.emmet.io/css-abbreviations/fuzzy-search/

それと頭に「-」をつけるとベンタープリフィックスをつけてくれます。ありがたいですね! -bdrs

-webkit-border-radius: ;
-moz-border-radius: ;
border-radius: ;

勝手に作ってもつけてくれます。 -tamlog10

-webkit-tamlog: 10px;
-moz-tamlog: 10px;
-ms-tamlog: 10px;
-o-tamlog: 10px;
tamlog: 10px;

グラデーションにも対応! 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);

2, 応用(よく使うやつ)

【幅、高さ、マージンなどの数値】
w100 展開→ widht:100px;
h100 展開→ height:100px;
t100 展開→ top:100px;
mt100 展開→ margin-top:100px;
pt100 展開→ padding-top:100px;
m10px10px10px10px 展開→ margin: 10px 10px 10px 10px;
m0-a 展開→ margin:0 auto;

【ポジションなど】
z10 展開→ z-index:10;
pos:r 展開→ position:relative;
pos:a 展開→ position:absolute;

【ディスプレイ】
d:b 展開→ display: block;
d:i 展開→ display:inline;

【フォントなど】
fw:b 展開→ font-weight:bold;
lh10 展開→ line-height:10;
list:n 展開→ list-style-type:none;
ti:- 展開→ text-indent:-9999px;
--- 展開→ text-indent:-9999px;
::: 展開→ text-indent:-9999px;

【バックグラウンドなど】
bg+ 展開→ background: url() 0px 0px no-repeat;
bgp10px10px 展開→ background-position: 10px 10px;
bgi:n 展開→ background-image:none;
bdt+ 展開→ border-top: 1px solid #000;

「Emmet」のスニペットはjson形式なので簡単に自分のオリジナルを追加することも可能です。

/Users/(ユーザー名)/ライブラリ/Application Support/Coda 2/Plug-ins/Emmet.codaplugin/Contents/Resources/snippets.json

のソースを変更すると独自のスニペットを追加出来ます! 詳しくはこちらEmmetのカスタマイズ

なれるまで時間がかかりますが、一度覚えると手放せなくなりますよ! では「Emmet」で楽しいコーディングを!