高速コーディング「Emmet」を覚えよう！【HTMLコーダー・WEBデザイナー】

2017/10/15 効率化

Contents

1 Emmetを使おう

Emmetを使おう

Emmetをご存じですか？
ある程度コーディングができるようになってきたら次はスピードを付けたいと思っている方はぜひとも覚えるのをオススメする「Emmet」！
と言いつつ私も存在と名前は知っていますが、そんなガチガチに使っているわけではありません。

上文の通り「ある程度コーディングができるようになってきた」の人の結城だからです。

では、「Emmet」はなんぞやってところから一緒に勉強していきましょう！(≧∇≦)/

「Emmet」とは

HTMLやCSSの記述・編集をサポートするプラグインです。
要するに、普段書いてるコードを短く効率的に書けるようになる優れものです！

「Emmet」の導入

各エディタに無料配布されています。

私はプライベートではSublimeText3、会社ではDreamweaverCCを使っています。

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を押すと！

&lt;nav&gt;
&lt;ul id="menu"&gt;
&lt;li&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/nav&gt;

一瞬でこんな感じ！
コピペとか一個ずつliを書く必要なし！
ね？簡単で便利でしょ？（（

ただ私もまだこれから使い始めるぐらいの初心者なのでまだまだ知らないことがありそうです。
どう書けばどう展開するかはこちらでまとめられています。
さらにHTMLだけでなくCSSもEmmetで書けるのでいろいろ調べてみてください！

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