はじめに
HTML/CSSのコードをサクサク書きたいと思ったことはありますか？
HTMLやCSSのコーディングでは、何度も同じタグやプロパティを書く必要があります。最近のエディターであれば、オートコンプリートで補完してくれますが、それでも面倒な作業には違いありません。ネストが深くなるとなおさらでしょう。できればもっと楽にコーディングしたいですよね。今回紹介する「Emmet」は、そういった面倒な作業から開放してくれます。
この記事では、HTMLやCSSを効率よくコーディングしたいエンジニアの方のために、Emmetを使ったHTML/CSSの書き方と対応エディター・サービスについてお伝えしていきます。ぜひご一読して、さらに素早くコーディングできるようになりましょう。
Emmetってどんなもの？
Emmet公式サイト：http://emmet.io/
Emmetは、以前Zen-Codingと呼ばれていた、HTMLやCSSを省略記法で簡潔に記述するためのツールです。特定のソフトウェアというわけではなく、Emmetの記法をサポートするための特定エディター向けのプラグインとして提供されています。もしくは、エディター自体がEmmetを標準でサポートしている場合もあります。タイプ数をかなり削減できるため、省略記法を習得すればコーディング時間を削減できることでしょう。
それでは、次項から書き方について説明していきます。
Emmetを使って書くときの流れ
Emmetでは、省略記法で記述した後、ショートカットキーを使ってコードを「展開」します。展開とは、省略記法から通常のHTMLやCSSに変換することです。なお、ショートカットキーはエディターによって異なります。各プラグインやエディターのドキュメントを参照してください。
HTMLでの書き方
一つの要素だけ（要素名）
単純に要素名だけを書けばタグに展開できます。
展開前 div
展開後 <div></div>
ネストした要素（>）
要素をネストさせるには間に「>」を挟んでやります。
展開前 div>a
展開後 <div><a href=""></a></div>
※タグによってはデフォルトの属性が展開されます。
同じ要素を繰り返す（*）
「*」に続けて数字を入力すると、その数だけ要素が繰り返されます。
展開前 div*3
展開後 <div></div> <div></div> <div></div>
繰り返す要素でネストする
もちろん、ここまでに紹介した記法は組み合わせることもできます。
展開前 div*3>a
展開後 <div><a href=""></a></div> <div><a href=""></a></div> <div><a href=""></a></div>
兄弟要素にする（+）
兄弟要素にするには「+」でつなげてやります。
展開前 h1+p
展開後 <h1></h1> <p></p>
ひとつ上の要素に戻る（^）
続けて入力する際に、ひとつ上の階層に戻りたいこともあります。そんなときは「^」を使います。
展開前 div>h1+p^ul>li*3
展開後
<div>
<h1></h1>
<p></p>
</div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
グループ化する（()）
「()」でグループ化すると、複数の要素をまとめることができます。
展開前 (div>h1+p)+(ul>li)*3
展開後
<div>
<h1></h1>
<p></p>
</div>
<ul>
<li></li>
</ul>
<ul>
<li></li>
</ul>
<ul>
<li></li>
</ul>
要素にIDを付ける（#）
「#」に続けてIDを入力すると、要素にIDを付けることができます。
展開前 div#content
展開後 <div id="content"></div>
要素にクラスを付ける（.）
「.」に続けてクラス名を入力すると、要素にクラスを付けることができます。「.」でつなげていけば、複数のクラス名を付けることもできます。
展開前 div.content.body
展開後 <div class="content body"></div>
連番を付ける（$）
クラス名などで連番を指定したいときは、「$」を使うと連番を振ることができます。
展開前 div.item-$*3
展開後 <div class="item-1"></div> <div class="item-2"></div> <div class="item-3"></div>
要素に属性をつける（[]）
IDやクラス以外の属性を使いたい場合は、「[]」内に属性を入力します。
展開前 img[title="sample" alt="image"]
展開後 <img src="" alt="image" title="sample">
要素にテキストを入れる（{}）
要素にテキストを入れたい場合は、「{}」を使います。
展開前
a{リンク}
展開後 <a href="">リンク</a>
CSSでの書き方
プロパティ
CSSの記法はちょっと癖があります。プロパティと値の頭文字をつなげていくような形ですね。慣れないとちょっと使いづらいですが、かなりタイプ数を削減できます。
展開前 w100+h200+m10-0-10-10+tac
展開後 width: 100px; height: 200px; margin: 10px 0 10px 10px; text-align: center;
単位
数値に単位を指定しないとデフォルトで「px」が指定されます。明示的な単位を指定すると他の単位にできます。
展開前 w200+h100p+m10e+p10r
展開後 width: 200px; height: 100%; margin: 10em; padding: 10rem;
ベンダープレフィックス
ベンダープレフィックスにもしっかり対応しています。同じようなプロパティを書かなくていいのでかなり楽になりますね。
展開前 -bx
展開後 -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
対応エディター・サービス
Emmetは、下記のようにたくさんのエディターによってサポートされています。
ダウンロードページ：http://emmet.io/download/
この一覧になくても対応している場合もあります。たとえば、Visual Studioでは、「Web Essentials」という拡張機能がサポートしています。ご自分の使っているエディターでサポートされていないか確認してみてください。
まとめ
どうでしたか？Emmetを使えば、コーディングがはかどることがお分かりいただけたでしょうか。主要なエディターはほとんど対応していますので、おそらくあなたが普段お使いのエディターでもプラグイン（もしくは標準）で対応していることでしょう。もし、対応していなかったら、これを機にエディターを乗り換えてみてはいかがでしょうか？きっとコーディング速度がアップしますよ。事前にちょっと試してみたい方は、公式サイトにオンラインエディターがあります。どれぐらい楽になるか体験してみるとよいでしょう。あなたはEmmetを使いますか？
本ブログは、Git / Subversionのクラウド型ホスティングサービス「tracpath(トラックパス)」を提供している株式会社オープングルーヴが運営しています。
エンタープライズ向け Git / Subversion 導入や DevOps による開発の効率化を検討している法人様必見！
「tracpath(トラックパス)」は、企業内の情報システム部門や、ソフトウェア開発・アプリケーション開発チームに対して、開発の効率化を支援し、品質向上を実現します。
さらに、システム運用の効率化・自動化支援サービスも提供しています。
”つくる情熱を支えるサービス”を提供し、まるで専属のインフラエンジニアのように、あなたのチームを支えていきます。
[…] Emmetの構文は他にもまだまだあるので、興味がある方はこちらの記事をどうぞ！ […]