Emmetで爆速コーディングを始めよう！- CSS編
前回はEmmetのHTML編として省略記法の基本をご説明しました。今回はCSS編です。Emmetの便利さはCSSの方が感じやすいと思います。
初めは戸惑うかもしれませんが、使い続けていくうちにEmmetなしでCSSを書くのがバカバカしくなるほどの便利さと速さを実感できると思います。ここまでがEmmetの基本となります。
まずは基本形から
CSSファイルを作ってEmmetインストール済みのテキストエディタで以下を入力します。
1 2 3 | .hoge { tac } |
これの「tac」の後ろにカーソルをあわせてTabor Ctrl+Eで展開すると…
1 2 3 | .hoge { text-align: center; } |
こうなります。
引き続き、具体例を挙げていきます。
1 2 3 4 5 6 7 8 9 | d => display: block; c#fff => color: #fff; tdn => text-decoration: none; p10e => padding: 10em; m:a-5 => margin: auto 5px; w100 => width: 100px; h50p => height: 50%; fz1.5pt => font-size: 1.5pt; bd1-s#000 => border: 1px solid #000; |
単位のpxは省略できます。また%・em・rem・ptなどは数値の後に省略記法をつかいます。
ショートハンドは-をつなげることでそれぞれの値に展開されます。
他の人の関連記事と比較してみると、やや省略の仕方がそれぞれ違うかもしれませんが、Emmetが緩やかに拾ってくれます。
私がEmmetを始めたころは、とにかく展開してみて、違っていたら数値の前に:をつけて展開していました。
+を使った展開
ショートハンドの中にはよく使うものということで、以下のように省略記法の次に+を入力するだけで値が展開されるものもあります。
1 2 3 4 | bg+ => background: #fff url() 0 0 no-repeat; f+ => font: 1em Arial,sans-serif; bd+ => border: 1px solid #000; bdt+ => border-top: 1px solid #000; |
ベンダープレフィックスに対応
CSSで各WEBブラウザメーカーが独自に実装した、まだ標準化されていない仕様（拡張機能）を記述するためにプロパティの前につけるベンダープレフィックスにもEmmetは対応しています。
2017年現在、だんだんと必要なプロパティが減ってきているベンダープレフィックスですが、それでも全くつけなくていいのかというとそうでもないのが悩ましいところですね。
というわけで、2017年3月現在で接頭辞が必要なプロパティを挙げておきます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | bgi:lg(to right, #fff, #000) <!-- 以下展開 --> background-image: -webkit-linear-gradient(left, #fff, #000); background-image: -o-linear-gradient(left, #fff, #000); background-image: linear-gradient(to right, #fff, #000); anim <!-- 以下展開 --> -webkit-animation: ; -o-animation: ; animation: ; trf <!-- 以下展開 --> -webkit-transform: ; -ms-transform: ; -o-transform: ; transform: ; |
radial-gradient()もベンダープレフィックスが必要なのですが、BracketsもSublimeText2も展開できませんでしたね…比較的新しいプロパティなので、暫く待てばbgi:rgのような感じで展開できるでしょう…
Flexboxもベンダープレフィックスなしですね…なのにエディタによってはまだ接頭辞がつきます。
いちいちCan I useを見ながらというのは少し手間ですし…
Emmetの拡張機能ないしプラグインはこまめにアップデートをかけておきたいですね。
ざっくりとですが、CSSでのEmmetの使い方は以上です。意外と簡単でしたか？それとも難しかったでしょうか…いずれにしてもコードヒントを入れていた人にはその延長線上にEmmetがあるということがわかってもらえると嬉しいです。
コードヒントがなく、手打ちでやっていた人はこれからコードヒントとEmmetでバリバリとコーディングしていきましょう！
また、「あれ？これどう書くんだっけ？」となった時には公式のチートシートをご参考に。
この他にもコメントの挿入やEmmetのスニペット（ひな形）の作成や設定の編集などもできますので、興味のある方は調べてみてくださいね。ねこま（@necomacustom）でした。