前回の投稿で基本的なEmmetの使い方を記載しました。
次は更に複雑な使い方を前回のおさらいを含め学習していく。
使用環境：windows7
使用エディター：Brackets
Emmetチートシート:WebPage
HTML展開の基本形
まずは展開の基本としてEmmetを使えるエディターを開き下記のコードを展開しましょう。
<!-- 展開前 -->
!
<!-- 展開後 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
ここで思う人も多いかもしれませんが!で展開した場合、lang=enとなってしまっています。
これをlang=jaに変更出来るようにしましょう。
Bracketsの場合
まずBracketsのプラグインとして入っているEmmetの設定ファイルの場所を見つける必要があります。
まずはメニューにあるヘルプを押し、拡張機能のフォルダーを開くを選択します。
そうするとフォルダーが開くのでuserを選択。
インストールされている拡張機能のフォルダーが表示されるのでbrackets-emmetを選択。
node_modules,emmet,libと進み中にあるsnippets.jsonを開きます。
"variables": {
"lang": "en",
"locale": "en-US",
"charset": "UTF-8",
"indentation": "\t",
"newline": "\n"
},
この様に書かれている場所があるので探し、下記の様に変更しましょう。
"variables": {
"lang": "js",
"locale": "js-JP",
"charset": "UTF-8",
"indentation": "\t",
"newline": "\n"
},
これで保存し再起動してから!を再度試してみましょう。
無事lang="ja"でコードを書くことが出来ると思います。
他の方法もある
上記のようにBracketsの設定自体を変更する方法もありますが、記述を変更してlang="ja"と記載することも出来ます。
!!!
まずは上の様に書き展開をしてみましょう。
<!DOCTYPE html>
するとDOCTYPE宣言のみが記載されます。
一気に展開するのではなくパーツに分け記載していくことでもlang="ja"に変更することが可能です。
<!-- 展開前 -->
!!!+html[lang=ja]>meta:utf+title{title}+body
<!-- 展開後 -->
<!DOCTYPE html>
<html lang="ja">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>title</title>
<body>
</body>
</html>
正直これを毎回書いていくということはあまりないとは思いますが、用例の一つとして!!!やmeta:utfを覚えておくと良いかもしれません。
CHECK
meta:utfで展開されるものは<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
親要素に戻る
前回の投稿で子要素を追加する方法(div>img)、隣り合った要素を追加する方法(div+div)の2つは書きましたがhtmlを書いていくうえでその2つだけでは無理があります。
今回は親要素に戻る記述の仕方を学びましょう。
form>input:h[name=hoge$]*2+input:t+select[name=select]>opt[value=moge$]{MOGE$}*5^input:submit[value="送信"]
少し長い文章になりましたが、まずは上の文章をコピペして展開してみましょう。
<form action="">
<input type="hidden" name="hoge1">
<input type="hidden" name="hoge2">
<input type="text" name="" id="">
<select name="select" id="">
<option value="moge1">MOGE1</option>
<option value="moge2">MOGE2</option>
<option value="moge3">MOGE3</option>
<option value="moge4">MOGE4</option>
<option value="moge5">MOGE5</option>
</select>
<input type="submit" value="送信">
</form>
すると上の様なformが出来ると思います。
ここで注目してもらいたいのはselectからoptionへ子要素へ移った後にselectの隣の要素にinputを追加している点です。
その部分のみを抜き出して見てみましょう。
opt.moge$*5^input[type=submit value="送信"]
上記の様にselectの子要素としてoptionを作った後に^を記入することにより、1階層戻っていることがわかります。
次に極端な例を見てみましょう。
<!-- 展開前 -->
div.hoge1>div.hoge2>div.hoge3>div.hoge4^^^^div.hoge5
<!-- 展開後 -->
<div class="hoge1">
<div class="hoge2">
<div class="hoge3">
<div class="hoge4"></div>
</div>
</div>
</div>
<div class="hoge5"></div>
この様に^を連結して記載することで何階層も上にいくことが可能になります。
CHECK
今までに書いた以外にもEmmetにはhtmlを短縮して記述する方法が準備されています。input:hは<input type="hidden" name="">の様に便利に使える記述が多いのでチートシートを読んでみましょう。
色々な連番の付け方
前回記載したものでは連番は1からや01からのみの記載になっていました。
次は1以外の数字から始める方法を見ていきましょう。
<!-- @の後ろの数字から始まる連番 展開前 -->
select>opt[value=hoge$@5]{HOGE$}*5
<!-- 展開後 -->
<select name="" id="">
<option value="hoge5">HOGE1</option>
<option value="hoge6">HOGE2</option>
<option value="hoge7">HOGE3</option>
<option value="hoge8">HOGE4</option>
<option value="hoge9">HOGE5</option>
</select>
<!-- *の後ろの数字から1へ向かう連番 展開前 -->
select>opt[value=hoge$@-]{HOGE$}*5
<!-- 展開後 -->
<select name="" id="">
<option value="hoge5">HOGE1</option>
<option value="hoge4">HOGE2</option>
<option value="hoge3">HOGE3</option>
<option value="hoge2">HOGE4</option>
<option value="hoge1">HOGE5</option>
</select>
<!-- @-の後ろの数字になるように減る連番 展開前 -->
select>opt[value=hoge$@-10]{HOGE$}*5
<!-- 展開後 -->
<select name="" id="">
<option value="hoge14">HOGE1</option>
<option value="hoge13">HOGE2</option>
<option value="hoge12">HOGE3</option>
<option value="hoge11">HOGE4</option>
<option value="hoge10">HOGE5</option>
</select>
この例も使用頻度は低いかもしれませんが、Emmetの記法を覚えれば簡単にhtml要素を作っていくことが出来るようになります。
Emmetのhtmlについては文中にも書きましたが、短縮形等がたくさんあるので興味を持った方がいましたら記載したチートシートを見て、実際にエディターに打ち込み使用用途を各々考えるのがベストだと思います。
Emmetに関してはhtmlだけではなくCSSも記述することが出来る大変便利なものとなっているのでおすすめです。
参考ページ：Emmet Cheat Sheet