よく使う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; |
---|
こちらのチートシートに、より豊富なリストが公開されています。