CSS PR

web制作で爆速コーディング!コーディングの速度を上げる「Emmet」を覚えよう!

記事内に商品プロモーションを含む場合があります

爆速でコーディングできる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で書けるのでいろいろ調べてみてください!

 

 

これで高速コーディングだ!!

ABOUT ME
シラツキ
Web制作会社で働くフロントエンドエンジニア(コーダー)。 ココナラでもお仕事募集しております。 HTML,CSS,JS,WordPress,EC-CUBE,Next.jsなど制作に役立つ情報を発信していきます。 webサイトの運営、修正、制作などお仕事も募集中! お気軽にご相談ください。