Zenn
🐈

Emmet の基本的な使い方と便利なショートカット

2024/10/05に公開
CSS
HTML
Emmet
tech

Emmet とは？

Emmet は、HTML や CSS のコーディングを効率化するためのツールです。特に、コードの補完機能が強力で、開発者の作業を大幅にスピードアップします。ここでは、Emmet の基本的な使い方と便利なショートカットを紹介します。

基本的な使い方

リストの生成

ul>li と入力して補完すると、以下のような HTML 構造が生成されます。

<ul>
  <li></li>
</ul>

ol>li*3 と入力して補完すると、以下のような HTML 構造が生成されます。

<ol>
  <li></li>
  <li></li>
  <li></li>
</ol>

ol>li*2>ul>li*2 と入力して補完すると、以下のような HTML 構造が生成されます。

<ol>
  <li>
    <ul>
      <li></li>
      <li></li>
    </ul>
  </li>
  <li>
    <ul>
      <li></li>
      <li></li>
    </ul>
  </li>
</ol>

ol>li+li>ol>li*2 と入力して補完すると、以下のような HTML 構造が生成されます。

<ol>
  <li></li>
  <li>
    <ol>
      <li></li>
      <li></li>
    </ol>
  </li>
</ol>

ol>li+ol>li*4^^li と入力して補完すると、以下のような HTML 構造が生成されます。

<ol>
  <li></li>
  <ol>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ol>
</ol>
<li></li>

ol>li+(ol>li*4)+li と入力して補完すると、以下のような HTML 構造が生成されます。

<ol>
  <li></li>
  <ol>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ol>
  <li></li>
</ol>

ダミーテキストの挿入

lorem と入力して補完すると、以下のようなダミーテキストが挿入されます。

Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus
perferendis quas quaerat eius quod deserunt quidem, alias animi vitae
unde perspiciatis recusandae cum, totam officia provident maxime a
eveniet. Autem?

lorem4 と入力して補完すると、4 つの単語で構成されたダミーテキストが挿入されます。

Lorem ipsum dolor sit.

クラス付きの div 要素

div.container と入力すると、以下のような HTML が生成されます。

<div class="container"></div>

CSS のショートカット

m10 と入力して Tab を押下すると、以下の CSS が生成されます。

margin: 10px;

p10 と入力して Tab を押下すると、以下の CSS が生成されます。

padding: 10px;

参考ドキュメント

Emmet を活用することで、日々のコーディング作業をより効率的に進めることができます。ぜひ試してみてください。

Discussion