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