Emmet記法　メモランダム

***
ドットインストールの学習メモです
***

emmetはhtmlやCSSを書くときに使う便利な記省略法。

#タグの属性の指定
* . クラス
* #　id
* []　クラス、id以外（aタグのtitle属性など), 複数の属性を一気につけたい場合
* {}　要素ないのテキストを指定(pタグのhelloテキストなど）

```html:html
<!-- div#target -->
<div id="target"></div>

<!-- div.container -->
<div class="container"></div>

<!-- div#reset.btn.disabled -->
<div id="reset" class="btn disabled"></div>

<!-- a[title="Mysite"] -->
<a href="" title="Mysite"></a>

<!-- div[data-id="5" title="Mysite"] -->
<div data-id="5" title="Mysite"></div>

<!-- p{hello} -->
<p>hello</p>

<!-- div[data-id="5" title="Mysite"]{hello} -->
<div data-id="5" title="Mysite">hello</div>
```

こんなんでやってたらなんかかっこいい件について。


#複数の要素の展開

```html
<!-- p*3 -->
<p></p>
<p></p>
<p></p>

<!-- p{hello}*3 -->
<p>hello</p>
<p>hello</p>
<p>hello</p>

<!-- div.item*10 -->
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>

<!-- div.item$*5 -->
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
<div class="item4"></div>
<div class="item5"></div>

<!-- div.item$$$*5 -->
<div class="item001"></div>
<div class="item002"></div>
<div class="item003"></div>
<div class="item004"></div>
<div class="item005"></div>

<!-- div.item$@3*5 -->
<div class="item3"></div>
<div class="item4"></div>
<div class="item5"></div>
<div class="item6"></div>
<div class="item7"></div>
```

階層の展開の表現

```html
<!-- main>section*3 -->
<main>
	<section></section>
	<section></section>
	<section></section>
</main>

<!-- main>section*3+div.btn -->
<main>
	<section></section>
	<section></section>
	<section></section>
	<div class="btn"></div>
</main>

<!-- main>section*3^footer -->
<main>
	<section></section>
	<section></section>
	<section></section>
</main>
<footer></footer>

<!-- ul*3>li*3 -->
<!-- (ul>li*3)*2 -->
<ul>
	<li></li>
	<li></li>
	<li></li>
</ul>
<ul>
	<li></li>
	<li></li>
	<li></li>
</ul>
<ul>
	<li></li>
	<li></li>
	<li></li>
</ul>
```
emmet abbreviation最高ー。結果を示してくれるなんて。

#暗黙的な補完機能

```html
<!-- .container -->
<div class="container"></div>

<!-- ul>.item*5 -->
<ul>
	<li class="item"></li>
	<li class="item"></li>
	<li class="item"></li>
	<li class="item"></li>
	<li class="item"></li>
</ul>

<!-- table>.row*2>.col*4 -->
<table>
	<tr class="row">
		<td class="col"></td>
		<td class="col"></td>
		<td class="col"></td>
		<td class="col"></td>
	</tr>
	<tr class="row">
		<td class="col"></td>
		<td class="col"></td>
		<td class="col"></td>
		<td class="col"></td>
	</tr>
</table>
```

#formに関するタグを展開

```html
<!-- form:post -->
<form action="" method="post"></form>

<!-- input:te -->
<input type="text" name="" id="">

<!-- input:r -->
<input type="radio" name="" id="">

<!-- input:c -->
<input type="checkbox" name="" id="">

<!-- select>[value="item$"]*5 -->
<select name="" id="">
	<option value="item1"></option>
	<option value="item2"></option>
	<option value="item3"></option>
	<option value="item4"></option>
	<option value="item5"></option>
</select>
```

#margin,paddingを展開 CSS

```css
body {
	/* m */
	margin: 10px;
	/* p */
	padding: 10px;
	/* m10 */
	margin: 10px;
	/* m10p */
	margin: 10%;
	/* m10r */
	margin: 10rem;
	/* m10p20p */
	margin: 10% 20%;
	/* m10-20-30 */
	margin: 10px 20px 30px;
	/* mb10 */
	margin-bottom: 10px;
}
```
ら、楽すぎる〜！

#CSSのプロパティの展開

```css
body {
	/* fsz */
	font-size: ;
	/* cup */
	cursor: pointer;
	/* fwe */
	font-weight: normal;
	/* psa */
	position: absolute;
	/* psr */
	position: relative;
}
```
感覚的に書き込むだけ・・・凄すぎる。。。

#テキストを囲ってみよう

```html
<div class="container">
	<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis illum aliquid tempora repudiandae ab! Sed beatae perferendis illum vitae fugit accusamus iste saepe facere, ipsam id temporibus numquam nulla ex.</p>
</div>

<ul>
	<li>red</li>
	<li>blue</li>
	<li>pink</li>
</ul>
```

**command + shift + p　でコマンドパレット
wrapで検索、全体か個々かを選択。
```ul>li*\t``` ulの下にliを。* 個別に。|t 頭についてる記号や数字を取り除く。**
![スクリーンショット 2020-08-31 14.20.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/595730/bd5fb9af-8889-6c15-d36c-be754cf77658.png)

#画像に関する譲歩を取得・計算

```html
<img src="img/logo.png" alt="" width="650" height="108">

<img src="img/logo.png" alt="" width="650*2" height="108">
```

![スクリーンショット 2020-08-31 14.25.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/595730/2e8ea30c-ff74-b721-bc49-5b0842d41b8f.png)

![スクリーンショット 2020-08-31 14.28.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/595730/343b286a-7b84-33f6-53f8-cb6bc726a23c.png)

#Emmet記法のカスタマイズ

![スクリーンショット 2020-08-31 14.35.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/595730/bb8dc9ff-c658-2128-c5b5-184b92f5b187.png)
![スクリーンショット 2020-08-31 14.35.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/595730/72554f9f-d991-0bb2-7a6c-3884df277914.png)
![スクリーンショット 2020-08-31 14.35.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/595730/c947e907-376f-cd24-7e6d-893ccd68bea0.png)

```html
<!-- mt -->
<mytag></mytag>
```

これは上級者向けと言われたが、案外使えるのでは・・・？