Emmet展開についての覚書

※この記事は最終更新日から3年以上経過しています。内容が古い可能性があります。

階層的な展開

子要素として展開する

ul>li>a

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

+ 隣接した要素(隣り合わせに配置)

dl>dt+dd

<dl>
  <dt></dt>
  <dd></dd>
</dl>

^ 上の階層(続けて配置)

div>p^div

<div>
  <p></p>
</div>
<div></div>

さまざまな展開のテクニック

IDやCLASSをつける

ul#hoge>li.moge

<ul id="hoge">
  <li class="moge"></li>
</ul>

IDは要素名に続けて「#」、クラスは要素名に続けて「.」をつけます。
CSSの規則と同じです。

IDやCLASSを複数個つける

p#id1.class1.class2

<p id="id1" class="class1 class2"></p>

このように連続して複数個つけることもできます。

divの省略

#main^.sub

<div id="main"></div>
<div class="sub"></div>

divを省略して、idとclass名のみを指定して展開することもできます。

連番と繰り返し

ul>li#item$*5

<ul>
  <li id="item1"></li>
  <li id="item2"></li>
  <li id="item3"></li>
  <li id="item4"></li>
  <li id="item5"></li>
</ul>

行数が多いと、便利さが際立ちます。

「$」マークで連番を付けることができます。「$」マークの数で桁数を指定することができます。
例えば3ケタの連番を付けたい場合は「$$$」です。

さらに「*」記号で特定の要素を繰り返して展開することができます。
「li*5」ならリスト要素を5個展開します。

降順に番号をつける

ul>li#item$@-*3

<ul>
  <li id="item3"></li>
  <li id="item2"></li>
  <li id="item1"></li>
</ul>

「$@-」で降順で番号を付与することができます。

開始番号を指定して、番号をつける

ul>li#item$@5*3

<ul>
  <li id="item5"></li>
  <li id="item6"></li>
  <li id="item7"></li>
</ul>

「@数字」で開始番号を指定することができます。
「@5」なら5番目から展開します。

まとめて展開する

dl>(dt+dd)*3

<dl>
  <dt></dt>
  <dd></dd>
  <dt></dt>
  <dd></dd>
  <dt></dt>
  <dd></dd>
</dl>

この例では、<dt>と<dd>をまとめて、3つ展開しています。

説明リスト(定義リスト)の展開などで役に立ちます。

属性・値を指定する

