よく使うEmmetをまとめました

Emmetとは

公式サイト

Emmetとは様々なテキストエディタで使用できるコードの補完機能です。
HTMLとCSSを入力する際に使えてコーディングの効率が上がります。
また、補完機能がコードを入力してくれるのでタイプミスがなくなるのでタイプミスのせいで表示くずれたり、なぜかCSSが反映されないといったことがなくなります。

よく使うEmmet【HTML】

まずはHTMLを書く際に使用頻度の高いEmmetを紹介します。

クラス名を付ける

.を使うとタグにクラスを付けられます。
例えば

  
    a.link
  

と入力すると

  
    <a href="" class="link"></a>
  

が変換されます。

クラス名を付けることは頻繁にあるのでこちらのEmmetが一番使用します。

クラスを複数つけたい場合は.で区切ります。

  
    a.link.link-1
  

ちなみに.の前に何もつけずに入力すると

  
    .box
  

クラスがついたdivタグが出力されます。

  
    <div class="box"></div>
  

ID名を付ける

ID名を付けるには#を使用します。書き方はclassの時と同様にタグ名のあとに#を入れてID名を指定します。

  
    h2#anchor
  

を入力すると

  
    <h2 id="anchor"></h2>
  

このように変換されます。

入れ子構造にする

入れ子構造を作りたいときには>を使用します。

  
    ul>li>a
  

と入力すると

  
    <ul>
      <li><a href=""></a></li>
    </ul>
  

このようになります。入れ子構造はHTMLを書くときによく出てくるのでこの書き方は覚えておいて損はないです。

よく使うEmmet【CSS】

これから紹介するものはクラスなどを指定した{}の中で機能します。

プロパティ全般

例えばmargin-leftを入力したいときにはEmmetを使うとmlを入力するだけで変換してくれます。その際に数字を入れるとpxを自動で入力してくれます。

下記のようにml100を入力すると

  
    .class {
      ml100
    }
  

下記に変換されます。

  
    .class {
      margin-left: 100px;
    }
  

数字を複数選択したい場合は:を使って

  
    .class {
      m10:20
    }
  

このように書きます。

  
    .class {
      margin: 10px 20px;
    }
  

また数字の後にアルファベットを使うと単位を入力することもできます。

  
    .class {
      ml1e
    }
  

下記に変換されます。

  
    .class {
      margin-left: 1em;
    }
  

代表的なものは以下の３つです。

• e→em
• r→rem
• p→%

まとめ

Emmetを使うことでコーディングのスピードが速くなるだけではなく、ミスも減らせるのでhtml,cssをコーディングする際には是非使ってみてください。