HTMLをコーディングしていく際に、開始・終了タグの不等号や、何度も出てくるリスト項目等を、そのまま打ち込むのは非常に手間がかかります。
VSCode等のモダンなエディタでは標準でEmmetが使えるのでバンバン使っていきましょう！！
その他のエディタでも拡張機能等でEmmetが使えるようになるものが多いです。
この記事では、よく使うEmmet記法について紹介します。
基本
[Emmet省略記法] + Tab等のショートカットキー(環境により異なります)で、その要素が展開されます。
以下、省略記法について記述しています。
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>単一の要素
単一の要素を展開したい場合は[タグ名]
下記の例のようになります。
- 省略記法
p- 展開される要素
<p></p>クラス・IDの付与
クラス名を付与したい場合は[タグ名].[クラス名]
- 省略記法
p.txt- 展開される要素
<p class="txt"></p>IDを付与したい場合は[タグ名]#[ID]
- 省略記法
p#txt- 展開される要素
<p id="txt"></p>要素のネスト(子要素の追加)
要素のネストをしたい場合は[タグ名]>[タグ名]
- 省略記法
p>a- 展開される要素
<p><a href=""></a></p>要素の繰り返し
同じ要素を任意の回数繰り返したい場合は[タグ名]*n
- 省略記法
li*5- 展開される要素
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>要素のクラス名に連番をつける
クラス名に$を含めて、[タグ名][クラス名-$]*nのように要素の繰り返しを行うと連番を割り振ることができます
- 省略記法
li.list-$*3- 展開される要素
<li class="list-1"></li>
<li class="list-2"></li>
<li class="list-3"></li>兄弟要素を追加する
兄弟要素を追加したいときは[タグ名]+[兄弟にしたいタグ名]
- 省略記法
h2+p- 展開される要素
<h2></h2>
<p></p>グループ化
ここまでの記法は組み合わせることが出来るが、()をつけると、括弧内の要素がグループとして扱われる
例えば、ul>li*3は
<ul>
<li></li>
<li></li>
<li></li>
</ul>となるが、(ul>li)*3は
<ul>
<li></li>
</ul>
<ul>
<li></li>
</ul>
<ul>
<li></li>
</ul>となる
Emmet記法を組み合わせて、ヘッダーを書いてみる
次のようなヘッダーをEmmetで書いてみる
ヘッダーの中に、
h1見出しと、兄弟要素としてグローバルナビゲーションが5個ほしい ヘッダーはクラス名header、h1はID名title、ナビゲーションはクラス名gnavにしたい
- 省略記法
header.header>h1#title+nav.gnav>ul>(li>a)*5- 展開される要素
<header class="header">
<h1 id="title"></h1>
<nav class="gnav">
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</nav>
</header>