Pocket

こんにちは。それからデザイン入社1年目の長島です。 日々、質の良いアウトプットをより効率的に作りたい!と試行錯誤の私が飛びついたのが「Emmet」です。

「Emmet」はDreamweaverCC2017から搭載されており、その他のHTMLエディタでも簡単に導入できます。
HTML/CSSの記述を素早く簡単に行うには、今や「Emmet」なしではもう生きていけない、とまで思っているほどです。

そして、一度導入してしまえば「Emmet」なしの環境にストレスを感じてしまうほど強力な時間短縮ツールになります。

今回は、コーディングスピードを爆発的に上昇させる「Emmet」とは一体どういったものなのかを、よく使う例を交えてご紹介いたします。

それでは早速、HTMLの例を見ていきましょう。


aタグ
gif_001

classを付けた複数のdiv
gif_002

複雑な構造の繰り返し
gif_003

このように、圧倒的にコーディングの手数を減らすことができるのです。

それでは次に「Emmet」の基本的なルールをご説明します。


「Emmet」の入力規則(HTML編)

「Emmet」の使い方は「Emmet」導入後、タグとルールに基づいた記号を打ち、「tabキー」や「command + E」を押すだけです。(コーディング環境により異なります。)

次に挙げる基本的なルールを覚えてしまえば、すぐに「Emmet」の恩恵を受けることができます。

1.タグの展開

タグの名前を打って展開するだけで自動的に閉じタグまで付けてくれます。
タグによっては必要な属性も自動的に処理され、長いタグは省略形も用意されています。

2.IDとclassを付ける

「#」「.」をタグの次に入力すれば展開した時にIDやclassが付き、続けて文字を入力することでその名前のIDやclassを付けることもできます。

タグ名は省略し、ID、class名のみ入力すると自動的にdivにID、class名が付く優れた仕様です。

3.入れ子の構造を作る

「>」を使用すると次の要素を入れ子にすることができます。

4.兄弟の要素を作る

同階層に要素を作る場合は「+」を使用します。

5.一階層上に要素を作る

「^」を使用すると次に入力した要素を一階層上に作ることができます。
「^」を二つ使用し、更に上の階層に作ることもできます。

6.同じ要素を複数作る

「*」を使用すると直前の要素を複数作ることができます。
例えば 「p*3」とするとpを三つ、「ul>li*5」とするとulの中にliを五つ作ることができます。

7.テキストを入れる

「{}」を使用すると要素の中にテキストを入れることができます。

8.連続した数字を入れる

「$」を使用すると1から順番に数字を入れることができます。
classの名前に番号を振って、複数つけたい時にとても重宝します。


いかがでしたか。
早くも試したくなってきたのでは?
私も初めて使うときはワクワクと感動を覚え、瞬く間に虜になってしまいました。
「Emmet」の導入はとても簡単です。ぜひあなたのコーディング環境に取り入れてみてくださいね。

最後に
「Emmet」のチートシートです。「Emmet」でできることのすべてがここでわかります!
https://docs.emmet.io/cheat-sheet/

 

スタッフ募集のお知らせ

株式会社それからデザインでは現在、エンジニア・プログラマー、デザイナー、ディレクターを募集しています。自社サービスやクライアント企業のブランディングに関わるモノづくりの現場であなたの経験を活かしてみませんか?
ご興味のある方は、下記より募集要項をご覧ください。

生きるように働く人の仕事探しサイト「日本仕事百貨」に、当社のSE・プログラマー募集の記事が掲載されました。是非ご覧ください。