WEB制作 2014年05月21日公開

【HTML編】初心者向けEmmetの使い方

記事更新日2014年05月21日よねっち

Emmetによる快適高速コーディングを習得するための記事です。
EmmetでのHTMLコーディングをなるべく分かりやすくまとめてみました。

自分自身が初心者なので、自分にとって分かりやすく書いたつもりです。

基本の書き方

emmetは簡単な記述でHTMLを展開してくれます。
コードを記述し、TABもしくはctrl+eで展開されます。

では展開例を書いていきます。

タグの展開

タグの展開は自動的に閉じタグまで生成してくれます。
例として以下のように展開されます。


a
<!-- 展開後↓ -->
<a href=""></a>

<!-- **************************************** -->

a:link
<!-- 展開後↓ -->
<a href="http://"></a>

<!-- **************************************** -->

br
<!-- 展開後↓ -->
<br />

<!-- **************************************** -->

hr
<!-- 展開後↓ -->
<hr />

<!-- **************************************** -->

link
<!-- 展開後↓ -->
<link rel="stylesheet" href="" />

<!-- **************************************** -->

link:css
<!-- 展開後↓ -->
<link rel="stylesheet" href="style.css" />

<!-- **************************************** -->

meta
<!-- 展開後↓ -->
<meta />

<!-- **************************************** -->

meta:utf
<!-- 展開後↓ -->
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

<!-- **************************************** -->

script
<!-- 展開後↓ -->
<script></script>

<!-- **************************************** -->

script:src
<script src=""></script>

<!-- **************************************** -->

img
<!-- 展開後↓ -->
<img src="" alt="" />

<!-- **************************************** -->

iframe
<!-- 展開後↓ -->
<iframe src="" frameborder="0"></iframe>

<!-- **************************************** -->

bq
<!-- 展開後↓ -->
<blockquote></blockquote>

<!-- **************************************** -->

略して書けるタグ

長いタグ名などの場合、略して展開する事が出来ます。

タグ	略した記述
blockquote	bq
figure	fig
figcaption	figc
iframe	ifr
embed	emb
object	obj
source	src
caption	cap
button	btn
textarea	tarea
section	sect
article	art
header	hdr
footer	ftr
address	adr
strong	str
input	inp

Emmetのチートシートがありましたので、どんなタグが対応しているか目を通しておいた方がいいかもしれません。

Cheat Sheet

IDとclass

IDやclassを付与して展開する例です。

＃や.のみでdivとして展開します。
続けて文字を入力することで、その文字がID,classにセットされます。


#
<div id=""></div>

#test
<div id="test"></div>

.
<div class=""></div>

.test
<div class="test"></div>

p.hoge
<p class="hoge"></p>

span.lister
<span class="lister"></span>

入れ子

入れ子の場合は要素の次に【>】で繋ぐ。


p>span
<p><span></span></p>

.test>p>span
<div class="test">
	<p><span></span></p>
</div>

同階層、兄弟要素を作る

同階層、兄弟要素を作る場合は【+】で繋ぎます。


.test+.hoge
<div class="test"></div>
<div class="hoge"></div>

.test>h2+p+h3+p
<div class="test">
	<h2></h2>
	<p></p>
	<h3></h3>
	<p></p>
</div>

親要素、ひとつ上の階層

【^】はひとつ上の階層に移動します。


p>span^p
<p><span></span></p>
<p></p>

p>span^span
<p><span></span></p>
<span></span>

テキストの入力

テキストを流し込むときは{テキスト}でテキストを入れる。


p{fate/stay:nightのリメイク今年ですね}
<p>fate/stay:nightのリメイク今年ですね</p>

h2{今期の一番面白いアニメ}+p{どれも面白い}
<h2>今期の一番面白いアニメ</h2>
<p>どれも面白い</p>

ダミーテキスト

loremを使用する事でダミーテキストを入れてくれる。勿論英語。
繰り返し処理させる事で異なるテキストが出力される。


p>lorem
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, iste, fugit, natus, error quos quo sint maiores a distinctio ex vel tempore soluta tenetur corporis quas in reprehenderit possimus facilis!</p>

