HTMLコーディングが確実に早くなるぞ!!2016年1月23日Emmetのススメ。HTMLコーディングが確実に早くなるぞ!!HTML・CSSWeb制作の基本はHTMLコーディングですが、実は一番HTMLを書くのが一番面倒だったりします。タグを書いて閉じタグ書くのもまあまあな手間ですよね。2では閉じタグの補完がないので困っていました。これでは作業効率が上がらない・・コーディングが遅いと思われてしまうじゃないか!!と思ったときに、「なんかそういう為の拡張機能あったな。」とふと思い、ググって使ってみることにしました。それは、Emmet(エメット)というプラグインです。web-developersEmmetは、主にHTMLやCSSの記述をサポートする色々なエディタで使用することができるプラグインです。短くタグを記述し、ショートカットで変換するという機能を備えています。前は「Zen-Coding」という名だったみたいです。Expanderというものがありますが、それと使用感は同じようなものだと思います。<title>Document</title></head><body></body></html>一瞬でHTML5のテンプレートを用意することができます。※ショートカットはctrl+E(Macはcmd+E)が基本ですが、エディタにもよるので要確認。タグ編div変換すると・・<div></div>なんと、タグ一式に変換してくれるんです!!article、sectionはもちろん、pやインライン要素のspan、smallなど、なんでも変換してくれます。class="class"></div>のようにクラスもつけて変換してくれるんです!!これを使ってみたときは「早く使えばよかった。.mainとすれば、mainクラスがついたdivに変換してくれます。span.blueと指定すれば他のタグにもクラスをつけることができます!階層をつけてみるsection>article<section><article></article></section>タグの階層がある構成のコーディングも超楽ちんに。タグ数を指定する例えば三つのリストを使う場面でEmmetを使ってみるとします。SheetEmmetのチートシートが用意されているので学習することができます。多すぎるので気が向いたときに覚えればいいと思います(笑)CSSにEmmetを使うEmmetはCSSにも使用できます。dposcこれをひとつずつ変換すると、display:block;position:relative;color:#000;と、CSSもかなり楽をして書くことができてしまいます。現在、個人的に確認がとれたものだけを紹介します。Text2/3AtomCoda大体の場合はプラグインという形でインストールすることでEmmetを使用できるようになります。タダ!!!エディタにプラグインをインストールする機能があればダウンロードしてこなくても一発で使えると思います。まとめこういったプラグインは、知ってるけど「なんかめんどくさそうだからいいや。」状態の人は意外といるのではないでしょうか。それは大きな損失です。「Emmetだけはいれとけ。」そう言ってあげたいぐらい、素晴らしくコーディングが捗るWeb製作者にとっては神様のようなプラグインだと思いました。2に入れて使っています。コメントをキャンセルメールアドレスが公開されることはありません。2017年の新年の挨拶と、このブログのこと。Mitsutoshi。