Emmetの使用(3)

2022年10月20日
技術情報

今回はHTMLマークアップを効率的に記述することができる
Emmet(エメット)を紹介したいと思います。
本記事は前回の「Emmetの使用(2)」の続きとなります。

ダミーテキストの入力

レイアウトの確認などでダミーのテキストを入力する場合、
以下のEmmetで簡略化することができます。
例として「lorem25」と入力して「TABキー」を押すことで以下が生成されます。

Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias magni temporibus aspernatur debitis eveniet aperiam odio, ipsum consequuntur repudiandae numquam dignissimos facere distinctio natus perspiciatis?

loremの後の数字はワード数を示しています。
上記の例では25を指定しているので25ワードからなるダミーの文章が生成されました。

さらにEmmetを活用する

Emmetを極めるとたったの1行でネストされたHTMLの生成をおこなうことも可能です。
例えば「div>(header>ul>li*2>a)+footer>p」と入力して「TABキー」を押すことで以下が生成されます。

<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>

Emmetはすべてを使いこなそうとすると覚える項目が多くて大変ですが、
最低限のよく使うパターンだけでも覚えておくだけでも工数を削減することができます。

Emmetのチートシートは以下で公開されていますので、
忘れたときに思い出したい場合などに活用できます。
https://docs.emmet.io/cheat-sheet/

木曜日担当：nishida