HTML、CSSでのコーディングをする際、
・長々とコードを入力するのは面倒‥
・知らぬ間にスペルミスが発生してしまってエラーが起きてしまう‥
そんな悩みを解決するのがEmmetです！
EmmetはVS CodeやDreamweaver、Atomといったエディタで使用できる、HTMLやCSSを短く、早く入力できるツールです。
通常のコードだと、box-sizing:border-boxとながーいコードもEmmetを使えば、bxz:bbと入力するだけでOKです。
今回は私が使用しているVS CodeでEmmetの使い方を勉強していきましょう。
VS Codeについて
VS Codeは正式名称がVisual Studio Codeで、Microsoftが提供している無料のエディタです。
数あるエディタの中でもVS Codeの使用率が一番高いと言われています。
Emmetの使い方
作成したHTMLファイルに！と入力します。
Emmet Abbreviという箇所をクリックするか、キーボードのTabキーをクリックしましょう。
個人的にカーソルを移動させる時間が無駄なのでTabキーを押すのが素早くておすすめです。
Tabキーを押すと‥
なんと一発でHTMLの雛形(DOCTYPE)、html、head、bodyタグが展開されました。
これだけの宣言文を自力で入力するのも良いのですが、時間がもったいなく感じますのでEmmetでの展開がおすすめです。
HTMLでの応用例
タグの展開
divタグだけではなく、h1、img、navなど全てのタグがこの方法で展開できます。
タグにclassを付ける
タグにclassを付ける時は『タグ + . class名』で展開できます。
タグにはclassの他にidを使用することもありますが、idの場合は . ではなく # を入力します。
複数のタグを展開
*は掛け算の記号なので*3でimgタグが3つ展開されます。
親タグと子タグを同時に展開
id名containerのdivタグの子にimgタグを3つ展開しました。
子タグを展開する時は親と子の間に>を挟んであげます。
テキストを入力
テキストを{ }で囲うことで展開できます。
ちなみに要素の間に+を入力すると並列で展開することができます。
並列は+ 、 子要素にする時は>なのでお間違いなく。
CSSでの応用例
今回は一気に紹介したいのでまとめて記載しましたが、本来は1つのCSSに対して1回ずつTabキーを押してください。
もっと深く知りたい方へ
今回の紹介は以上です。
Emmetにはたくさんの機能があるので、もっと詳しく学びたい方は下記サイトがおすすめです。
https://docs.emmet.io/cheat-sheet/
