Emmetとは？簡単な使い方やテンプレートの紹介！

2018年1月10日2020年4月27日

プログラミング

Emmet、とても便利です。

自分はEmmetをTextasticというアプリを使っている時に知りました。これはiOS用のコードエディタなのですが、かなり高機能です。このアプリの機能としてEmmetがあり、使ってみると爆速だったので超おすすめです。

VisualCode Studioでもデフォルトで使用可能です。

大体のできることはチートシートに載っているので、それを自分がよく使う形に変形させています。

HTML

まずは基礎

<!-- タグ名を打ちTabやCtrl+Eなどで展開 -->
<!-- a -->
<a href=""></a>
<!-- div -->
<div></div>

<!-- クラス(.**)、ID(#**) -->
<!-- .class -->
<div class="class"></div>
<!-- #id -->
<div id="id"></div>

<!-- 組み合わせ -->
<!-- span.class#id -->
<span class="class" id="id"></span>

<!-- コメント -->
<!-- c{comment} -->
<!-- comment -->

基本はこんな感じです。コメントは普通に打つとめんどいので重宝します。

ちょっと発展

これはよく自分が使うやつです。

テンプレート的な。

<!-- 入れ子 (>) -->
<!-- div>p.main -->
<div>
    <p class="main"></p>
</div>

<!-- *で複製できます。 -->
<!-- ul>li*3 -->
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

<!-- ()でくくることもできます。 -->
<!-- table>(tr>th*3)+(tr>td*3)*2 -->
<table>
    <tr>
        <th></th>
        <th></th>
        <th></th>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>



<!-- !でhtmlの雛型を展開できます。 -->
<!-- ! -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

</body>
</html>

<!-- よく使うviewportの設定も簡単にできます。 -->
<!-- meta:vp -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- []内で属性を設定できます。 -->
<!-- a[href=//system.shallweband.net]{このサイト！} -->
<a href="//system.shallweband.net">このサイト！</a>

<!-- 最後に|eをつけることで実体参照(エスケープ)ができます。 -->
<!-- div>p.main|e -->
&lt;div&gt;
    &lt;p class="main"&gt;&lt;/p&gt;
&lt;/div&gt;

最後の実体参照は、こういう記事書くときにものすごく便利です。

ほかにも”^”や”$”もあるんですが自分はあまり使いません。

<!-- 公式サイトではclimb upとか書いてあった気がします。 -->
<!-- div.a>div.b^div.c -->
<div class="a">
    <div class="b"></div>
</div>
<div class="c"></div>

<!-- クラスやIDにインクリメント(？)を使うことができます。$@3とか$@-をやってみると楽しいことが起きますよ。 -->
<!-- ul>li.$*3 -->
<ul>
    <li class="1"></li>
    <li class="2"></li>
    <li class="3"></li>
</ul>

HTMLではこんな感じだと思います。”!”とか”*5″とか便利ですよね。

“p{text}”のように{}の中にテキストを入れると<p>text</p>という風になります。

最後に|cと付けると終わりにコメントをつけてくれるそうです（説明下手なので見ていただくのが早いです）。

<!-- div.main>p#main|c -->
<div class="main">
    <p id="main"></p>
    <!-- /#main -->
</div>
<!-- /.main -->

こんな感じです。

CSS

emmetではcssも扱えてしまうんです。

よく使う項目をピックアップします。

/* w */
width: ;
/* h */
height: ;
/* bgc */
background-color: #fff;
/* c */
color: #000;
/* m */
margin: ;
/* p */
padding: ;
/* bd */
border: ;
/* bdrs */
border-radius: ;
/* bxsh */
box-shadow: inset hoff voff blur color;

単純な展開ではこんな感じになります。
ほかの項目はチートシートにまとめられています。

数値を設定して展開することもできます。

指定なし:px
r:rem
e:em
p:%

/* w10 */
width: 10px;
/* h3r */
height: 3rem;
/* m1p */
margin: 1%;
/* p3vw1r */
padding: 3vw 1rem;
/* c#5 */
color: #555;

+で複数をまとめて展開することもできます。

/* w100p+m0 */
width: 100%;
margin: 0;

コロンでつなぐことで特定の値で展開してくれるものもあります。

/* m:a */
margin: auto;
/* pos:r */
position: relative;
/* ta:c */
text-align: center;
/* d:ib */
display: inline-block;
/* ff:a */
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

よく使うのはこれくらいでしょうか。