投稿日:2024/10/25 最終更新日:2024/10/25
Emmetのよく使うHTML用チートコード
Emmetとは？
Emmet（エメット）とは、HTMLやCSSのコーディングを効率的に行うためのツールを指します。
例えば、下記の呪文のような書き方をエディターですると、
.container>.item>p{テスト}
このようなDOMを自動的に生成してくれます。
<div class="container">
<div class="item">
<p>テスト</p>
</div>
</div>また、CSSでは同じように下記の書き方をすると、
bgc#000このようなCSSを出力してくれるわけです。
background-color: #000;
縦に長いページを作成したり、複数ページを構成するサイトのコーディングには、Emmetを活用することで効率をグッと上げる事ができます。
HTML用テンプレート
1. HTMLテンプレートを出力する：!
まずはこれについてです。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>地味にコピペで持ってくるのもダルいし、手打ちで書くのも時間がかかってしまいますが、Emmetを使えば、
!
コレのみで出力されます。
2. divタグを作る
まず特徴的なのはEmmetではid属性やclass属性をつける場合にdivと書く必要がありません。
このようにid属性とclass属性のみで書いた場合、
#item.itemちゃんとdivで出力されます。
<div id="item" class="item"></div>ただし、属性のないdivを出力する場合はdivを書かなければ出力されません。
3. テキストを反映する：{}
このようなpタグのテキストを反映したい場合は、
<p class="text">テスト</p>
下記のように書くことで出力できます。
p.text{テスト}
4. 子要素を反映する：>
このような親子要素のDOM生成する場合は、
<div id="item" class="item">
<p class="text">テスト</p>
</div>下記のように書くことで出力できます。
#item.item>p.text{テスト}5.同じ要素を複数個作る：＊
例えば、li要素などは複数個反映する事がほとんどだと思います。
<ul class="lists">
<li class="list">リスト1</li>
<li class="list">リスト2</li>
<li class="list">リスト3</li>
</ul>この場合は下記のように書けば反映できます。
ul.lists>li.list{リスト$}*3
ちなみに連番などは数字の箇所を$に置き換えてあげることで自動的に反映してくれます。
6. 兄弟要素を作る：+ ^
兄弟要素とは同階層の要素のことを指します。
例えば、このような兄弟要素を作成する場合には、
<div class="item_first"></div>
<div class="item_second"></div>下記のように+マークで繋いであげると兄弟要素として出力してくれます。
.item_first+.item_second
ちなみに、子要素内で兄弟要素を作る場合は、
<div class="item">
<h2 class="head">見出し</h2>
<p class="text">テスト</p>
</div>このように^で繋いであげる必要があるので注意です。
#item.item>h3.head{見出し}^p.text{テスト}7. 属性を反映する：[]
属性とはDOMにおいて特定の動作や内容を反映するための値を指します。
例えば、aタグのhref属性やtarget属性がそれに当たります。
<a href="https://www.yahoo.co.jp/" target="_blank">リンク</a>この場合は下記のように書きます。
a[href="https://www.yahoo.co.jp/"][target="_blank"]{リンク}
これはあまりEmmetの良さが出ない部分ではありますので、VSCodeの予測変換の方が早いかもしれません。
8. まとめ
最後に全部使って下記のようなDOMを作るには、
<div class="container">
<div class="item">
<h2 id="head" class="head" 見出し=""></h2>
<ul class="lists">
<li class="list">リスト1</li>
<li class="list">リスト2</li>
<li class="list">リスト3</li>
</ul>
</div>
<div class="image"><img src="画像パス" alt=""></div>
<p class="text" テキスト=""></p>
</div>こんな書き方になります。
.container>.item>h2#head.head[見出し]+ul.lists>li.list{リスト$}*3^^.image>img[src="画像パス"]^p.text[テキスト]ちょっと長いですが、こちらを参考にEmmetを覚えてもらえるといいかなと思います。
補足
そのほかにもグループでまとめる方法などがありますが、筆者の場合ここに書かれているもの以外使う事がありません。
もし、コレ便利だよという書き方があれば、ぜひ教えて欲しいです。
