Emmet展開についての覚書

Emmet展開についての覚書

※この記事は2016年10月19日に書かれたもので、内容が古い可能性がありますのでご注意ください。

階層的な展開

子要素として展開する

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

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

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

タイプ(文字装飾)

展開前展開後
ccolor: #000;
c#fcolor: #fff;
fz12font-size: 12px;
fz12rfont-size: 12rem;
fw:nfont-weight:normal;
fw:bfont-weight:bold;
lh1.5rline-height: 1.5rem;
tdtext-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#cccbackground-color: #ccc;
bgc:tbackground-color:transparent;
bgr:xbackground-repeat:repeat-x;
bgr:ybackground-repeat:repeat-y;

ブロック

展開前展開後
vavertical-align:top;
va:mvertical-align:middle;
va:bvertical-align:bottom;
tactext-align: center;
ta-ltext-align: left;
tartext-align: right;
titext-indent: ;
ddisplay:block;
d:ndisplay:none;
d:bdisplay:block;
d:idisplay:inline;
d:ibdisplay:inline-block;
d:tbdisplay:table;
d:itbdisplay:inline-table;
d:tbcldisplay:table-column;
d:tbrdisplay:table-row;
d:tbcdisplay:table-cell;

ボックス

展開前展開後
w100width: 100px;
w100pwidth: 100%;
w2ewidth: 2em;
w2rwidth: 2rem;
w:awidth:auto;
hheight:;
h:aheight:auto;
mawmax-width:;
mahmax-height:;
miwmin-width:;
mihmin-height:;
flfloat:left;
fl:rfloat:right;
clclear:both;
m1-2-3-4margin: 1px 2px 3px 4px;
m10–10
※ハイフンに続けて、マイナス10
margin: 10px -10px;
m0-amargin: 0 auto;
mtmargin-top:;
mrmargin-right:;
mr:amargin-right:auto;
mbmargin-bottom:;
mlmargin-left:;
ml:amargin-left:auto;
ppadding:;
ptpadding-top:;
prpadding-right:;
pbpadding-bottom:;
plpadding-left:;

ボーダー

展開前展開後
bd+border:1px solid #000;
bt+border-top:1px solid #000;
bdt+border-top:1px solid #000;
bdcborder-color:#000;
bdc:tborder-color:transparent;
bdiborder-image:url();
bds:sborder-style:solid;
bds:dbborder-style:double;
bds:dtborder-style:dotted;
bds:dsborder-style:dashed;
-bdrs5
※ベンダープレフィックス付き
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
bdtrrsborder-top-right-radius:;
bdtlrsborder-top-left-radius:;
bdbrrsborder-bottom-right-radius:;
bdblrsborder-bottom-left-radius:;
-bsha-0-1-3-#bbb-webkit-box-shadow: -0px 1px 3px #bbb;
box-shadow: -0px 1px 3px #bbb;

リスト

展開前展開後
lislist-style:;
lis:nlist-style:none;
list:nlist-style-type:none;
list:dlist-style-type:disc;
list:clist-style-type:circle;
list:slist-style-type:square;
lisilist-style-image:;
lisp:ilist-style-position:inside;
lisp:olist-style-position:outside;

位置(ポジション)

展開前展開後
posposition:relative;
pos:aposition:absolute;
pos:fposition:fixed;
ttop:;
rright:;
bbottom:;
lleft:;
zz-index:;
ovoverflow:hidden;
ov:voverflow:visible;
ov:soverflow:scroll;
ov:aoverflow:auto;
vvisibility:hidden;
v:vvisibility:visible;

拡張(視覚的効果)

展開前展開後
curcursor:${pointer};
cur:acursor:auto;
cur:dcursor:default;
cur:hecursor:help;
cur:pcursor:pointer;
cur:tcursor:text;
opopacity:;
op:iefilter: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”になる。