Emmetでよく使うショートハンドまとめ

よく使うEmmetのショートハンド展開例をまとめました。
環境はSublimeText3を使用しています。

html編

ショートハンド 概要 展開例
html:5 html5の基本構造を展開
<!doctype html>
	<html lang="ja">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
	</head>
	<body></body>
</html>
div.hoge classを付与して展開
<div class="hoge"></div>
div#hoge idを付与して展開
<div id="hoge"></div>
h1+div 兄弟関係の展開
<h1></h1>
<div></div>
p>a 親子関係の展開
<p><a href=""></a></p>
p{テキスト} 要素内テキストを指定して展開
<p>テキスト</p>
p>{テキスト前半}+a{リンク}+{テキスト後半} 兄弟要素のテキストを指定して展開
<p>テキスト前半
<a href="">リンク</a>
テキスト後半</p>
li*3 要素を複数展開
<li></li>
<li></li>
<li></li>
table>(tr>th+td)*3 グループ化して展開
<table>
<tr>
<th></th>
<td></td>
</tr>
<tr>
<th></th>
<td></td>
</tr>
<tr>
<th></th>
<td></td>
</tr>
</table>
img[src=”image.jpg” alt=”画像”] 属性を指定して展開
<img src="image.jpg" alt="画像">
ul>li.hoge$*3 ナンバリングして展開
<ul>
<li class="hoge1"></li>
<li class="hoge2"></li>
<li class="hoge3"></li>
</ul>

CSS編

ショートハンド 展開例
c#fff
color: #fff;
bg#000
background: #000;
bg+
background: #fff url() 0 0 no-repeat;
fz12
font-size: 12px;
m10
margin: 10px;
m10-20-5-30
margin: 10px 20px 5px 30px;
p10
padding: 10px;
w100
width: 100px;
di
display: inline;
dib
display: inline-block;
db
display: block;
bd+
border: 1px solid #000;
posa
position: absolute;
posr
position: relative;
bdrs10
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
bgs
-webkit-background-size: ;
background-size: ;
bxs
-webkit-box-shadow: inset hoff voff blur color;
-moz-box-shadow: inset hoff voff blur color;
box-shadow: inset hoff voff blur color;
txs
text-shadow: hoff voff blur #000;

こちらのチートシートに、より豊富なリストが公開されています。

RELATED POSTS