Windows など Mac 以外をお使いの方、OS X keymaps ではない方は、先に Aboutページ をご確認下さい。


Emmet ( Zen Coding ) を使用して html タグ入力を素早く行う

このエントリーをはてなブックマークに追加
  • 2013-09-15
  • 1051 view

Emmet

Emmet ( Zen Coding )

HTMLを高速に入力できるような仕組みです。

Emmet の旧称が Zen-Coding です。まだまだ Zen-Coding で検索したほうが、情報が見つかります。

PhpStorm の設定

ここで Emmet を有効化・無効化できます。デフォルトで有効になっています。

  • Preferences - Emmet (Zen Coding)
    • Enable Emmet

タグを展開するキーです。デフォルトは Tab キーになっています。

  • Preferences - Emmet (Zen Coding)
    • Expand abbreviation with

使用方法

エディタで ti.title のように Emmet 用の入力を行い、展開キー(デフォルトはタブキー)を押すだけです。 素早く入力するだけでなく、tableタグなどは中身を余り考えずに入力できで便利です。

html はそこまで書かないので画像で使用している8個くらいしか覚えていませんが、かなり効率が変わります。 デフォルトで使えるようになっていいるので、ぜひ簡単なものから使って慣れてみましょう。

  • html:5
  • h1.title
  • .container
  • #main
  • #main.container
  • ul+
  • table+
  • a

Emmet をもっと使う

一気に複数タグを記入したり、タグの繰り返し回数を指定したりと、他にもいろいろあって非常に強力です。 どんな入力方法があるかチートシートを見てみて下さい。



comments powered by Disqus
一覧にもどる