Emmetの導入方法 〜 SublimeTextでemmetを使って爆速コーディング(その1)

tool, WEB制作

SublimeTextでemmetを使って爆速コーディング 【全3回】 公開日
(その1)Emmetの導入方法 2014年5月21日
(その2)【HTML編】初心者向けEmmetの使い方 2014年5月21日
(その3)【CSS編】初心者向けEmmetの書き方 2014年6月3日

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

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

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

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

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

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

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

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

スポンサーリンク

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

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

下記の一覧は2014/5/20現在の対応状況です。

editer

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

Emmetの導入

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

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

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

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

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

Installation – Package Control

Installation - Package Control

packageinstall

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

Emmetのインストール

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

packageのインストール

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

emmet

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

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

SublimeTextでemmetを使って爆速コーディング 【全3回】 公開日
(その1)Emmetの導入方法 2014年5月21日
(その2)【HTML編】初心者向けEmmetの使い方 2014年5月21日
(その3)【CSS編】初心者向けEmmetの書き方 2014年6月3日

この記事が気に入ったら
『いいね』しよう!