CSSを効率良く書く!Emmetの書き方・使い方まとめ

Pocket

以前はzencodingという名前だったEmmetですが、HTMLに限らずCSSでも威力を発揮します。例えばmargin: 10px;と13文字打っていたものが、m10のようにたった3文字で記述できてしまうのです。

この記事ではEmmetをCSSで使う方法を紹介します。

HTML編はこちら: HTMLを効率よく書く!Emmetの書き方・使い方まとめ

Emmetの書き方・使い方 CSS編

Emmetのインストール

Emmetは各コードエディターにインストールする必要があります。インストール方法や基本的な使い方については、HTMLを効率よく書く!Emmetの書き方・使い方まとめをご覧ください。

EmmetでCSSを書く方法 基本編

Emmetを使ったCSSの記述方法を確認していきます。まずは簡単なところから。

基本的には各プロパティごとに展開していきます。プロパティの短縮系はチートシートのCSSの項目をみてください。

f-n
mb10
bd+
bdrs3


/*  展開後  */
float: none;
margin-bottom: 10px;
border: 1px solid #000;
border-radius: 3px;

marginwidthなどを展開するとpxで表示されますが、%emにすることもできます。また、小数点をつけると自動的にemになります。

w80p
m10e
p10x
fz1.5


/*  展開後  */
width: 80%;
margin: 10em;
padding: 10ex;
font-size: 1.5em;

padding: 10px 15px;のように複数の値を入れる場合は以下のようにします。

p10-15
m5-0-10-20


/*  展開後  */
padding: 10px 15px;
margin: 5px 0 10px 20px;

#000などのカラーの入力はこんな感じ。rgbaなども対応してますね。あとborderの記述もよく使います。

c#0
c#e0
c-ra
bd1#cs


/*  展開後  */
color: #000;
color: #e0e0e0;
color: rgba(0, 0, 0, .5);
border: 1px #ccc solid;

最後に!important。手書きだと結構めんどくさいですが、Emmetなら一発です。

fz12!
f-l!


/*  展開後  */
font-size: 12px !important;
float: left !important;

EmmetでCSSを書く方法 応用編

EmmetならVendor prefixも1行で簡単に記述することができます。1度にすべて書き出すことも、1つずつ任意につけることもできます。

-w-bdrs2
-m-bdrs2
-s-bdrs2
-o-bdrs2

-wmso-bdrs2


/*  展開後  */
-webkit-border-radius: 2px;
border-radius: 2px;

-moz-border-radius: 2px;
border-radius: 2px;

-ms-border-radius: 2px;
border-radius: 2px;

-o-border-radius: 2px;
border-radius: 2px;

-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;

次はグラデーション。lg()で展開できます。

lg(left,#fc0,red);


/*  展開後  */
background-image: -webkit-linear-gradient(left, #fc0, red);
background-image: -o-linear-gradient(left, #fc0, red);
background-image: linear-gradient(to right, #fc0, red);

さいごに

グラデーションはEmmetを使ってもいいんですが、もっと細かく設定できるBourbonのようなMixinを使った方がいいかもしれないです。Prefixはつけ忘れなどのリスクもあるためGruntやCodekitなどで自動化するのがおすすめ。

Emmetに加えてSassも使えるようになるとCSSスタイリングの効率がかなり上がります。最初は少しとまどうかもしれないですが、Sassのほうも是非チャレンジしてみてください。

Sass(SCSS)の簡単な使い方まとめ