Contents
emmet とは
- HTMLやCSSをショートカット的に、簡潔に記述するツールです。
- VScodeなど、特定エディタ向けのプラグインとして提供されています。
- VScodeのsetting.jsonでは、タグ展開に関する設定を以下のように追記することができます。
// Emmetの候補を表示
"emmet.showSuggestionsAsSnippets": true,
// TAB キーで Emmet を展開できるようにする
"emmet.triggerExpansionOnTab": true,
HTMLでのemmet記法
1つの要素の展開
h1
↓
<h1></h1>
ネストした要素の展開
div>a
↓
<div><a href=""></a></div>
同じ要素の繰り返し
ul>li*3
↓
<ul>
<li></li>
<li></li>
<li></li>
</ul>
きょうだい要素の連続展開
h1+p
↓
<h1></h1>
<p></p>
要素へのID付与
div#thisIsId
↓
<div id="thisIsId"></div>
要素へのクラス付与
div.thisIsClass.content
↓
<div class="thisIsClass content"></div>
IDなどを連番にする
p.hoge$*3
↓
<p class="hoge1"></p>
<p class="hoge2"></p>
<p class="hoge3"></p>
要素にテキストを挿入する
a{this is link}
↓
<a href="">this is link</a>
CSSでのemmet記法
w100+h200+m10-0-10-10+tac
↓
width: 100px;
height: 200px;
margin: 10px 0 10px 10px;
text-align: center;
単位を指定しない場合、デフォルトでは「px」が指定されます。明示的に単位を指定すると他の単位にできます。
参考
- [Emmetで素早くHTML/CSSコーディング!書き方と対応ツールの紹介]()https://tracpath.com/works/development/emmet-for-web-developers/#i-8:title
返信がありません