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