Emmetさんで爆速コーディンが気持ちいい!

コメットさんは魔法で困りごとを解決してくれますが(古くてごめん)、DreamweaverのCC2014辺りから使用可能だったか記憶が微妙なEmmet(エメット)さんと言う、ツールを使わずに手打ちでコーディングする際の便利な機能が追加されています。この機能は書きたいコードをhtmlとは別の表記でササッと書いて、tabキーを押すとちゃんとしたコードが魔法の様にパッと出来ちゃう優れもの。

最初はちょっと悩むけど、慣れてくると超便利っていうか超気持ちいい!

例えば以下の様に書いて

書いたコードの右にカーソルを移動して(これ大事)tabキーを押すと、

<nav id=”mainnav”>
<ul>
<li id=”bt1″><a href=””>menu1</a></li>
<li id=”bt2″><a href=””>menu2</a></li>
<li id=”bt3″><a href=””>menu3</a></li>
<li id=”bt4″><a href=””>menu4</a></li>
<li id=”bt5″><a href=””>menu5</a></li>
</ul>
</nav>

なんということでしょう!こんな素敵なhtmlコードに変換されます。

簡単なところでいうと

h1と書いてtabキーを押すと<h1></h1>となります。
ul>liでは<ul><li></li></ul>
liが5ついるんだよねって場合は
ul>li*5で
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

「>」が付くことで、子要素として次の要素が入ります。
階層を上にしたければ「^」でOK。

って感じ。もう流石にメモ帳には戻れなくなりそうです。

にほんブログ村 IT技術ブログへ にほんブログ村 IT技術ブログ WordPressへ にほんブログ村 IT技術ブログ Webサイト構築へ

投稿者: おーあえ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください