自宅で学べるオンラインのプログラミングスクール TechAcademy
Emmetの基本的な使い方を紹介します。
目次
Emmet
マークアップの効率化できるツール
Emmetは省略記法を使うことで、HTML/CSSのコーディングをすばやく効率的に行うことができます。
省略記法を記入し「tab」キーで展開
Emmetは、省略記法を記入し「tab」キーを押すことでコードが展開します。
Emmetの導入方法
Emmetの導入するには、エディタの標準機能やプラグイン（拡張機能）を追加します。
- VsCode
- SublimeText
- WordPress
Emmet記法
| 記号 | 説明 | 記述例 |
| ! | HTMLの雛形 | ! |
| . | クラス名をつける | div.contents |
| # | idをつける | div#contents |
| > | 要素を入れ子にする | ul>li |
| + | 要素を同階層に展開 | header+div |
| * | 要素を複数展開 | li*3 |
| {} | テキストを | h1{タイトル} |
HTMLのひな形：！
「!」を展開すると一瞬でHTMLの雛形が作れます。
!
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>クラス名：.
クラス名をつけるには「.タグ」を記述します。
div.contents
<div id="contents"></div>
idをつける：#
idをつけには「#タグ」と記述します。
div#contents
<div id="contents"></div>
ネスト（入れ子構造） ：>
ネスト（入れ子構造） にするには、「>」を使います。
▽リストタグの例
ul>li
<ul>
<li></li>
</ul>
繰り返し：*
タグを指定した数字分繰り返すには「タグ*数字」を入力します。
▽liを3つ繰り返すリストの例
ul>li*3
<ul>
<li></li>
<li></li>
<li></li>
</ul>
▽dlの中にdt*2,dd*2を含む例
dl>dt*2+dd*2
<dl>
<dt></dt>
<dt></dt>
<dd></dd>
<dd></dd>
</dl>
要素を複数展開：＋
要素を複数展開するには、「タグ＋タグ」でつなぎます。
▽「header」内に「h1」と「nav」を含める例
header>h1+.nav
<header>
<h1> </h1>
<div class="nav"> </div>
</header>
テキスト挿入：{}
テキスト挿入を「{テキスト}」を記入します。
▽h1タグ内に「タイトル」を表記する例
h1{タイトル}
<h1>タイトル</h1>
Emmetのカスタマイズ
Emmetの設定は snippets.json というファイルに書かれています。
例えば、「!」で展開するHTML雛形を <html lang="en"> を <html lang="ja"> を変更にするなどもこのファイルから行います。
