Emmetとは？これだけ知っておけばOK！
はじめに
Emmet は使えるようになると、わざわざコードを 1 から全部記述しなくてもよくなるので、非常にコーディングの効率化が図れるようになリます。
そんな Emmet について、まとめてみました！
Emmet とは？
Emmet とは、HTML や CSS を省略記法で入力できるプラグインです。
Visual Studio Code や SublimeText、Atom 等の様々なエディタで使用することができます。
特に Visual Studio Code では Emmet が標準搭載されているので Visual Studio Code を使用する。という方もいるくらい、便利な機能です。
Emmet を使うと、「margin-bottom: 80px;」を「mb80」と入力するだけで出せるようになるので大幅にキーの入力数を減らすことができるため、コーディング効率化のためには必須のツールとなっています。
Emmet 記述方法
Emmet の記述方法は非常に簡単です。
以下の 3 つの形を覚えておけば問題なく使用することができるので、それぞれ見ていきましょう。
【基本形】要素 + Return or Tab
基本的には「h2」や「li」等の要素を入力した後に、「Return」キーか「Tab」キーを押すと要素のタグと閉じタグが入力されます。
li
と入力し「Return」キーか「Tab」キーを押すと以下のコードが展開されます。
<li></li>
よく使う基本形なので、覚えておきましょう。
【階層】要素 > 要素
こちらは「list」等でよく使う形になります。
ul>li
と入力し「Return」キーか「Tab」キーを押すと以下のコードが展開されます。
<ul>
<li></li>
</ul>
階層があるコードを記述したい時にはこの形で記述しましょう。
【複製】要素 * 数字
こちらも「list」等、複数同じ要素を使うコードでよく使う形になります。
ul>li*3
と入力し「Return」キーか「Tab」キーを押すと以下のコードが展開されます。
<ul>
<li></li>
<li></li>
<li></li>
</ul>
複数同じ要素を使うコードは何回も記述するのは大変なので、この形で記述しましょう。
よく使う HTML のショートハンド
基本的によく使う HTML ショートハンドを項目毎にまとめました。
ID、Class 関連
「.」でクラス付与
展開するコードにクラス名を付与させたい場合は、
div.class-name
と入力し「Return」キーか「Tab」キーを押すと以下のコードが展開されます。
<div class="class-name"></div>
「#」で ID 付与
展開するコードに ID 名を付与させたい場合は、
div#id-name
と入力し「Return」キーか「Tab」キーを押すと以下のコードが展開されます。
<div class="id-name"></div>
「div」の場合は「div.クラス名」、「div#ID 名」を「.クラス名」、「#ID 名」と短縮することもできるので、覚えておきましょう！
list 関連
リンク付きの list
展開する list のコードにリンクを付与させたい場合は、
ul>li*3>a
のように末尾に「>a」を入力し「Return」キーか「Tab」キーを押すと以下のコードが展開されます。
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
連番付きの list
展開する list のコードのクラス名に連番を付与させたい場合は、
ul>li.list$*3
のように「$」を入力し「Return」キーか「Tab」キーを押すと以下のコードが展開されます。
<ul>
<li class="list1"></li>
<li class="list2"></li>
<li class="list3"></li>
</ul>
テキスト関連
テキストを挿入
展開するコードにテキストを挿入させたい場合は、
h2{タイトル}
のように要素の後に「{}」でテキストを囲んで入力し「Return」キーか「Tab」キーを押すと以下のコードが展開されます。
<h2>テキスト</h2>
ダミーテキストを挿入
展開するコードにダミーテキストを挿入させたい場合は、
lorem
を入力し「Return」キーか「Tab」キーを押すと以下のダミーテキストが展開されます。
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dicta, ut harum
asperiores fugit cum facere unde voluptates vitae necessitatibus tempora! Ipsum
quos, nemo sequi unde esse placeat dolor quia praesentium.
よく使う CSS のショートハンド
基本
基本的によく使うショートハンドは以下のようなものです。
| ショートハンド | 出力結果 |
|---|---|
| db | display: block; |
| dib | display: inline-block; |
| dn | display: none; |
| w | width: ; |
| maw | max-width: ; |
| miw | min-width: ; |
| h | height: ; |
| mah | max-height: ; |
| mih | min-height: ; |
| bg | background: ; |
| bd | border: ; |
また、各プロパティの数値単位は以下のように入力します。
| ショートハンド | 出力結果 |
|---|---|
| w14 | display: block; |
| w50p | display: inline-block; |
| w10r | display: none; |
| w10e | width: ; |
padding、margin 関連
padding、margin 関連は 1 番登場回数が多いので、必ず覚えておきましょう。
| ショートハンド | 出力結果 |
|---|---|
| p | padding: ; |
| pt | padding-top: ; |
| pr | padding-right: ; |
| pb | padding-bottom: ; |
| pl | padding-left: ; |
| m | margin: ; |
| mt | margin-top: ; |
| mr | margin-right: ; |
| mb | margin-bottom: ; |
| ml | margin-left: ; |
最初にもあったように、「margin-bottom: 80px;」を出したい場合は、
mb80
と入力し「Return」キーか「Tab」キーを押すと以下のコードが展開されます。
margin-bottom: 80px;
また、margin 等でよく使われる複数の値を入力したい場合は、「-」で値を区切ります。
m10-20-10-30
と入力し「Return」キーか「Tab」キーを押すと以下のコードが展開されます。
margin: 10px 20px 10px 30px;
font 関連
font 関連でよく使われるショートハンドです。
| ショートハンド | 出力結果 |
|---|---|
| c | color: ; |
| fz | font-size: ; |
| fw | font-weight: ; |
| fwb | font-weight: bold; |
| ff | font-family: ; |
また、各プロパティの数値単位は以下のように入力します。
| ショートハンド | 出力結果 |
|---|---|
| fz14 | font-size: 14px; |
| fz1.6r | font-size: 1.6rem; |
| fz1.6e | font-size: 1.6rem; |
text 関連
text 関連でよく使われるショートハンドです。
| ショートハンド | 出力結果 |
|---|---|
| ta | text-align: ; |
| tac | text-align: center; |
| td | text-decoration: ; |
| tdn | text-decoration: none; |
| lh | line-height: ; |
| lts | letter-spacing: ; |
「text-decoration: none;」が「tdn」だけで展開させられるのは時間短縮になりますね。
Flexbox 関連
Flexbox 関連でよく使われるショートハンドです。
| ショートハンド | 出力結果 |
|---|---|
| df | display: flex; |
| ai | align-items: ; |
| aic | align-items: center; |
| fxw | flex-wrap: ; |
| fxd | flex-direction: ; |
| jc | justify-content: ; |
| jcc | justify-content: center; |
「justify-content: center;」を出す時にはめちゃくちゃ助かります。
Emmet チートシート
いままで紹介したもの以外にも、まだまだ沢山便利なショートハンドはあります。
Emmet にはチートシートもあるので短縮したいコードを探してみて、それがあれば次回から使う。
そうやって 1 つずつ Emmet に慣れて覚えていきましょう！
最後に
いかがだったでしょうか？
今回、Emmet について非常に便利だと感じていただけたかと思います。
一度、Emmet を使うと元のベタ書きには戻れないほど、Emmet の魅力にハマっていきます。
無料ですしコーディングでの作業効率が爆上がりになりますので、是非、この機会に導入してみてください！
Discussion