Emmet展開についての覚書

Emmet展開についての覚書

階層的な展開

子要素として展開する

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”になる。