【EMMET 記法】 基本 よく使うやつ エメット記法 まとめ

【メリット】

■　コーディングが早くなります。
■　ミスが少なくなります。

【開発環境】

■ Mac OS catalina
■ VS code

【やっていきましょう】

HTML版

div.hoge

hoge.html

<div class="hoge"></div>

div#hoge

hoge.html

<div id="hoge"></div>

div*3

hoge.html

<div></div>
<div></div>
<div></div>

div>h2

hoge.html

<div>
  <h2></h2>
</div>

CSS版

h100

hoge.css

heigh: 100px;

w100

hoge.css

width: 100px;

bc

hoge.css

background-color: #fff;

c

hoge.css

color: #fff;

ta

hoge.css

text-align: center;

m10

hoge.css

margin: 10px;

p10

hoge.css

padding: 10px;

【まとめ】

■基本的に使うやつなので、他にもたくさんあります。
■実装５倍くらいのスピードになるので、是非

【合わせて読みたい】

■ 【メソッド集】　rails メソッド　まとめ　基礎　随時追加
https://qiita.com/tanaka-yu3/items/89abad875187494bec53

■ 【Javascript】 メソッド　まとめ　基礎基本コード　メモ
https://qiita.com/tanaka-yu3/items/2438798d159fa402b1d5

■ 【Rails new】Ruby on rails アプリケーション作成
https://qiita.com/tanaka-yu3/items/3fe1ed2852c6513d3583

■参考　emmet記法
https://tracpath.com/works/development/emmet-for-web-developers/