【初心者必見】Emmetの使い方を徹底解説＠HTML編
こんにちは！ニタマサ＝NewM(@NewM07x2)です。
HTML とかCSSのコードを書いているんだけど、打ち間違いとか、量書くのが大変…何かいい方法ないかな…？
こんな声に答えます。
結論から言いますと、あります。
これにはEmmetと呼ばれれる記法を使用していきます。
そもそもEmmetとはHTMLとCSSを記述する際の短縮記法のことです。
これをマスターするとコードを書くのが楽になりますし、ミスも減ってきます。
本記事では”HTML”のみに特化した記事となりますので、CSS に関して学びたい方は以下の記事をご覧ください！
それでは、書き方などをみていきましょう。
目次
【事前準備】Emmetが利用できる環境「Visual Studio Code」
それでは、まずEmmet利用できる環境設定から始めます。
とはいえ「Visual Studio Code」であれば、標準でEmmetが利用できるので、
「Visual Studio Code」を使用していただければもうOKです。
まだ、インストールされていなかったら、下記のボタンから、公式HPに飛べるので、ダウンロードしておいてください！※無料です
また、「Sublime Text」「Atom」もEmmetの拡張機能を導入することで使えるようになるので、導入をしてみてください！※無料です
Emmetの使用方法
まずはHTML のファイルを作成して、「Visual Studio Code」で開きましょう。
基本的な書き方は
「要素」 + Tab
です。
？？？
って方もいるかもなので、具体的にみていきましょう。
「要素」とは具体的にpタグやdivタグといった物になります。
例えば、
<div class="content">
<dl>
<dt>ジョン・レノン</dt>
<dd>１９４０年１０月９日リヴァプール生まれ。</dd>
<dt>ポール・マッカートニー</dt>
<dd>１９４２年６月１８日リヴァプール生まれ。</dd>
</dl>
</div>こんな感じのやつです。
これを1行ずつ書いていくので、大変ですし、インデントをするのも多少面倒です。
Emmetを利用して書くと以下のようになります。
div>dl>(dt+dd)*2
これで上記の要素の型が出来上がります。
では１つ１つ基本を解説していきます。
パターン①：要素>要素 で階層を指定
まず、”＞”を用いて階層を指定していきます。
書き方としては親要素>子要素となるのですが、
具体的には以下のようになります。
div>div
↓
<div>
<div></div>
</div>divの中にdivを書きたい時などに使用されます。
パターン②：要素＋要素 で隣接を指定
続いて”＋”を用いて隣接を指定していくパターンです。
隣接とは同じ階層の意味ですが、具体例をみた方が早いのでみていきましょう。
dl>dt+dd
とかですね。
完成例は
<dl>
<dt></dt>
<dd></dd>
</dl>こんな感じです。
dl要素の中に、dtタグとddタグが出来上がります。
なお、dtタグとddタグの組み合わせを複数作成したい場合は下記のような書き方も出来とても便利です。
dl>(dt+dd)*2
これはdtタグとddタグの組み合わせを２つ作成すると言った意味合いになります。
完成例は以下になります。
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>なお、”（）”で括ることによってグループ化することができます。
パターン③：ひとつ上の階層へ戻る
ちょっと特殊なパターンです。
div①>div②と書いて、div①の階層にdl要素を書きたいと思った時もわざわざ分けて書かずに一気に書くことが可能です。
この場合は”^”を使用します。
具体例は
div>h1+div^ul>li*3
とかです。
この意味はdiv要素の中にh1とdivを作成したのちに、１つ上のdivと同じ階層にul要素を作成すると言った意味になります。
完成例は以下です。
<div>
<h1></h1>
<div></div>
</div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>パターン④：要素にidを付与する
続いて要素にidを指定していくパターンです。
これも簡単ですので、覚えておきましょう。
idを付与するには”#”を使用します。
これはCSSでも指定に使用されているので、わかりやすいです。
具体例は以下になります。
dl#id>dt+dd
完成例は以下です。
<dl id="id">
<dt></dt>
<dd></dd>
</dl>パターン⑤：要素にclassを付与する
このパターンもidの付与と同じ考え方です。
ということは？
そです、”.”を使用してclassを付与していきます。
具体例は以下になります。
dl.class>dt+dd
完成例は以下です。
<dl class="class">
<dt></dt>
<dd></dd>
</dl>なお、classを複数付与させたい時は以下のような書き方になります。
dl.class.class2>dt+dd
完成例は以下です。
<dl class="class class2">
<dt></dt>
<dd></dd>
</dl>” * “を用いて複製させていきたいところですが、同じclassはいらないので、ここだけは地道にやってきます。
パターン⑥：連番を付ける
これも覚えておいた方が便利はパターンです。
” $ ”を使用することで、連番を振ることができます。
具体的には
div.item-$*3
と書きます。
itemクラスを連番で付与させると言った意味になります。
完成例はいかになります。
<div class="item-1"></div>
<div class="item-2"></div>
<div class="item-3"></div>パターン⑦：要素に属性をつける
idやclass以外の属性を使いたい場合は、” [] “内に属性を入力していきます。
具体的には
input[title=”title” alt=”image”]
のように記載していきます。
input[title=”title” alt=”alt”]
完成例はいかになります。
<input type="text" title="title" alt="alt">パターン⑧：要素にテキストを入れる
要素にテキストを入れたい場合は、” {} “を使用して書いていきます。
具体例は以下になります。
a{タグ}
完成例です。
<a href="">タグ</a>まとめ
いかがだったでしょうか。
今回はEmmetの使い方を初心者にもわかりやすく、具体例を交えながら解説してきました。
CSSの書き方もあるので、下記記事をご覧ください！
もし、この記事に関して分からない事や質問がある場合は、お問い合わせページまたはTwitterのDMまで連絡を頂ければと思います！！！
（ついでにフォローしていただけると最高に嬉しいです笑）
では！See you again!(´∀｀)