p*5>lorem
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo, officiis, suscipit, et, perferendis laboriosam nihil quos earum assumenda harum fugiat cum ullam aliquam molestiae placeat ipsa voluptatem incidunt quis quia.</p>
<p>Nihil, eos, eum, nostrum molestiae quis ipsa minus illum voluptate animi est obcaecati fugiat accusantium nobis amet beatae non perferendis aut expedita corporis optio vitae aliquam dignissimos excepturi itaque repellat.</p>
<p>Quae, placeat, voluptates, commodi alias quasi ullam rem exercitationem dolor accusamus error non voluptatibus neque facere necessitatibus quos nemo sit fugiat aliquid distinctio inventore. Velit, libero illo itaque dicta quis.</p>
<p>Autem, aliquam, asperiores, consectetur atque ea error deserunt nesciunt quaerat excepturi mollitia expedita culpa odit dolorem optio aut molestiae obcaecati ut nobis in temporibus provident porro doloribus sapiente quidem enim.</p>
<p>Impedit, non, nam, cumque totam veritatis ullam repellendus molestiae quis ut esse labore voluptatibus illum dolorem magnam accusamus assumenda amet autem tempora quos aut? Dolore nobis distinctio ipsam excepturi corporis!</p>

コメントアウト

コメントの展開は【c】で行う。
また、【|c】を末尾に入れることで閉じタグのコメントを展開できる。


c{コメント}
<!-- コメント -->

.test|c
<div class="test"></div>
<!-- /.test -->

c>.test
<!-- <div class="test"></div> -->

コンディショナルコメント

IE対策用のコンディショナルコメントも自動で展開してくれる。


cc:ie6
<!--[if lte IE 6]>
	
<![endif]-->

cc:ie
<!--[if IE]>
	
<![endif]-->

cc:noie
<!--[if !IE]><!-->
	
<!--<![endif]-->

実体参照

タグを実体参照にしてくれる。
重ねがけも出来る。


#test|e
&lt;div id="test"&gt;&lt;/div&gt;

#test|e|e
&amp;lt;div id="test"&amp;gt;&amp;lt;/div&amp;gt;

#test|e|e|e
&amp;amp;lt;div id="test"&amp;amp;gt;&amp;amp;lt;/div&amp;amp;gt;

#test|e|e|e|e
&amp;amp;amp;lt;div id="test"&amp;amp;amp;gt;&amp;amp;amp;lt;/div&amp;amp;amp;gt;

#test|e|e|e|e|e
&amp;amp;amp;amp;lt;div id="test"&amp;amp;amp;amp;gt;&amp;amp;amp;amp;lt;/div&amp;amp;amp;amp;gt;

繰り返し&連番

繰り返しは【*】、連番は【$】を使います。
また【$】は【$$】や【$$$】と書くことで【01】【001】から始まる連番表示が出来ます。


ul>li*5
<ul>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>

ul>li*3>{$}
<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ul>

ul>li*3>{$$}
<ul>
	<li>01</li>
	<li>02</li>
	<li>03</li>
</ul>

ul>li*3>{$$$}
<ul>
	<li>001</li>
	<li>002</li>
	<li>003</li>
</ul>

ul>li[class=test_$]*5
<ul>
	<li class="test_1"></li>
	<li class="test_2"></li>
	<li class="test_3"></li>
	<li class="test_4"></li>
	<li class="test_5"></li>
</ul>

ul>li[class=test_$]{連番$}*5
<ul>
	<li class="test_1">連番1</li>
	<li class="test_2">連番2</li>
	<li class="test_3">連番3</li>
	<li class="test_4">連番4</li>
	<li class="test_5">連番5</li>
</ul>

グループ化

グループ化をする事で、グループの中での階層移動はグループの外では影響を受けなくなります。

・navと同階層にP要素を作りたい場合
グループ化をしていない場合


#test>nav>ul>li*3>span^^^p
<div id="test">
	<nav>
		<ul>
			<li><span></span></li>
			<li><span></span></li>
			<li><span></span></li>
		</ul>
	</nav>
	<p></p>
</div>

グループ化での記述


#test>(nav>ul>li*3>span)+p
<div id="test">
	<nav>
		<ul>
			<li><span></span></li>
			<li><span></span></li>
			<li><span></span></li>
		</ul>
	</nav>
	<p></p>
</div>

要素のプロパティと値の指定

プロパティと値を指定するには[プロパティ=値]の形式で書きます。
複数のプロパティを指定する時は半角スペースを入れ、記述します。


a[href=./index.html]
<a href="./index.html"></a>

a[href=./index.html title=極黒のブリュンヒルデ面白い]
<a href="./index.html" title="極黒のブリュンヒルデ面白い"></a>

