HTML/CSSを爆速コーディング
Web制作に欠かせないツールである「Emmet」というものを、知っていますか？
Emmetとは何か？
Emmetは、主にHTMLやCSSの記述・編集を強力にサポートするテキストエディタ用プラグインです。
Juitaがよく使うEmmetのショートカット展開例をまとめました。
環境はSublimeText3とBracketsを使用しています。TabキーでEmmetを展開。
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; |
emmet チートシート
https://docs.emmet.io/cheat-sheet/
