Emmetで効率的なコーディングテクニック

Posted on by

ウェブ開発において、生産性を高めるツールは非常に価値があります。
Emmetは、HTMLとCSSのコーディングを劇的に高速化するプラグインで、
開発者の作業効率を大幅に向上させます。
この記事では、Emmetの基本から、その効果的な使い方までを探ります。

Emmetとは？

Emmetは、HTMLやCSSを高速に記述するためのツールキットです。
短い略語やエイリアスを使用して、長いHTML構造やCSSルールを素早く展開することができます。

Emmetの利点

高速なコーディング

Emmetを使用すると、複雑なHTML構造やCSSルールを、わずかな入力で素早く生成できます。

エラーの減少

定型的なコードの手動入力によるミスを減らし、より正確なコーディングが可能になります。

学習曲線の緩和

Emmetの構文は直感的であり、短時間で基本を学ぶことができます。

Emmetの基本的な使用方法

HTMLの拡張

Emmetでは、ul>li*5 のような構文を使用して、
5つのリストアイテムを持つ順序なしリストを瞬時に生成できます。

CSSの略語

CSSでは、m10 と入力するだけで margin: 10px; に展開されます。
これにより、スタイルシートの作成時間を大幅に短縮できます。

ネストと反復

ネストされたHTML要素や反復する構造も、Emmetの構文を使って簡単に記述できます。

Emmetの応用

ウェブページのレイアウト

Emmetを使用すると、ウェブページの基本的なレイアウトを数秒で構築できます。
例えば、ヘッダー、メインコンテンツ、フッターを持つレイアウトは、Emmetの構文で瞬時に生成できます。

レスポンシブデザイン

メディアクエリやフレックスボックスなど、レスポンシブデザインに関連するCSSも、
Emmetの略語を使用して迅速に記述できます。

効率的なリファクタリング

既存のコードのリファクタリング時にも、Emmetは大きな時間節約になります。
繰り返しコードの生成や構造の変更を素早く行うことができます。

EmmetのHTMLタグ一覧

HTML5のドクタイプと基本構造を生成

html:5
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

idがheaderのdivタグを生成

div#header
<div id="header"></div>
https://youtube.com/shorts/GMFVvnkpD5Y

5つのリストアイテムを持つ順序なしリストを生成

ul>li*5
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

Hello World”というテキストを持つh1タグを生成

h1{Hello World}
<h1>Hello World</h1>

クラス名がclassNameのdivタグを生成

div.className
<div class="className"></div>

href属性を持つリンクを生成

a[href='https://example.com']
<a href="https://example.com"></a>

div内にリストを含む構造を生成

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

ナビゲーションリンクを含む構造を生成

nav>ul>li*4>a
<nav>
    <ul>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
    </ul>
</nav>

div内にヘッダーとフッターを含む構造を生成

div>(header>ul>li*2>a)+footer>p
<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div

クラス名に連番を含むリストアイテムを生成

ul>li.item$*5
<h1 title="item1">Header 1</h1>
<h2 title="item2">Header 2</h2>
<h3 title="item3">Header 3</h3>

タイトル属性と連番を含む複数のヘッダーを生成

h$[title=item$]{Header $}*3
<h1 title="item1">Header 1</h1>
<h2 title="item2">Header 2</h2>
<h3 title="item3">Header 3</h3>

テーブル構造を生成

table>(thead>tr>th*3)+(tbody>tr*3>td*3)
<table>
    <thead>
        <tr>
            <th></th>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

画像とテキストの段落を含むdivを生成

div>img[src=img.jpg alt]+p{Some text}
<div>
    <img src="img.jpg" alt="">
    <p>Some text</p>
</div>

Emmetのcssタグ一覧

m10

margin: 10px;

p20

padding: 20px;

fz18

font-size: 18px;

bd1#000

border: 1px solid #000;

m10-20

上下のマージンを10px、左右のマージンを20pxに設定します。

margin: 10px 20px;

p10-20-30

上のパディングを10px、左右のパディングを20px、下のパディングを30pxに設定します。

padding: 10px 20px 30px;

trf:sc(1.5)

transform: scale(1.5);

trs:all .3s

transition: all 0.3s;
HTML入門：ウェブページの骨格
CSSの基本: スタイリングの鍵