a[href=./index.html title=2014年春アニメは豊作だよね class=tooltip]
<a href="./index.html" title="2014年春アニメは豊作だよね" class="tooltip"></a>

記述の省略を考えてみた

記述の省略例として色々考えてみました。

・略して書けるタグは略して書く。
・divは書かない、書くときは#や.で書く。
・階層移動が激しいときは、グループ化する。

よくあるボックス型コンテンツのHTML
繰り返しの記述を.conteiner*3でする事で、セクション内に複数のコンテンツボックスを出力させている。


sect.box_area>.conteiner*3>.box>art>h1{記事タイトル}+p{内容}
<section class="box_area">
	<div class="conteiner">
		<div class="box">
			<article>
				<h1>記事タイトル</h1>
				<p>内容</p>
			</article>
		</div>
	</div>
	<div class="conteiner">
		<div class="box">
			<article>
				<h1>記事タイトル</h1>
				<p>内容</p>
			</article>
		</div>
	</div>
	<div class="conteiner">
		<div class="box">
			<article>
				<h1>記事タイトル</h1>
				<p>内容</p>
			</article>
		</div>
	</div>
</section>

子要素の省略

要素によっては省略して書けるケースがある。
ul,olはliになり
pはspanに
tableはtr、trはtdを省略できる。


ul>.test{$}*3
<ul>
	<li class="test">1</li>
	<li class="test">2</li>
	<li class="test">3</li>
</ul>

ol>.test{$}*3
<ul>
	<li class="test">1</li>
	<li class="test">2</li>
	<li class="test">3</li>
</ul>

p>.test
<p><span class="test"></span></p>

table>.row_$*3>.sel_${$}*3
<table>
	<tr class="row_1">
		<td class="sel_1">1</td>
		<td class="sel_2">2</td>
		<td class="sel_3">3</td>
	</tr>
	<tr class="row_2">
		<td class="sel_1">1</td>
		<td class="sel_2">2</td>
		<td class="sel_3">3</td>
	</tr>
	<tr class="row_3">
		<td class="sel_1">1</td>
		<td class="sel_2">2</td>
		<td class="sel_3">3</td>
	</tr>
</table>

記号の意味

Emmetで使用する記号の使用例
今までに何度か登場しているが、おさらいに覚えていたほうが絶対得する。

記号	意味
$	連番(1から始まる数値)
*	繰り返し
>	入れ子、子要素
+	同階層の次の要素、兄弟要素
^	一つ上の階層、親要素
#	ID
.	class
[]	属性
{}	要素の中身、テキスト
=	属性の値a[href=./index]等として使う
()	グループ
\|	後ろに特定の文字を入れることで機能する
\|e	実体参照にする
\|c	IDやclassが着いている要素の閉じタグにコメント
\|s	一行出力

doctype宣言

docmenttype宣言にはいくつかの例があります。
どの展開もlangの初期値はenになっていることに注意


<!-- 展開後↓ -->
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
</body>
</html>

<!-- **************************************** -->

!!!
<!-- 展開後↓ -->
<!doctype html>

!!!4t
<!-- 展開後↓ -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

!!!4s
<!-- 展開後↓ -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

!!!xt
<!-- 展開後↓ -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

!!!xs
<!-- 展開後↓ -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

!!!xxs
<!-- 展開後↓ -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<!-- **************************************** -->

html:5
<!-- 展開後↓ -->
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
</head>
<body>
	
</body>
</html>

<!-- **************************************** -->

doc4
<!-- 展開後↓ -->
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
</head>
<body>
	
</body>
</html>

<!-- **************************************** -->

html:4t
<!-- 展開後↓ -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
</head>
<body>
	
</body>
</html>

<!-- **************************************** -->

html:4s
<!-- 展開後↓ -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
</head>
<body>
	
</body>
</html>

<!-- **************************************** -->

html:xt
<!-- 展開後↓ -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
</head>
<body>
	
</body>
</html>

<!-- **************************************** -->

html:xs
<!-- 展開後↓ -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>Document</title>
</head>
<body>
	
</body>
</html>

<!-- **************************************** -->

html:xxs
<!-- 展開後↓ -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>Document</title>
</head>
<body>
	
</body>
</html>

あとがき

頑張って書いたおかげかemmetのHTMLの展開に関しては殆ど覚えました。
やっぱりブログ書く=アウトプットって重要ですね。

結構他人より物覚えが悪いので、人一倍努力しなければ覚えられないんです＞＜
では後ほどCSSの方も頑張って書きたいと思います。