Emmet (Zen-Coding) を知らない人は損！HTML/CSSを爆速コーディング

2016年2月20日　ホームページ

Emmet Zen-Coding

概要

1 Emmet (Zen-Coding) とは？
2 Emmetの使い方 [HTML]
3 Emmetの使い方 [CSS]
4 Emmet関連サイト

Emmet (Zen-Coding) とは？

2012年頃までZen-Codingという名前で公開されていましたが、それ以降はEmmetという名前で公開されています。

Emmetとは、HTML/CSSを記述をサポートしてくれる強力なツールです。ほとんどの高機能なテキストエディタには対応するプラグインが用意されていたり、Dreamweaver CCでは標準でサポートされています。

HTMLを何年もコーディングしてきた人ならばEmmetはほぼ全ての人が知っています。ですが、知らない人も居るのが現状。いろいろなツールを利用して作業効率を上げるのは重要ですよ。

まずは、Emmetを導入してください。対応しているエディタは、こちらのサイトでご覧ください。使い方は簡単です。簡易的な記述をして記述後にショートカットキーを押すだけでHTMLタグなどに変換されます。ショートカットキーは基本的に「Ctrl + E」ですが、「Tab」を利用するエディタもあるようです。

Emmetの使い方 [HTML]

パターンを覚えれば簡単です。

HTML5のひな形

あまり使わないかもですが、「！」だけでHTML5宣言のコードが生成されます。言語指定はデフォルトではenです。

[text title=”TEXT”] ! [/text]

HTML

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

基本的なタグ生成

一番利用頻度が高いと思われる使い方。divやspanの部分を変えるだけで他のタグでも同じ使い方が可能です。header, nav, ul, p , h2, h3などなど

[text title=”TEXT”] div#contents　//ID: # span.inner　//Class: . [/text]

HTML

<div id="contents"></div>
<span class="inner"></span>

基本的なタグ生成 (省略編)

#.の前に記述するタグ名は省略することができます。デフォルトはdivで入れ子に合わせて変化します。

[text title=”TEXT”] .title ul>.list>a table>.row>.name [/text]

HTML

<div class="title"></div>
<ul>
   <li class="list"><a href=""></a></li>
</ul>
<table>
   <tr class="row">
      <td class="name"></td>
   </tr>
</table>

タグを入れ込む書き方

タグの中にタグを入れる時の書き方です。個数を表現するには*3のように表記します。

[text title=”TEXT”] ul#nav>li*3>a [/text]

HTML

<ul id="nav">
   <li><a href=""></a></li>
   <li><a href=""></a></li>
   <li><a href=""></a></li>
</ul>

同じ階層にタグ生成

+を記述することで同じ階層にタグを生成できます。

[text title=”TEXT”] div.box>div.title+p+p [/text]

HTML

<div class="box">
   <div class="title"></div>
   <p></p>
   <p></p>
</div>

その他

[text title=”TEXT”] br input img p.class1.class2.class3 a:link a[title="click"] [/text]

HTML

<br>
<input type="text">
<img src="" alt="">
<p class="class1 class2 class3"></p>
<a href="http://"></a>
<a href="" title="click"></a>

Emmetの使い方 [CSS]

属性名と属性値を記述します。略した名前を覚えなければなりません。

基本的な書き方

属性名と属性値を略した形で記述し、ショートカットキーを入力します。

[text title=”TEXT”] fl cl [/text]

CSS

float: left;
clear: both;

ベンダープレフィックスを付ける

先頭に-をつけることでwebkit, mozなどが一度に生成されます。

[text title=”TEXT”] -trans [/text]

CSS

-webkit-transition: prop time;
-moz-transition: prop time;
-ms-transition: prop time;
-o-transition: prop time;
transition: prop time;

単位

単位はデフォルトでpx。%はp、emは.で表現します。

[text title=”TEXT”] w100 h100p fz2. [/text]

CSS

width: 100px;
height: 100%;
font-size: 2em;

応用的な書き方

複数行を一度に書きたい時は+で繋げます。

[text title=”TEXT”] w100+h50+m0-a+c#555 [/text]

CSS

width: 100px;
height: 50px;
margin: 0 auto;
color: #555;

その他

CSS

pos:r	　->　	position: relative;
pos:a	　->　	position: absolute;
t    	　->　	top: ;
t0    	　->　	top: 0;
fl:l  	　->　	float: left;
fl:r  	　->　	float: right;
d    	　->　	display: block;
d:b  	　->　	display: block;
d:ib	　->　	display: inline-block;
ov  	　->　	overflow: hidden;
ov:h 	　->　	overflow: hidden;
ov:a 	　->　	overflow: auto;
cur  	　->　	cursor: pointer;
mt  	　->　	margin-top: ;
mt:a	　->　	margin-top: auto;
pt  	　->　	padding-top: ;
bxz  	　->　	box-sizing: border-box;
miw100	　->　	min-width: 100px;
fw:b	　->　	font-weight: bold;
ta:c	　->　	text-align: center;
bg#eee	　->　	background: #eee;
bgsz:cv	　->　	background-size: cover;
bdt+	　->　	border-top: 1px solid #000;
bdw1	　->　	border-width: 1px;
bds:s	　->　	border-style: solid;
bdc#000	　->　	border-color: #000;

Emmet関連サイト

WEB 関連記事