初めまして!!

WEBデザイナーで、尚且つこのブログを制作しているチーム
ケーワンジャーブルーの「むらずん」です。

今回がブログ初投稿になります。

今日は、コーディング速度が今までの数倍以上!になるかもしれない
「Emmet」をご紹介します。

今回は基本的な記述に抜粋してお伝えします。
ただ、基本だけでも、十分に活用できる機会はありますので、
まだまだ駆け出しのコーダーさんで速度向上させたいって思っている方は
是非お付き合いください♪

Emmetとは?


さて、まずEmmetとは何なのかといいますと、Emmet独自の省略記法を用いて記述する事によって、本当はたくさん記述しないといけないコーディングを「短く」「簡単」に済ませる事ができます。

ちなみにそのまま直ぐに使えるのかと言うと、そうではなく
お使いのエディタに「Emmet」のプラグインをインストールする事で使用可能となります。

ちなみに一般的に普及している主要なエディタには、だいたい対応しています^^

また、Dreamweaverに関しては最新バージョンであれば
プラグインを導入する事もなく何もしないで最初から使用できたりします。

それではEmmetがどんな風にコーディングをサポートしてくれるのかを例を出します。

Emmetでは独自の省略記法を用いて記述します。

Emmetの省略記法
div>h1+ul>li

直訳すると・・・

・divタグを生成
・divタグの子要素にh1タグ生成
・h1タグに隣接してulタグを生成
・ulタグの子要素としてliタグを生成


説明文だけだと分かりにくいかもしれないので下記をご覧ください。

[展開前のコード]
		div>h1+ul>li
	

↓↓↓記述完了後に「ctrl+E」を押します。↓↓↓

【展開されたコード】
		<div>
		  <h1></h1>
		  <ul>
		    <li></li>
		  </ul>
		</div>
	

となります。

さらに極めると、タグ内のテキストも記述していくことができ、
Emmetだけでほとんどコーディングを完結する事もできます。

と、そこまで無理をして使うと逆にやりにくくなるかもしれないので、
ある程度はエディタの補完機能に頼ったり、
自分がやりやすい様にEmmetを活用すれば十分だと思います。

Emmetを使えるエディタ


Emmetはお使いのエディタが対応していないと使用することはできません。
ですが、コーダーが使用するほとんどのエディタに対応していますのでご安心ください!

以下の様なエディタでEmmetを使用する事ができます。

  • Adobe Dreamweaver
  • Sublime text
  • Atom
  • Brackets
  • Coda
  • Eclipse/Aptana

インストール手順は各エディタ毎に異なるので本ブログでは割愛します。
google検索を使って「エディタ名 Emmet」あたりで検索するとたくさん出てきます。

Emmetの記述方法


Emmetを完全に使いこなすのは大変ですが、このブログでは

とりあえずこれだけは覚えておけば便利!

なものに抜粋してご紹介しますのでご安心ください。

◆基本パターン

[展開前のコード]
		p
	

pの後ろにカーソルを持っていき、「Ctrl+E」を押します。

[Emmetにより展開されたコード]
		<p></p>
	

このように、pタグ生成されます。

それでは次の例・・・

[展開前のコード]
		a
	

アンカータグのaの場合だと・・・

[Emmetにより展開されたコード]
		<a href=""></a>
	


上記の様にリンクのhref属性も付与されます。

◆idやclass


次によく使う「id属性」や「class属性」を付与する方法です。

[展開前のコード]
		h1#hoge
	

上記の様にタグの後に#hogeと記述すると・・・

[Emmetにより展開されたコード]
		<h1 id="hoge">
		</h1>
	

この様にh1タグにid属性と属性値の「hoge」が付与されます。

ちなみに下記の様に「#」を「.」にするとclassとなります。

[展開前のコード]
		h1.hoge
	

[Emmetにより展開されたコード]
		<h1 class="hoge">
		</h1>
	


◆階層

では最後に階層とちょっとした応用です。

[展開前のコード]
		header>nav>ul.menu>li*3>a
	

この様に、
「>」で子要素
「*3」で入力した数字の分だけ隣接して増殖する事ができます(この場合だと3つ配置します。)

展開すると・・・

[Emmetにより展開されたコード]
		<header>
			<nav>
				<ul class="menu">
					<li><a href=""></a></li>
					<li><a href=""></a></li>
					<li><a href=""></a></li>
				</ul>
			</nav>
		</header>
	

このように展開されます。

まとめ

以上で基礎の入門編は終了となります。

今回使用した省略記号を表にまとめました!

記号 意味
> 子要素
+ 兄弟要素
# id
. class
*5 出力数(左記の場合は5つ生成)

後半の実践編ではリストに連番を振ったり、テキストの入れ込み、cssの記述を行っていきます。
まだまだ全然簡単ですのでお気軽にご覧下さい^^