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