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

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);

展開例早見表

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

視覚整形モデル

Outline

Table

border

paddingとmargin

list-style

font

Text関連

Background

color

Generated content

Box Sizing

Print

その他