目次
基本的な使い方
Emmetの基本的な使い方を説明します。
STEP
Emmetのコマンドを記載する
まずはEmmet用のコマンドを入力しましょう。
例
「div」タグを作成する場合は次を入力する。
div
STEP
コードを変換する
「Return」キーor「Tab」キーを押下してSTEP1のコマンドを実際のコードに変換しましょう。
例
STEP1の例を実行後に「Return」キーor「Tab」キーを押下すると次のようにコードに変更される。
<div></div>
コマンドの紹介
「基本的な使い方」で紹介した内容からお分かりの通り、STEP1のコマンドを変更することで、様々なコード作成時間を短縮できるようになります。そこで、どのようなコマンドがあるのかを紹介していきます。
シンプルなタグを作成
タグ名を記載することで、タグ名を設定したタグを作成できます。
コマンド例
div
生成されるコード
<div></div>
親子関係のタグを作成する
ulタグ、liタグのように親子関係のあるタグを作成する。
コマンド例
ul>li
生成されるコード
<ul>
<li></li>
</ul>
複数の同一タグを作成する
「*」+「数字」を入力することで、同一タグを指定数字分作成することができます。
コマンド例
ul>li*2
生成されるコード
<ul>
<li></li>
<li></li>
</ul>
コメント