[Emmet]よく使うショートカットまとめ

HTML/CSSを書く方でEmmetを導入している方は多いと思われます。ですが、ショートカットが多すぎて結局覚えれない事はありませんか?HTMLなどをしばらく書いてないとすぐに忘れてしまうので、備忘録としてよく使うショートカットキーをリスト化しました。思い出す手助けになれば幸いです。

HTML

使用頻度が高い基本ショートカット

Emmet ショートカット 展開後コード
ID div#bar <div id=”bar”></div>
Class div.foo <div class=”foo”></div>
子要素 div>p <div><p></p></div>
兄弟要素 div+p <div></div>
<p></p>
複数要素  li*3 <li></li>
<li></li>
<li></li>
 連番  ul>li.item$*3 <ul>
<li class=”item1″ ></li>
<li class=”item2″></li>
<li class=”item3″></li>
</ul>
コメントアウト div.foo|c <div class=”foo”></div>
<!– /.foo –>

 

よく使うタグショートカット

Emmetショートカット 展開後コード
リンク a <a href=””></a>
画像 img <img src=”” alt=”” />
順序つきリスト ol>li
ol+
<ol>
<li></li>
</ol>
順序無しリスト ul>li
ul+
<ul>
<li></li>
</ul>
テーブル table+ <table>
<tr>
<td></td>
</tr>
</table>

CSS

ショートカット単位

パーセンテージ w100p width: 100%;
em w2e width: 2em;
px w50 width: 50px;

 

使用頻度が高い基本ショートカット

Emmetショートカット 展開後コード
マージン系 m10
ml:a
mt2e
mr:a
mb5p
margin: 10px;
margin-left: auto;
margin-top: 2em;
margin-right: auto;
margin-bottom: 5%;
パディング系 p9
pl2e
pt15
pr3p
pb3e
padding: 9px;
padding-left: 2em;
padding-top: 15px;
padding-right: 3%;
padding-bottom: 3em;
 ディスプレイ系 d
d:n
d:f
d:ib
d:tb
display: block;
display: none;
display: flex;
display: inline-block;
display: table;
フォント系 fw
fz
ff
font-weight:
font-size:
font-family:
テキスト系 ta:l
ta:c
ta:r
td:n
td:u
text-align: left;
text-align: center;
text-align: right;
text-decoration: none;
text-decoration: underline;

Share

参考になれば、是非シェアをお願いします!フォロー、Feedlyの登録もよろしくお願いします:)