1. HOME
  2. WEB制作
WEB制作 公開

記事更新日

HTMLやCSSのコーディング効率を非常に高めてくれるemmet。
今回はEmmetの導入方法の解説をしたいと思います。

SublimeText2でEmmetはとりあえず最初に導入していたのですが、【結構難しいものなのかな?】と思い、全然使っていませんでした。

使っていなかった理由としては他にもあります。

・手打ちで十分早く打てる。
・手打ちでコードを打っておかないとスペルを忘れるかもしれない。
・記述を覚えるのが面倒。

こんな考えは見事に打ち砕かれました。

・Emmetを使ったほうが10倍は早くなる。
・略した記述なので逆に元のスペルが記憶に定着しやすくなる。
・記述を覚えるのもそれほど難しくない。

何事も使ってみることが大事!

そういう事なので、Emmetの使い方を一緒に覚えていきましょう。

Emmetが使えるテキストエディタ一覧

導入前に自分が使いたいエディタで使えるかどうか確認しておきましょう。

最新の対応状況はこちらのページでご確認を。

Emmetの導入

私のおススメは【sublimeText2】なので、こちらでの導入方法を書きます。
導入は1分くらいで終わります。

sublimeText2にPackage Controlをインストールする。

既にインストール済みであれば飛ばしてOK。

sublimeText2の上部メニューの【view】の中の【Show Console】をクリックする。

sublimeText2の下部に入力フォームが出来るので、そこに下記リンクのコードを入力しEnter。

Installation – Package Control

これでEmmetを導入する準備は出来ました。

Emmetのインストール

sublimeText2を開き、Ctrl+Shift+PでPackage Installを開く。
開いたらテキスト入力欄にinstallと入力する。
入力途中でも予測で出てきます。

packageのインストール

Enterを押したら、Packageの検索入力フォームに切り替わるので、Emmetと入力。こちらも予測で出てきます。

Emmet(ex-Zen Coding) for Sublime Textと出てきたらカーソルを合わせEnterでインストールされます。

これでEmmetを使う準備が整いました。