a[href=# target=_blank]

<a href="#" target="_blank"></a>

※[]を使うことで、あらかじめ属性・値を入力して展開することができます。“”は不要です。

文字列を入れる

div>p{テキスト}

<div>
  <p>テキスト</p>
</div>

{}の中にテキストを入れて展開することができます。

ul>li*3>a{メニュー$}

<ul>
  <li><a href="">メニュー1</a></li>
  <li><a href="">メニュー2</a></li>
  <li><a href="">メニュー3</a></li>
</ul>

これはこれまでの応用です。
テキストに連番を付けて展開することもできます。

ダミー文章を入れる

lorem

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore id minus dolorem architecto, neque voluptatibus et, culpa iste ad, voluptas perspiciatis magni earum. Ex ipsum eum mollitia,

英語としても意味をなさないダミー文章を展開してくれます。

p>lorem5

<p>Lorem ipsum dolor sit amet.</p>

loremに数字をつけるとその数に応じた単語が展開されます。

フィルター

ちょっと特殊な展開方法もご紹介します。こんなことも出来るんだ程度でいいと思います。

|e　特殊文字をエンコードで出力

div>p|e

&lt;div&gt;
  &lt;p&gt;&lt;/p&gt;
&lt;/div&gt;

>や<、&をエスケープ処理して展開することができます。

|c　閉じタグの後にIDやClass名をコメントで出力

#main>p^.sub>p|c

<div id="main">
  <p></p>
</div>
<!-- /#main -->
<div id="sub">
  <p></p>
</div>
<!-- /.sub -->

コードが長くなると便利ですよね。
ID名やClass名を閉じタグの後ろにコメントとして追加してくれます。

|s　シングルライン(1行で出力)

ul>li*3|s

<ul><li></li><li></li><li></li></ul>

{}の中にテキストを入れて展開することができます。

CSS

多少間違ってても、近いやつが展開されます。
あいまいな入力にも対応しているのがうれしいところです。

すべて覚える必要はないので、よく使うものから覚えるといいと思います。

タイプ(文字装飾)

展開前	展開後
c	color: #000;
c#f	color: #fff;
fz12	font-size: 12px;
fz12r	font-size: 12rem;
fw:n	font-weight:normal;
fw:b	font-weight:bold;
lh1.5r	line-height: 1.5rem;
td	text-decoration: none;
-tsh-inset-0-1-3-#bbb	-webkit-tsh-inset: -0px 1px 3px #bbb; -moz-tsh-inset: -0px 1px 3px #bbb; -ms-tsh-inset: -0px 1px 3px #bbb; -o-tsh-inset: -0px 1px 3px #bbb; tsh-inset: -0px 1px 3px #bbb;

背景

展開前	展開後
bg+	background:#fff url() 0 0 no-repeat;
bgc#ccc	background-color: #ccc;
bgc:t	background-color:transparent;
bgr:x	background-repeat:repeat-x;
bgr:y	background-repeat:repeat-y;

ブロック

展開前	展開後
va	vertical-align:top;
va:m	vertical-align:middle;
va:b	vertical-align:bottom;
tac	text-align: center;
ta-l	text-align: left;
tar	text-align: right;
ti	text-indent: ;
d	display:block;
d:n	display:none;
d:b	display:block;
d:i	display:inline;
d:ib	display:inline-block;
d:tb	display:table;
d:itb	display:inline-table;
d:tbcl	display:table-column;
d:tbr	display:table-row;
d:tbc	display:table-cell;

ボックス

展開前	展開後
w100	width: 100px;
w100p	width: 100%;
w2e	width: 2em;
w2r	width: 2rem;
w:a	width:auto;
h	height:;
h:a	height:auto;
maw	max-width:;
mah	max-height:;
miw	min-width:;
mih	min-height:;
fl	float:left;
fl:r	float:right;
cl	clear:both;
m1-2-3-4	margin: 1px 2px 3px 4px;
m10–10 ※ハイフンに続けて、マイナス10	margin: 10px -10px;
m0-a	margin: 0 auto;
mt	margin-top:;
mr	margin-right:;
mr:a	margin-right:auto;
mb	margin-bottom:;
ml	margin-left:;
ml:a	margin-left:auto;
p	padding:;
pt	padding-top:;
pr	padding-right:;
pb	padding-bottom:;
pl	padding-left:;

ボーダー

展開前	展開後
bd+	border:1px solid #000;
bt+	border-top:1px solid #000;
bdt+	border-top:1px solid #000;
bdc	border-color:#000;
bdc:t	border-color:transparent;
bdi	border-image:url();
bds:s	border-style:solid;
bds:db	border-style:double;
bds:dt	border-style:dotted;
bds:ds	border-style:dashed;
-bdrs5 ※ベンダープレフィックス付き	-webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px;
bdtrrs	border-top-right-radius:;
bdtlrs	border-top-left-radius:;
bdbrrs	border-bottom-right-radius:;
bdblrs	border-bottom-left-radius:;
-bsha-0-1-3-#bbb	-webkit-box-shadow: -0px 1px 3px #bbb; box-shadow: -0px 1px 3px #bbb;

展開前	展開後
lis	list-style:;
lis:n	list-style:none;
list:n	list-style-type:none;
list:d	list-style-type:disc;
list:c	list-style-type:circle;
list:s	list-style-type:square;
lisi	list-style-image:;
lisp:i	list-style-position:inside;
lisp:o	list-style-position:outside;

位置(ポジション)

展開前	展開後
pos	position:relative;
pos:a	position:absolute;
pos:f	position:fixed;
t	top:;
r	right:;
b	bottom:;
l	left:;
z	z-index:;
ov	overflow:hidden;
ov:v	overflow:visible;
ov:s	overflow:scroll;
ov:a	overflow:auto;
v	visibility:hidden;
v:v	visibility:visible;

拡張(視覚的効果)

展開前	展開後
cur	cursor:${pointer};
cur:a	cursor:auto;
cur:d	cursor:default;
cur:he	cursor:help;
cur:p	cursor:pointer;
cur:t	cursor:text;
op	opacity:;
op:ie	filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100); /* ie lt 8(7以前) */
op:ms	-ms-filter:’progid:DXImageTransform.Microsoft.Alpha(Opacity=100)’; /* IE8以降 */

HTML

<head>関係

展開前	展開後
! ※lang=”en”をlang=”ja”に変更することも可能です。	<!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <title>Document</title> </head> <body></body> </html>
link	<link rel=”stylesheet” href=”” />
link:css	<link rel=”stylesheet” href=”style.css” />
script	<script></script>
script:src	<script src=””></script>
link:favicon	<link rel=”shortcut icon” type=”image/x-icon” href=”favicon.ico” />
link:touch	<link rel=”apple-touch-icon” href=”favicon.png” />
meta:vp	<meta name=”viewport” content=”width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0″ />

lang=”en”をlang=”ja”に変更する方法

Sublime Textの場合の設定方法です。
「Preferences」→「Package Settings」→「Emmet」→「Settings – User」を選択します。

下記のコードをコピペして保存する。

{
    "snippets": {
        "variables": {
            "lang": "ja",
            "locale": "ja-JP",
            "charset": "UTF-8",
            "indentation": "\t",
            "newline": "\n"
        }
    }
}

これでhtmlファイルを新規作成して
いつもどおり「!」を展開するとlang=”ja”になる。