【コーディング爆速】Emmetの使い方【HTML編】

今回はHTMLやCSSを効率的に書くことができる便利なツール
Emmetについてご紹介したいと思います。

こちらの記事では、HTMLの書き方についてまとめたいと思います。

どうやってテキストエディタに導入するの？

Visual Studio Codeの場合は、
エディタをダウンロードした時点でemmetが使える状態になっています。

それ以外のエディタでは、プラグインをダウンロードし導入する場合が多いです。

emmetの基本の使いかた

基本的にemmetのショートコードを書いて「tabキー」を押すとコードが展開されます。

HTMLでのemmetの使いかた

HTMLで使う頻度が高そうな書きかたを11個をご紹介します。

【1】!：HTMLの雛形を作る

headタグやbodyタグといったHTML全体の雛形を作ってくれます。

【2】タグ名：タグの閉じタグを補完

h2

<h2></h2>

【3】タグ名 .クラス名：クラス名を補完

h2.section-title

<h2 class="section-title"></h2>

【4】タグ名#id名：アイディ名を補完

h2#section-title

<h2 id="section-title"></h2>

【5】タグ名.クラス名#id名：クラス名とアイディ名を補完

section.section#section-a

<section class="section" id="section-a"></section>

【6】タグA > タグB：Aの中にBを子要素として作る

ul>li

<ul>
  <li></li>
</ul>

【7】タグ * 数字：数字分を掛け算したタグを作る

li*3

<li></li>
<li></li>
<li></li>

【8】タグA + タグB：AとBを兄弟要素にする

h2+p

<h2></h2>
<p></p>

【9】タグ名{○○}：タグ内のテキストを補完

p{これはテストです}

<p>これはテストです</p>

【10】タグ名{$}：連番を作る

li*3{item$}

<li>item1</li>
<li>item2</li>
<li>item3</li>

【11】|c(パイプc)：閉じタグのコメントを補完する

【展開前の例】 h2.section-title|c

h2.section-title|c

【展開後の例】

<h2 class="section-title">
</h2><!-- /.section-title -->

以上、HTMLのEmmetの使いかたでした。

またこちらの記事では、
CSSでのEmmetの使用例についてまとめているのでよろしければご覧ください。

最後までお読みいただき、ありがとうございました。

【コーディング爆速】Emmetの使い方【CSS編】今回はHTMLにつづいて、CSSで使う頻度が高そうなEmmetを 自分なりにグループ分けしてまとめてみたいと思います。...