Emmetで爆速コーディング【HTML編】
「ショートカットは聞いたことがあるけど、Emmetって何？」と思う人もいるかもしれません。
Emmetは、例えばpと記述してtabキーを押すと、<p></p>というコードが生成されるというかなり便利な機能です。
知らずに使っていた、、、という人もいるのではないでしょうか？
Emmetを駆使することで、タイプ数が減り、入力ミスも減らせるので、コーディングのスピードは格段に上がります。
INDEX
Emmetとは？
Emmetは、もともとZen-Codingと呼ばれていたもので、HTMLやCSSを省略記法を使って簡潔に記述するするためのプラグインです。
今回は初期設定の状態でEmmetを使用することができる「Visual Studio Code」を使用している前提でご紹介させていただきますが、プラグインを入れることでSubline TextやAtom、Dreamweaverなどのテキストエディタでも、同じように使用することが可能です！
※「Visual Studio Code」を使いたいけど、まだインストールしていないという方は、以下記事を参考にインストール&設定してみてくださいね！
■【ゼロから簡単！】Visual Studio Codeインストールと使い方［Windows向け］
■【作業効率UP！】VSCodeでコーディングを始める前に必ず入れておきたいおすすめ拡張機能
Emmetの基本的な使い方
基本的には要素＋Tabで、省略した要素をきちんとHTMLの形に変換（以後「展開」という）することができます。
例えば以下のようにh1、sectionなどの要素を入力した後に、tabキーを押すことでHTMLタグが展開されます。
img、a、linkなどは、最低限の属性も出力してくれるので、タイピング数を大幅にカットすることが可能です！
「!」HTMLのひな形を出力する
「!」を入力した後にtabキーを入力すると、HTMLのひな形を出力することができます。
展開前
展開後
「.」クラスをつける
「要素.任意の名前」でTabキーを押して展開すると、要素にクラスをつけて出力できます。
展開前
展開後
「#」idをつける
「要素#任意の名前」でTabキーを押して展開すると、要素にidをつけて出力できます。
展開前
展開後
「+」兄弟要素にする
「要素＋要素」をtabキーで展開すると、＋で繋がれた要素が同階層に出力されます。
展開前
展開後
「>」ネストさせる
「要素>要素」をtabキーで展開すると、入れ子構造にすることができます。
展開前
展開後
「*数字」同じ要素を繰り返す
「要素*数字」をtabキーで展開すると、数字の数だけ要素を複製することができます。
展開前
展開後
「$」連番をつける
「$」を使用することでクラス名に連番を振ることができます。
展開前
展開後
「{}」テキストを入れる
「{}」を使うと要素にテキストを入れることができます。
展開前
展開後
「[]」属性をつける
「[]」を使うと要素に属性を指定することができます。
展開前
展開後
「()」グループ化する
「()」を使うと要素を１つのグループとしてまとめることができます。
展開前
展開後
「^」1つ上の階層に戻る
「^」を使うと1つ上の階層に戻ることができます。
展開前
展開後
まとめ
今回は、HTMLのEmmetについてご紹介しました。
私自身も、今回ご紹介したEmmetを全て使いこなせているわけではなく、正直使用したことのないものもあります。
でも、いつもタイピングしているところを１つでも、２つでもEmmetに置き換えて、地道に工夫を繰り返すことで、もっと早く、もっとスマートにコーディングができるようになると思い、日々努力を重ねています。
ぜひ、みなさんもEmmetを使いこなして、コーディングのスピードアップを目指してみてください！
最後まで読んでいただき、ありがとうございました！
また弊社では、一緒にWEB業界を盛り上げてくれるメンバーを募集中です！
デザインやWEB制作に興味がある方は、ぜひエントリーページからご応募ください。