Emmet使ったコーディングで調子こく!

Dreadweaver CCでコーディングしてたら、チュートリアル的なやつが出てきて、私の知らないコーディング方法を教えてくれた。

その名も「Emmet」!

主要なIDEにインストール可能なコーディング時間短縮が目的のプラグインらしい。

HTMLのコーディング中に、以下のように入力して、

ul>li.item$*2

「Tab」キーを押すと、

<ul>
  <li class="item1"></li>
  <li class="item2"></li>
</ul>

となる。

ショートコード(チートコード)を書いてTabキーを押すと、一気にHTMLタグが生成されるというわけだ。

イキってる人

なるほど、これは『オレ、パソコン詳しい』な人が必要ないのにわざわざコマンドプロンプトで操作するみたいな調子こいた使い方が出来そうだ!

使い方もっと詳しく

というわけで、バリバリ使えるようになるように使い方をちょっとまとめてみた。

> : 親要素の下に子要素を書く

ショートコード
div>ul>li
結果
<div>
  <ul>
    <li></li>
  </ul>
</div>

. # : クラスやIDを書く

ショートコード
div#abc>ul.def>li
結果
<div id="abc">
  <ul class="def">
    <li></li>
  </ul>
</div>

*x : x回繰り返し書く

ショートコード
ul>li*3
結果
<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

$ : 連番を振る

ショートコード
ul>li.item$*3
結果
<ul>
  <li class="item1"></li>
  <li class="item2"></li>
  <li class="item3"></li>
</ul>

$$と2つ書くと、01、02のように2桁の連番になる。

{} : 内容テキストを書く

ショートコード
p{テキスト}
結果
<p>テキスト</p>

[属性=値] : 属性と値を書く

ショートコード
a[href=#]
結果
<a href="#"></a>

+ : 続けて書く

ショートコード
ul>li.abc+li.def
結果
<ul>
  <li class="abc"></li>
  <li class="def"></li>
</ul>

() : グループ化する

ショートコード
ul>(li.abc+li.def)*2+li.ghi
結果
<ul>
  <li class="abc"></li>
  <li class="def"></li>
  <li class="abc"></li>
  <li class="def"></li>
  <li class="ghi"></li>
</ul>

^ : 1階層上に戻る

ショートコード
div>ul>li^p>a^^p
結果
<div>
  <ul>
    <li></li>
  </ul>
  <p><a href=""></a></p>
</div>
<p></p>

ひとまずこんなところか。

他のショートコード(チートコード)は、以下のリンクを参照。
Emmet チートシート(http://docs.emmet.io/cheat-sheet/)

新人コーダーの前でEmmet使ってタララッと華麗にコーディングして「何ソレ!先輩カッコいい~!」とか言われたい人は覚えるべし。

投稿者: Output48

中学生の時に初めてHTMLに触れてからホームページ制作を独学で始める。 ベンチャー企業の営業、大手企業のSEを経て、独立。 ここ数年はWEB以外の仕事をしていたため、割と本気で勉強中。

コメントを残す

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