デザイナーの山本です。

入社２年目に突入した私。仕事に大分慣れてきて、最近はいかに仕事の効率を上げていこうか模索しているところです。

特にコーディングは、ソースを組む量がたくさんなので、真面目に打ってしまうと、工数だけが積み重なるばかり。
Dreamweaverはある程度タイプすれば予測機能でプロパティ名が出てくれますが、他の部分でももっと早くできないか・・・

そこで、ソースを打つ手間をぐっと少なくしてくれるものがありました！
「Emmet」というプラグインです。
ある程度コーディングに慣れている方なら、使ってみると、あまりのスピードにびっくりしてしまうかもです。

１）Emmetは打つ手間が減る！

例えば・・・

＜div class=“box”＞＜/div＞
と打ちたいときは、
————————–
.box
→ command＋e（ショートカットキー）
————————–
だけでOKです！
「.」はクラス、その後の単語がクラス名を表しています。
「command＋e」をすることで、通常のソースの書き方に変換してくれます。
※windowsの方はcommandの代わりにctrlを押してください。

さらにさらに、

例えば幅を指定するとき、
width: 50px は
————————–
w50
→command＋e
————————–
でよいのです。
wはもちろんwidthの頭文字、pxは省略できます。

見てのとおり、打つ内容が随分と短縮されているので、Emmet用の短縮コードを覚えさえすれば素早くコードを組めるのが特長です。

Emmetを導入して以来、HTMLを組む速度が格段にスピードアップしました。なんだか真面目に手打ちしていた時間が惜しい気がします！笑

よく使うEmmetコードは以下にまとめました。
□“#” → id
□”. “ → class
□“ul>li*2″
↓
＜ul＞
＜li＞＜/li＞
＜li＞＜/li＞
＜/ul＞
*の後ろに子要素の数を入れます。この場合＜li＞が2つ欲しかったので*2と記入
□“w20”→width:20px;
□“a” → ＜a href=“”＞＜/a＞

まだ他にもたくさんあるのですが、下のリンクをご覧いただくと、本当にたくさんであることがお分かりになるかと思います。
Emmetコード一覧表
すこしずつ、よく使うものから取り入れてみましょう。

２）Emmetを導入しよう
今回は「Adobeのソフトをお持ちの方」及び「Dreamweaverをお持ちの方」限定になるのですが、説明していこうと思います。

１. まずはEmmetのサイトからダウンロードします。この場合、「Dreamweaver」のアイコンがあるものをクリック。

２. それが終わったらダウンロードファイルをクリック。
すると「Adobe Extension Manager」が立ち上がります。
Adobe ExtensionかDreamweaverいずれかが最新の状態にしておかないとエラーが出るので、アップデートを忘れずに。

3.左の製品名「Dreamweaver」をクリックして、「Emmet」が表示されれば、インストール成功！

最初はソースを覚えること自体時間がかかってしまいますが、一度覚えてしまえばこちらのものです！
Emmetをマスターして、コーディングを早くしてみてはいかがでしょうか？