Emmetを使って倍速にHTMLを書いてみよう!

2014/10/16

こんにちは。
今回は「Emmetを使って倍速にHTMLを書いてみよう!」です。

知っている人も多いと思いますが、Emmetを使うといつもより早くコーディングができるのでコーダーやWebデザイナーは一度試しに使ってみるといいと思います。

 

Emmetとは

EmmetとはZen-Codingの後釜でHTML/CSSを簡単に書く事ができるエディターのプラグインです。

 

公式サイト

emmet

http://www.emmet.io/

 

対応しているエディターは下記のページに載っていますので、ダウンロードするなりして導入して下さい。
SublimeTextはダウンロードするよりもInstall Packageからインストールする方が簡単です。

http://www.emmet.io/download/

 

基本的な使い方

基本的な使い方はCtrl+eで展開します。
自分はいつもTabキーを使って展開しています。
※エディター等の違いで違う場合もありますが、基本はCtrl+eです。

 

HTMLのひな形を作ってみよう!

これを展開すると下記のようになります。

 

タグを書いてみよう!

これを展開すると下記のようになります。

 

idを書いてみよう!

idはCSSのように#を使います。

これを展開すると下記のようになります。

 

classを書いてみよう!

classはCSSのように.を使います。

これを展開すると下記のようになります。

 

子要素を書いてみよう!

子要素は>を使います。

これを展開すると下記のようになります。

 

隣接要素を書いてみよう!

隣接要素は+を使います。

これを展開すると下記のようになります。

 

一つ上の階層に戻ってみよう!

一つ上の階層に戻るには^を使います。

これを展開すると下記のようになります。

 

繰り返しを使ってみよう!

繰り返しには*を使います。その後に繰り返したい数を書きます。

これを展開すると下記のようになります。

 

属性を書いてみよう!

属性を書く時は[]の中に書いて”を省略できます。

これを展開すると下記のようになります。

 

Web制作者のためのSublime Textの教科書
Web制作者のためのSublime Textの教科書

 

いかがでしたか。CSSもいろいろ書けるようなのですが、SublimeTextを使っているので、あまり必要ないかなと思います。
以上で「Emmetを使って倍速にHTMLを書いてみよう!」でした。

topへ戻る