Visual Studio Code:Emmet記法によるidやclassまたはその他属性の指定方法

  • ブックマーク
  • Feedly

id指定

cssを記述するときのように「div#target」と入力すると、

<div id="target"></div>

と出力される。

class指定

cssを記述するときのように「div.container」と入力すると、

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

と出力される。

idとclassの指定

idとclassの両方を入力するときは「div#reset.btn.disabled」と入力すると、

<div id="reset" class="btn disabled"></div>

と出力されます。

[]による指定

属性値を指定したい場合は大括弧を使って、「a[title=”My site”]」と入力すると、

<a href="" title="My site"></a>

と出力されます。

また「div[data-id=”5″ title=”My site”]」のように属性値を2つ指定すると、

<div data-id="5" title="My site"></div>

と出力されます。

{}による指定

中括弧を使って「p{hello}」と入力すると、

<p>hello</p>

と出力されます。

情報源

書籍

この記事を書いた人

羽沢 仁

羽沢 仁

業務系システムのエンジニアとして、コンサルティング会社で5年、事業会社の社内SEとして5年、フリーランスとして6年、要求定義、設計、開発、テスト、リリース対応の業務に携わってきました。来年からは、街の○○屋さんと直接つながって、ITツールを提供するサービスを開始します。詳しいプロフィールはこちらをご参照ください。