YouTubeでEmmetについて一通り解説しました。この記事では、その動画で使用しているコードや情報を記載しています。動画と併せてご覧ください。

Emmet入門

1. ! = HTMLの文書宣言など、雛形を記述する

2. div = <div></div>を記述する

3. a = <a href=""></a>を記述する

4. div#target = <div id="target">|</div>を記述する

5. div.container = <div class="container">|</div>

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

7. a[title="My Site"] = <a href="" title="My Site"></a>

8. div[data-id="5" title="My Site"] = <div data-id="5" title="My Site"></div>

9. p{hello} = <p>hello</p>

複数の要素を展開する

1. p*3 = <p></p> <p></p> <p></p> (それぞれ改行される）

2. div.item*2 = <div class="item"></div> <div class="item"></div> (それぞれ改行される）

3. div.item$*3 = <div class="item1"></div> <div class="item2"></div><div class="item3"></div>

4. div.item$$$*3 = <div class="item001"></div> <div class="item002"></div> <div class="item003"></div>

5. div.item$@3*2 = <div class="item3"></div> <div class="item4"></div>

階層を表現する

1. main>section*3 = <main> 　<section></section> 　<section> </section>　　　　<section></section> 　</main>

2. main>section*2+div.btn = <main> <section></section><section></section><div class="btn"></div></main>

3. main>section*2^footer = <main><section></section><section></section></main><footer></footer>

4. (ul>li*2)*2 = <ul><li></li><li></li></ul> <ul><li></li><li></li></ul>

暗黙的な補完機能

1. .container = <div class="container"></div>

2. ul>.item*2 = <ul><li class="item"></li><li class="item"></li></ul>

3. table>.row*2>col*2 = <table><tr class="row"><col><col></tr><tr class="row"><col><col></tr></table>

formに関するタグを展開する

1. form:post = <form action="" method="post"></form>

2. input:t = <input type="text" name="" id="">

3. input:r = <input type="radio" name="" id="">

4. input:c = <input type="checkbox" name="" id="">

5. select>[value="item$"]*2 = <select name="" id=""><option value="item1"></option><option value="item2"></option></select>

CSS、margin、paddingを展開する

1. m = margin: ;

2. p =padding: ;

3. m10 = margin: 10px;

4. m10p = margin: 10%;

5. m10r = margin: 10rem;

6. m10p20p = margin: 10% 20%;

7. m10-20-30 = margin: 10px 20px 30px;

8. mb10 = margin-bottom: 10px;

CSSプロパティの展開

1. fz10 = font-size: 10px;

2. cur = cursor: pointer;

3. fwb = font-weight: bold;

4. ps = position: relative;

5. psa = position: absolute;

Emmetでテキストを囲う

1. <p>lorem</p> = <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, veritatis modi iure possimus accusamus rem officia in debitis saepe voluptatem ex reprehenderit consequatur harum itaque aut, ea id. Tempora, saepe!</p>

2. select -> command shift p -> wrap -> wrap with abbreviation -> .conatiner = <div class="container"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus cumque assumenda esse quisquam dolorum odio quibusdam dolore commodi eius! Delectus reiciendis unde quo quae temporibus architecto eaque mollitia pariatur praesentium.</p></div>

3. -red -blue -pink -> select -> command shift p -> wrap -> wrap with abbreviation -> ul>li*|t = <ul><li>red</li><li>blue</li><li>pink</li></ul>

画像に関する情報を取得する

1. img = <img src="" alt="">

2. 画像のアドレスをコピー->srcに貼り付け-> command shift p -> update -> update image size -> *2 -> command shift p -> evaluate

Emmet記法をカスタマイズ

1. command n -> 

{

 "html": {

"snippets": {

"mt": "<mytag>${1}</mytag>"

}

}

}

1. ~/Desktop/MyEmmetに保存

2. command , -> emmet -> extensions path