爆速でコーディングできるEmmetを使いこなそう！
HTML、CSSのコーディング速度を上げるには、Emmetを覚えることはもはや必須！
他にも、ショートカットを覚えることでさらなるスピードアップが可能なので、「Webデザイナー・コーダーなら覚えておきたいショートカットを紹介！作業効率アップ！」も確認してみましょう。
ここでは、Emmetについて説明していきます。
web制作で爆速コーディング！Emmetを使いこなそう！
ある程度HTML、CSSのを覚えたら次はコーディングスピードアップ！
コーダーはデザインどおりに、早く上げることを求められることが非常に多いです。
HTMLとCSSはある程度使えるようになった！もっとコーディングスピードを上げたいという方「Emmet」を使ってみよう！
では、「Emmet」はなんぞやってところから一緒に勉強していきましょう！
「Emmet」とは
HTMLやCSSの記述・編集をサポートしてくれるものです。
要するに、普段書いてるコードを短く効率的に書けるようになる優れものです！
コーダーに人気のあるテキストエディタVSCodeではデフォルトで使えます。
「Emmet」の導入
各エディタに無料配布されています。
私はプライベートではSublimeText3、会社ではDreamweaverCCを使っています。
※2022年12月現在はVSCode
SublimeTextでの導入は、
「Ctrl+Shift+P」→「Install Package」→「Emmet」
だけ！
↑でなにそれとなった方は『サイトコーディングにオススメのテキストエディタ『Sublime Text3』』でプラグイン導入方法を書いてます。
ほかのエディタを使っている方はググってみてください！
大体のエディタで対応していると思います。
「Emmet」の使い方
OSやエディタで違う場合がありますが、
windows:Ctrl+E,Tab
Mac:command+E,Tab
で展開されるはずです。
もし展開されない場合、ぐぐってみてください。
試しに使ってみます。
nav>ul#menu>li*3>a[href=#]
と入力し、command+Eを押すと！
<nav> <ul id="menu"> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul> </nav>
一瞬でこんな感じ！
コピペとか一個ずつliを書く必要なし！
ね？簡単で便利でしょ？（（
ただ私もまだこれから使い始めるぐらいの初心者なのでまだまだ知らないことがありそうです。
どう書けばどう展開するかはこちらでまとめられています。
さらにHTMLだけでなくCSSもEmmetで書けるのでいろいろ調べてみてください！
これで高速コーディングだ！！
