「Emmetで快適爆速コーディングライフのすすめ」#Emmet#HTML#業務効率化こんにちは。それからデザイン入社1年目の長島です。日々、質の良いアウトプットをより効率的に作りたい!と試行錯誤の私が飛びついたのが「Emmet」です。「Emmet」はDreamweaverCC2017から搭載されており、その他のHTMLエディタでも簡単に導入できます。HTML/CSSの記述を素早く簡単に行うには、今や「Emmet」なしではもう生きていけない、とまで思っているほどです。一度導入してしまえば「Emmet」なしの環境にストレスを感じてしまうほど強力な時間短縮ツールになります。今回は、コーディングスピードを爆発的に上昇させる「Emmet」とは一体どういったものなのかを、よく使う例を交えてご紹介いたします。それでは早速、HTMLの例を見ていきましょう。このように、圧倒的にコーディングの手数を減らすことができるのです。それでは次に「Emmet」の基本的なルールをご説明します。(コーディング環境により異なります。次に挙げる基本的なルールを覚えてしまえば、すぐに「Emmet」の恩恵を受けることができます。1.タグの展開タグの名前を打って展開するだけで自動的に閉じタグまで付けてくれます。タグによっては必要な属性も自動的に処理され、長いタグは省略形も用意されています。alt="">sect/*展開*/<section></section>2.IDとclassを付ける「#」「.」をタグの次に入力すれば展開した時にIDやclassが付き、続けて文字を入力することでその名前のIDやclassを付けることもできます。class="test"></span>タグ名は省略し、ID、class名のみ入力すると自動的にdivにID、class名が付く優れた仕様です。id="wrapper"></div>3.入れ子の構造を作る「>」を使用すると次の要素を入れ子にすることができます。class="test"><p><span></span></p></div>4.兄弟の要素を作る同階層に要素を作る場合は「+」を使用します。class="box"><p></p><ul></ul></div>5.一階層上に要素を作る「^」を使用すると次に入力した要素を一階層上に作ることができます。「^」を二つ使用し、更に上の階層に作ることもできます。class="txt"></span></p></div><figure></figure>6.同じ要素を複数作る「*」を使用すると直前の要素を複数作ることができます。「p*3」とするとpを三つ、「ul>li*5」とするとulの中にliを五つ作ることができます。class="”item”"></li></ul>7.テキストを入れる「{}」を使用すると要素の中にテキストを入れることができます。class="”txt”"><p>こんにちは</p></div>8.連続した数字を入れる「$」を使用すると1から順番に数字を入れることができます。classの名前に番号を振って、複数つけたい時にとても重宝します。alt=""></figure></div>いかがでしたか。私も初めて使うときはワクワクと感動を覚え、瞬く間に虜になってしまいました。「Emmet」の導入はとても簡単です。あなたのコーディング環境に取り入れてみてくださいね。「Emmet」のチートシートです。