Emmetショートカット : control + e
HTML
基本
.(ドット)はclass、#(シャープ)はidの表記となる。
例) Emmet : .border
展開 : <div class="border"></div>
HTMLひな形
! , html:5
上記の入力だけでHTML5のひな形を記述できる。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
html:4
HTML4のひな形を記述できる。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
[繰り返し] タグ名*数字
nav > ul#menu > li*5 > a [ href = # ]
li*5とすると、liを5回繰り返す指定となる。
タグ名の後ろに"*数字"を入れることで、そのタグを指定した数字分繰り返すという指定となる。
<nav>
<ul id = "menu" >
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</nav>
連番、テキスト入力
.text{サンプル$}*3
{}の中にテキストを書き込むとタグの中身となる。
$を入力すると、連番として表記される。
<div class="text">サンプル1</div>
<div class="text">サンプル2</div>
<div class="text">サンプル3</div>
.test{サンプル２桁$$}*5
$$で、連番01,02,03...と表記される。
<div class="test">サンプル2桁01</div>
<div class="test">サンプル2桁02</div>
<div class="test">サンプル2桁03</div>
<div class="test">サンプル2桁04</div>
<div class="test">サンプル2桁05</div>
階層を上げて展開
div + div > h1 > span ^ p
^を入力すると、^以降のタグの階層が1段階上がる。
<div></div>
<div>
<h1><span></span></h1>
<p></p>
</div>
グループ化の展開
div > (header > ul > li*2 > a) + footer > p
()で１つのグループを作ることができる。
<div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>
タグ属性の展開
div[data-foo]
[]で属性を指定できる。
<div data-foo=""></div>
td [ rowspan=2 colspan=3 title ]
<td rowspan="2" colspan="3" title=""></td>
ダミーテキストの挿入
p*3 > lorem
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi vero, porro ullam magni voluptatum id dolor! Rerum iure beatae quas, cupiditate debitis vel repudiandae corporis, iste. Porro doloribus, eius ipsam.</p>
<p>Molestias molestiae officiis hic nesciunt id, deserunt in sint repellendus sequi! Distinctio aut ea culpa recusandae voluptatibus enim saepe laborum, placeat praesentium dolores vel, amet, impedit quos atque. Iste, provident.</p>
<p>Cumque voluptatem consequatur, consectetur possimus, aperiam, aut alias at voluptas magnam temporibus corporis debitis animi minima atque molestiae nam. Dolorem necessitatibus eos rem magnam, qui explicabo nam temporibus cumque. Voluptas.</p>
CSS
- 複数行まとめて展開できない
- 基本的に"-"で繋がるプロパティ名は、頭文字を打てばOK
- 先頭に"-"を打つと、ベンダープレフィックスを適切に入れてくれる
基本
- 単位はだいたいが省略しても"px"を入れてくれるので数字だけ打てば良い。
tac
text-align : center;
db
display : block;
m:a
margin: auto;
tdn
text-decoration : none;
posl
position: relative;
poa
position: absolute;
pf
position: fixed;
w100
width: 100px;
fsz12
font-size: 12px;
fsz12pt
font-size: 12pt;
"+"を最後につける
bg+
background: #fff url() 0 0 no-repeat;
f+
font: 1em Arial,sans-serif;
bd+
border: 1px solid #000;
ベンダープレフィックス
- 複数カーソルに対応しているので、同時に書き換えが可能
- 必要な分だけプレフィックスをつけてくれる。(ブラウザの進化ごとにEmmetもアップデートされるので)
-bx
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-bxc
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-bxs
-webkit-box-shadow: inset hoff voff blur color;
box-shadow: inset hoff voff blur color;
-trans
-webkit-transition: prop time;
-o-transition: prop time;
transition: prop time;
-bdrs
-webkit-border-radius: ;
-moz-border-radius: ;
-ms-border-radius: ;
-o-border-radius: ;
border-radius: ;
bdrs10
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
値の展開
w100 , w100p , w100e , w100x
width: 100px;
width: 100%;
width: 100em;
width: 100ex;
色のプロパティ展開
c#1 , c#e0 , c#fc0
color: #111;
color: #e0e0e0;
color: #fco;
特殊なプロパティ展開
!
!important
@i
@import url();
bg:ie
透過表示にする（IE5.5以上）
参考url:http://www.htmq.com/style/filter_alpha.shtml
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='x.png',sizingMethod='crop');