コーディングが早くなるEmmetの使い方!

Web制作

Keitaです。今回は今まで上げていなかったEmmetの使い方について書いていきたいと思います。
これを使うと、コーディングの速度は150%上がります。(ちょっと大げさですが騙されたつもりで読んでください)

Emmetとは?

HTML,CSSを省略して書けるコマンドのようなもので、コマンドを入れTabキーを押すと、
HTML、CSSに展開されるツールです。昔はZen-Cordingと呼ばれていました。

どうやって使うの?

毎度おなじみVSCodeに機能として入っています。エディタで操作できます。

HTMLの使い方

<div class="hoge">

</div>

このソースコードの場合

.hoge

これを入力しtabキーを押すと上記のHTMLに展開していきます。

基本、セレクタの構造を直感的に入力できるので、CSSのセレクタ構造の勉強にもなります。

ちょっと発展

<div id="hoge" class="fuga">
  <div class="fuga-inner">
   <p>
   </p>
 </div>
</div>

ちょっと複雑になりましたね。この場合

#hoge.fuga>fuga-inner>p

この1行で展開できます。

リストは?
<div class="hoge">
   <ul>
     <li></li>
     <li></li>
     <li></li>
   </ul>
</div>

このリストはliが3つありますね。この場合

.hoge>ul>(li*3)

同じもが複数ある場合、括弧閉じして *個数 で、展開できます。

同一階層を並べたい場合

<div class="hoge">
  <div class="hoge-cont">
    <div class="hoge-cont__image">
    
    </div>
  </div>
   <div class="hoge-cont">
    <div class="hoge-cont__image">
    
    </div>
  </div>
  <div class="hoge-btn">
   
  </div>
</div>

hoge-contが2つ並んでますね。Emmetでどうなるのか見てみましょう。

.hoge>(.hoge-cont>.hoge-cont__image)*2+.hoge-btn

スッキリしますね。1行で10行分のHTMLが展開されます。

同じクラスを展開する場合個数、同一階層の場合「+」を使います。

HTMLは一からタグうちする必要がなくなる

個人的な所感ですが、CSSの設計ができている場合そんなにHTMLのコーディングに時間をかけたくないものです。Emmetを使えば、サイトの規模によっては半分以上の時間が削減されるため結果、短納期の仕事でクオリティの高いものが作れるようになります。

CSS編

こちらも、コマンドでできます。HTMLよりも短いコマンドでできます。
こちらはまとめます。

まとめ

  • width→w
  • height→h
  • margin→m
  • padding→pd
  • margin: 0 auto→m-0a
  • color→c
  • color:#fff→c#fff
Emmetでマークアップを効率化しよう(CSS編)
.blog article table em{padding:0;}こんにちは、めぐたんです。今回もコーディングの効率アップに欠かせないプラグイン「Emmet」の使い方をご紹介します。HTMLに引き続き、CSSの入力も効率化してみましょう!...

こちらのページに詳細なチートシートが書かれてますので、参考にしてみてはいかがでしょうか?

いつから使っていたんですか?

2年半前から使っています。その前はHTMLCSSの基礎を学ぶのに必死でしたが、
こちらを使ってから早くなりましたし、クオリティ向上の施策をしてからはもっと早くなりました。

VSCodeを使っていない場合は?

Emmet — the essential toolkit for web-developers
Download

こちらから、各エディタ用のEmmetのモジュールがダウンロードできますので、インストールしてみてください。

Dreamweaver

Dreamweaver CC 2019 に Emmet をインストール | Web Design Leaves

sublimetext

https://uchilog.org/study/coding/emmet/

atom

Atom+Emmetで爆速なHTML,CSSコーディング環境を入手する
記事をご覧のみなさんは「Emmet」というコーディング手法をご存知でしょうか? EmmetとはHTML/CSS/XMLなどを入力補完機能により簡略化し...

Brackets

一般的によく使われているテキストエディタでのEmmetの設定方法まとめ
Web業界でよく使われている下記のテキストエディタでの、Emmetの使用方法や、カスタマイズ場所をまとめておきます。 Visual Studio Codee Atom Brackets Sublime

Bracketsの場合拡張機能からインストールできます。

まとめ

すぐにできてなおかつ量の多い作業は、出来るだけ作業を短くして、アニメーションだったり、jsだったり時間のかかる部分の作業を確保できるようにこういったツールを使うのは重要です。
また簡単なサイトだったらサクッと終わらせ、次の仕事にバトンタッチしていけば仕事もうまく回ってくるでしょう。

コメント

タイトルとURLをコピーしました