Emmet とは？
Emmet（エメット）は、HTMLやCSSをより効率的に書くためのツールであり、元はZen Codingとして知られていました。
Emmetは、HTMLやCSSの略記法を使用して、素早く効率的にコードを書くことができます。
Emmetは、エディタやIDEで利用でき、多くの主要なエディタ、例えばVisual Studio CodeやSublime Textなどでサポートされています。
Emmetを使い始める方法
Emmetの使い方は、エディタでEmmetを有効にすることから始まります。
Visual Studio CodeでEmmetを有効にする方法：
- Visual Studio Codeを開く
- ファイルメニューから「ユーザー設定」を選択
- 「設定」画面が開くので、検索ボックスに「emmet」と入力
- 「Emmet:Trigger Expansion」の設定を検索
- 該当する設定が見つかったら、右側の編集アイコンをクリックして、ユーザー設定ファイルに設定を追加
- 設定の値を「tab」に変更
- これにより、Tabキーを押すことでEmmetの略記法を展開可能になる
- 保存して設定画面を閉じる
これにより、Emmetの略記法を使用してHTMLやCSSを書くことができます。
略記法を使用することにより、簡単にHTMLやCSSの構造を作成し、クラスやIDを追加し、テキストを挿入することができます。
Emmetの記法と出力の例
以下は、Emmetの具体的な記法と出力の例です。
HTML5の雛形を生成する：
! →
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>HTML要素を作成する:
div → <div></div>
p → <p></p>
要素にクラスを追加する:
div.container → <div class="container"></div>
p.lead → <p class="lead"></p>要素にIDを追加する:
div#header → <div id="header"></div>テキストを挿入する:
p>lorem10 → <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
子要素を追加する:
ul>li*3 → <ul>
<li></li>
<li></li>
<li></li>
</ul>
兄弟要素を追加する:
div+p+bq → <div></div>
<p></p>
<blockquote></blockquote>
CSSを読み込む：
link:css → <link rel="stylesheet" href="style.css">JavaScriptを読み込む：
script:src → <script src=""></script>Emmetは、HTMLやCSSの書き方を短縮するだけでなく、同じコードを何度も書く手間を省き、コーディングの時間を短縮し、より効率的な開発プロセスの実現を可能にします。
Emmat の記法をいくつか覚えて、ぜひ使ってみてください！
