【HTML/CSS】つぶやきemmet【省略記法】
Categories:CSSHTMLプログラミング
投稿者: ぺいじ |
投稿日: 10月 7, 2021

emmet とは

  • HTMLやCSSをショートカット的に、簡潔に記述するツールです。
  • VScodeなど、特定エディタ向けのプラグインとして提供されています。
  • VScodeのsetting.jsonでは、タグ展開に関する設定を以下のように追記することができます。
  // Emmetの候補を表示 
  "emmet.showSuggestionsAsSnippets": true, 

  // TAB キーで Emmet を展開できるようにする
  "emmet.triggerExpansionOnTab": true,

HTMLでのemmet記法

１つの要素の展開

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
CSSemmetHTMLプログラミング省略記法

返信がありません

コメントを残す

メールアドレスが公開されることはありません。