見出し画像

Emmet｜エメット を勉強する

Natsuki | Programming UX design

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

いいなと思ったら応援しよう！