開発スピード倍増！Emmet記法でHTML/CSSコーディングを爆速化

コーディングをしていて、同じタグやプロパティを繰り返し書くことが面倒だと感じたことはないですか？
そんな時に頼りになるのがEmmetです！
一緒にEmmetを学んで、コーディングのスピードを劇的にアップさせましょう！

公式サイトはこちら

Emmet — the essential toolkit for web-developers

Emmetとは？

---

Emmetは、ウェブ開発者がHTMLやCSSを効率的に記述するための記法です。Emmetは、HTMLやCSSのコードを短いエイリアスに展開して書くことができるため、コーディングの速度と生産性を向上させることができます。

<!-- 展開前 -->

ul#parent.test>li{hello}.children-$*6

<!-- 展開後 -->

<ul id="parent" class="test">
  <li class="children-1">hello</li>
  <li class="children-2">hello</li>
  <li class="children-3">hello</li>
  <li class="children-4">hello</li>
  <li class="children-5">hello</li>
  <li class="children-6">hello</li>
</ul>

Emmetを使ったHTMLの記入例

HTML編

---

■一つの要素

要素名だけでタグが展開できます。(Return もしくは Tabで展開)

展開前
div
 
展開後
<div></div>

■同じ要素を繰り返す

*(アスタリスク)で指定した数だけ要素を繰り返します。

展開前
li*3
 
展開後
<li></li>
<li></li>
<li></li>

■要素をネストする

> で階層構造を展開できます。

展開前
main>div>img
 
展開後
<main>
  <div><img src="" alt=""></div>
</main>

■クラス・ID

.(ドット)でクラス名
＃(シャープ)でID名を指定できます。
タグがdivの場合は省略ができます。
.で繋ぐことで複数クラスを指定することもできます。

展開前
.test.content
p#app
 
展開後
<div class="test content"></div>
<p id="app"></p>

■連番を振る

$*でtest-1, test-2, test-3…..のように連番を振ることができます。

展開前
li.test-$*3
 
展開後
<li class="test-1"></li>
<li class="test-2"></li>
<li class="test-3"></li>

■兄弟要素

＋(プラス)で兄弟要素を展開できます。

展開前
div>h1+h2
 
展開後
<div>
  <h1></h1>
  <h2></h2>
</div>

■要素に属性をつける

[]で属性を指定できます。

展開前
a[href="https://..." target="_blank"]
 
展開後
<a href="https://..." target="_blank"></a>

■要素にテキストを入れる

{}で要素にテキストをいれることができます。

展開前
p{hello}
 
展開後
<p>hello</p>

CSS編

---

CSSも同様にEmmetを使用することができます。

展開前
.test {
	p24+m64+tac
}
 
展開後
.test {
	padding: 24px;
	margin: 64px;
	text-align: center;
}

■プロパティ

よく使うショートハンド

.test {
	p24 → padding:24px;
    m64　→ margin:64px;
    db　→ display: block;
    bg　→ background: ;
    maw　→ max-width: ;
    pt16　→ padding-top: 16px;
    pb16　→ padding-bottom: 16px;
    mr24　→ margin-right: 24px;
    ml24　→ margin-left: 24px;
    fwb　→ font-weght: bold;
    c → color: ;
    fsz16　→ font-size: 16px;
    tac　→ text-align: center;
    df → display: block;
}
 

■単位

.test {
	w100　→ width: 100px;
	w100p　→ width: 100%;
	w100rem　→ width: 100rem;
	w100e　→ width: 100em;
}

Emmet チートシート

一覧はこちら！

Cheat Sheet

---

以上です！😄

今回はEmmetについて紹介しました。Emmetはウェブ開発において効率的なコーディングを支援するツールであり、短いコードを入力することでHTMLやCSSのコードを自動生成することができます。
Emmetを使うことで、手動で長いコードを入力する手間を省き、開発の生産性を向上させることができます。vscodeなどの多くのテキストエディタやIDEでEmmetがサポートされているため、使い方を覚えておくと便利です。

Emmetのバージョンによっても機能やサポートされているショートカットが異なる場合がありますので、公式ドキュメントや関連リソースを参考にしてください。

---