Emmet  使用方法

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以上）
:peach: 参考url:http://www.htmq.com/style/filter_alpha.shtml
```
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='x.png',sizingMethod='crop');
```