Emmetを使って爆速コーディング！【HTML編】

2022 6/27

2022年5月3日 2022年6月27日

・HTML、CSSのコーディングに慣れてきたから速く打ちたい！
・効率よくスマートにコーディングをしたい！

今回はHTML、CSSなどのコーディング作業を爆速になる！？
「Emmet」という入力を補助するプラグイン（拡張機能）について紹介していきます！
ボリュームが多いのでHTML編とCSS編で分けて書きます^^

Emmetとは

HTMLやCSSの入力を補助するプラグイン（拡張機能）のコトで、
ショートカットキーのように省略してくれるので入力回数を減らすことができる結果、速度が上がります！

まずEmmetに対応しているエディタソフトを使う必要があります。

おすすめエディタ

Visual Studio Code （VSCode）
標準で搭載

その他のエディタ

Dreamweaver
標準で搭載されたますが使用するのに設定が必要。
Sublime Text
拡張機能を追加する必要あり
Atom
拡張機能を追加する必要あり
Brackets
拡張機能を追加する必要あり

僕はVSCodeを愛用してます！

VSCodeだと標準ですぐに使用できるので、とても重宝してます^^

Emmetの使い方

では、使い方を解説していきます。
使用したいテキストを打ってTabかEnterを打つだけ！

HTMLのEmmetを使ってみよう！

「!」の1文字でTabを打つだけでHTML5の基本構文が打ち終わっちゃいます^^

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

便利すぎっ！！

ほかにも、pタグだと

<p></p>

classやidを付けたい場合

たとえば、pタグにクラスを付けたい場合は「.」、idの場合は「#」を使います！

p.lead

<p class="lead"></p>

p#lead

<p id="lead"></p>

ちなみにclassを複数つけたい場合は「.」で繋げて記述していきます！

p.lead.lead2.lead3

<p class="lead lead2 lead3"></p>

pタグ内に文字をいれたい場合は{}を使います！

p.lead{テキストが入ります}

<p class="lead">テキストが入ります</p>

今回はpタグで紹介しましたが、divの場合はタグを省略して書くことが出来ます^^

.classbox

<div class="classbox"></div>

ここまでが基本的なEmmetの紹介でした！
応用も書いていきます。

応用編

ネスト（入れ子）の書き方

「>」をいれてあげると入れ子になります！

nav>ul>li

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

同じ要素の繰り返し

liタグなど複数繰り返したい場合は「*」と「数字」を入力すればOK！

nav>ul>li*4

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

要素に連番をつける

「$」を使う事で連番になります！

li.list-$*3

<li class="list-1"></li>
<li class="list-2"></li>
<li class="list-3"></li>

隣接要素

「+」で繋げると隣接要素になります！

h1+p

<h1></h1>
<p></p>

１つ上の要素に戻る

「^」で上の要素に戻ります！

div>h1+p^ul>li*4

<div>
    <h1></h1>
    <p></p>
</div>
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

グループ化

()で囲むとグループ化にできます！

(div>h1+p)+(ul>li)*2

<div>
    <h1></h1>
    <p></p>
</div>
<ul>
    <li></li>
</ul>
<ul>
    <li></li>
</ul>

Emmetコード一覧（HTML）

使えそうなEmmet用コード集（HTML）をまとめてみました^^

a	<a href=””></a>
a:mail	<a href=”mailto:”></a>
link	<link rel=”stylesheet” href=””>
link:css	<link rel=”stylesheet” href=”style.css”>
script	<script></script>
img	<img src=”” alt=””>
input	<input type=”text”>
input:c	<input type=”checkbox” name=”” id=””>
input:r	<input type=”radio” name=”” id=””>
input:f	<input type=”file” name=”” id=””>
input:s	<input type=”submit” value=””>
input:i	<input type=”image” src=”” alt=””>
input:b	<input type=”button” value=””>
textarea	<textarea name=”” id=”” cols=”30″ rows=”10″></textarea>
btn:s	<button type=”submit”></button>
btn:r	<button type=”reset”></button>
fig>figc	<figure> <figcaption></figcaption> </figure>
ifr	<iframe src=”” frameborder=”0″></iframe>
sect	<section></section>
art	<article></article>
hdr	<header></header>
ftr	<footer></footer>
mn	<main></main>
ol	<ol></ol>
ul	<ul></ul>
dl	<dl></dl>
div	<div></div>
table	<table></table>