HTML,CSSのコードを記述する際に、１文字１文字キーボードで入力していませんか？
Emmetを習得すれば、そのようにコードを記述する時間から解放されサクサクコードを記述することができるようになります。
この記事では、webサイト制作には必須ともいえる省略記法「Emmet」について説明していきます
Emmetをマスターして、コーディング速度や学習効率をあげていきましょう！
目次
Emmet について学ぼう
まずは、Emmet について簡単に説明していきます。
Emmet とは
Emmetとは、HTML,CSSのコードを短縮して記述することができる省略記法のことをいいます。
元々はZen-Codingと呼ばれていましたが、今では「Emmet」という呼び方が主流になっています。
VSCodeを使っている方は標準で使うことができるようになっている機能になっていますので、今回の記事を読んでアウトプットしてみましょう。
HTMLをEmmetで記述する
それでは早速、Emmetを使ったHTMLの記述について説明していきます。
まずは、イメージを掴むために簡単なEmmetから紹介します。
VSCodeでhtmlファイルを開いて、一緒に記述してみましょう。
div.sample
<div class="sample"></div>HTMLファイルに、「div.sample」と記述しEnterキーを押すと、クラス属性の付いた開始タグと終了タグが出力されます。
このようにEmmetは、HTMLのコードを簡単に記述することができます。
次は、Emmetの書き方の例について紹介していきます。
タグを出力する
div
<div></div>「タグ名」を記述することで、開始タグと終了タグを出力することができます。
１文字１文字打たなくて良いので、この書き方だけでも感動しますが、今後スタイルを当てることを考えるとクラス属性も一緒に記述したいです。
そのため、大事な書き方は次の例になります。
クラス属性を付与する
div.sample
<div class="sample"></div>
先ほども記述しましたが、この記述の方法はEmmetの基本です。
「タグ名.クラス名」を記述することで、上記のようにコードを出力することができます。
「.（ドット）」はCSSのclassセレクタをイメージするとわかりやすいかと思います。
Emmetは、最低限でもこの書き方だけでも覚えておきましょう。
後ほど後述するEmmetの書き方はおまけと言ってもいいくらい大事な書き方になります。
この書き方ができるだけで、普段のコーディングの速度が上がります。
div.sample01.sample02
<div class="sample01 sample02"></div>１つ目のクラス名の後ろに「.（ドット）」を記述して、２つ目のクラス名を記述することで、マルチクラスの状態でコードを出力することも可能です。
id属性を付与する
div#sample
<div id="sample"></div>「タグ名#id名」を記述することで、上記のようにコードを出力することができます。
「#（シャープ）」はCSSのidセレクタをイメージするとわかりやすいかと思います。
ネストして出力する
div>p
<div>
<p></p>
</div>「親要素にしたいタグ名 > 子要素にしたいタグ名」を記述することで、上記のようにタグの中に、子要素としてタグを出力することができます。
兄弟要素として出力する
p+p
<p></p>
<p></p>
「タグ名 + タグ名」を記述することで、上記のようにタグの中に、兄弟要素としてタグを出力することができます。
タグを複製して出力する
li*3
<li></li>
<li></li>
<li></li>「複製したいタグ名 * 複製したい個数」を記述することで、上記のようにタグを複数して記述することができます。
「*（アスタリスク）」は、プログラミング言語において「掛け算」の意味を持ちます。
タグの中にテキストを出力する
p{テキスト}
<p>テキスト</p>
「タグ{ 出力したいテキスト }」を記述することで、上記のようにタグの中にテキストを出力することもできます。
ここまででよく使用するHTMLのEmmetの記述の方法を紹介しました。
Emmetは慣れてくると上記の例を組み合わせることで、さらにコーディングの速度が上がっていきます。
CSSをEmmetで記述する
次は、CSSのEmmetの記述の方法について紹介していきます。
結論から先に申し上げておくと、CSSのEmmetは全て暗記する必要はありません。
プロパティの頭文字と途中の文字を覚えておくだけで大丈夫です。
VSCodeの予測変換も頼りにしてEmmetを記述してください。
プロパティと値を出力する
.sample {
w100
width: 100px;
}「プロパティの頭文字」を記述することで、該当するプロパティを出力することができます。
.sample {
tac
text-align: center;
}「プロパティの頭文字と値の頭文字」を記述することで、該当するプロパティと値の両方を出力することもできます。
.sample {
fs
font-style: italic;
fz
font-size: 20px;
}一部のプロパティは頭文字だけで記述すると、意図しないプロパティが該当してしまうことがあるので注意が必要です。
font-sizeと打ちたかったら「fz」と記述します。
値を複数出力する
.sample {
m0-auto
margin: 0 auto;
}
「-（ハイフン）」を入れることで、半角スペースを開けることができます。
なので、値を２つ以上記述する際は、-で値を繋いであげましょう。
単位をつける
.sample {
w100
width: 100px;
w100px
width: 100px;
w100p
width: 100%;
}
単位は何もつけないで記述すると「px」の状態で出力されます。
数値の後に「p」を記述することで、「%」として出力することができます。
Emmetの考え方をマスターしよう
今回は、コードを記述する効率を格段に上げるEmmetという省略記法を説明しました。
Emmetは、基本的な「タグ名.クラス名」を覚えたら、少しずつ記述できる方法を増やしていけば大丈夫です！
いっぺんにできるようになる必要はありません。
慣れてきたら次のEmmetを学んでいけば大丈夫です！
エメットのチートシートも存在するので、気になった時にみられる状態にしておきましょう！
