Go to Qiita Advent Calendar Top
LoginSignup
179
163

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@Eki-in-san

【高速コーディング】Emmetを使ってみよう!

Last updated at Posted at 2019-11-14
Page 1 of 57

目次

(初投稿で張り切って書いてたところ、気がついたら大変長くなっていました...！)

はじめに

皆さんはEmmet(エメット)をご存知でしょうか?　Emmetとは、短い略語でHTMLやCSSを書くことができる、入力補完ツールです。

私がEmmetを知ったのはWebを学び初めてから2年目のことでした。それまではCSSプロパティやHTMLタグを...

width: 100px;
height: 100px;

...のように打ち込んでいました。
しかし、Emmetを使えば...

w100+h100　　　/* Tabキーを押してCSSを展開する */

...のように入力するコードを大幅に短縮できるのです。これにより、コーディングのスビードが大幅にアップしました。Emmetではエディタの補完機能に比べて極力短くなるように省略されているため、更なる効率アップを図れます。

それでは、Emmetとはどのようなものかを見ていきましょう。

Emmetって?

Emmetは特定のエディタに特化されていない、汎用的な補完機能のツールです。

対応しているエディタは公式サイトのダウンロードページ(次項)から確認できます。様々なエディタに対応していますが、標準でサポートされているエディタがある一方で、プラグインを追加でダウンロードして使うエディタ、部分的にしかサポートされていないエディタもあるので、使い始める前に確認しておくと安心です。

Emmet公式サイト

項目 リンク先
Emmet 公式サイト https://emmet.io/
対応エディタ一覧・
プラグインダウンロード		 https://emmet.io/download/
仕様・構文 https://docs.emmet.io/
チートシート https://docs.emmet.io/cheat-sheet/
チートシート
(PDF,A5サイズ)		 https://docs.emmet.io/cheatsheet-a5.pdf

動作確認環境&導入方法

【PC】
MacOS 10.14.6

【エディタ】
当記事では、AtomとVS Codeで動作を確認しています。

(注)：公式サイトのダウンロードページで Third-party support の項目に書いてあるエディタ(VS CodeやVimなど)は一部のみのサポートで、一部の構文が使えないことがあります。当記事ではAtomとVisual Studio Code(VS Code)で動作を確認していますが、エディタによっては違う挙動を取ることがありますのでご注意ください。

◆Atom 1.41.0
導入方法
Preferences(環境設定) > Install(インストール) で[Packages(パッケージ)]を選択、 emmet で検索すると発行元が emmetio のパッケージが出てくるのでインストールを行います。
image.png

◆Visual Studio Code 1.40.0
基本設定 > 設定 で検索バーに emmet と入れると Emmet: Trigger Expansion On Tab という項目が出てくるので、チェックを入れます。
image.png

その他のエディタでの導入の仕方は、各自でお調べくださいませ。

どうやって使うの?

HTMLタグやCSSプロパティの略語、またはタグ構造を打ちこんでTabキーを押すことで展開されます。例えばこんな感じです：

【HTMLの場合】

打ち込み
.nav-wrapper>nav>ul>(li.list-item>a)*6^^p

Tab キーを押して展開

展開後
<div class="nav-wrapper">
    <nav>
        <ul>
            <li class="list-item"><a href=""></a></li>
            <li class="list-item"><a href=""></a></li>
            <li class="list-item"><a href=""></a></li>
            <li class="list-item"><a href=""></a></li>
            <li class="list-item"><a href=""></a></li>
            <li class="list-item"><a href=""></a></li>
        </ul>
    </nav>
    <p></p>
</div>

【CSSの場合】

打ち込み
.selector
{
    w300+h300+m0-a-30+fz18+fwb+tac+bd2-s#888
}

Tab キーを押して展開

展開後
.selector
{
    width: 300px;
    height: 300px;
    margin: 0 auto 30px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    border: 2px solid #888;
}

展開すると「増えるわかめ」のように増えますね。慣れないうちは「訳わかめ」ですが、この量のコードをこれだけ圧縮できるので、コーディングをかなり効率化することができると思います。

HTMLでの書き方

基本の書き方(HTML)

基本構文(HTML)

HTMLの場合、基本的にはタグの中身の文字列を書いてTabキーを押すと展開されます。閉じタグも自動生成するので、HTMLの構文ミスの防止にも繋がります。

例： span Tab → <span></span>

不明なタグ名の場合

不明なタグ名が入力された場合、その文字列そのままのタグが生成されます。

例： banana Tab → <banana></banana>

略語中の : と - の区別

公式ドキュメントの解説に出てくる、タグ名と属性の区切り文字 : (コロン)は - (ハイフン)でも代用可能です。展開された後の結果に影響はないので、好きな方を使うと良いでしょう。1
(注)：一部のみサポートのエディタでは<input-t>のようにそのまま展開されてしまうことがあります。

例： input:t と input-t は同じものと解釈されて展開される

タグ名の省略形

長い名前のタグなどの一部のタグは略称で展開することが可能だったりします。

例： fig Tab → <figure></figure>

長いタグの省略形一覧(主要なもののみ)

略語 展開後 説明
hdr <header></header>
mn <main></main>
ftr <footer></footer>
fig <figure></figure>
btn <button></button>
str <strong></strong>

HTMLファイルを書き始めるとき

それでは早速、Emmetを使ってHTMLを書いてみましょう。
作成するページがHTML5であれば、 ! または html:5 (または html-51) と書打ち込みます。
(HTML4.01であれば html:4t1 )

htmlの書き始め
!

Tab キーを押して、展開します。

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>

いかがでしょうか。わずかコンマ数秒で <body> の中身を作れる準備が整いました。
必要に応じてタイトルを編集したり、日本語のベージならば <html lang="ja"> にするなど修正を行いましょう。

余談：![lang=ja] ( または html:5[lang=ja] )と書いて展開すると、日本語の設定 <html lang="ja"> が付加された状態で展開します。1

タグ構造を展開してみよう

HTMLの文書構造は、とにかくタグの入れ子の嵐です。打ち込む前に頭の中でタグの構造を思い描けているなら、タグを一つずつ展開するよりも、先ほどの ! のようにまとめて展開できた方が早くて爽快でしょう。ここでは、入れ子などの構造の書き方を見ていきます。

タグの構造的な関係性を示す記号一覧

まずは記号の一覧を示します。沢山あるので、一つ一つ解説していきます。

記号 役割
> 次の要素を子要素として追加(階層が一つ下)
+ 次の要素を兄弟要素として追加(階層は同じ)
*n その要素をn回繰り返す
^ 次の要素を一つ親の兄弟要素として追加(階層が一つ上)
(　) 括弧内をグルーピング
# IDを付ける
. クラスを付ける
[　] 属性を付ける
{　} テキストを付ける
$ ナンバリングを付ける

実際の展開例(HTML)

表の前半5つはタグの構造に関する記号です。どのような役割があるのか、1つずつ順番に見ていきましょう。
ここでは、Emmetを用いて「果物のリスト」ページを作って説明します。

完成イメージ
<h2>くだものリスト</h2>
<ul id="list01" class="fluits-list">
    <li id="fruit-00" class="fruit-item">バナナ</li>
    <li id="fruit-01" class="fruit-item">リンゴ</li>
    <li id="fruit-02" class="fruit-item">メロン</li>
    <li id="fruit-03" class="fruit-item">モモ</li>
    <li id="fruit-04" class="fruit-item">イチゴ</li>
    <li id="fruit-05" class="fruit-item">パイナップル</li>
</ul>
<p style="color:blueviolet;">抽選でグレープジュースをプレゼント！詳細は<a href="grape.html">こちら</a>をご覧下さい。</p>
> : 次の要素を子要素として追加(階層が一つ下)

リストを作るので、まずは <ul> の子要素として <li> を作成してみましょう。

子要素として追加
ul>li

Tab キーで展開

子要素として追加　展開後
<ul>
    <li></li>
</ul>

> と書くことにより <ul> の内側に入り、 <li> を作ることができました。「 > の形はインデントを付ける(右にずれる)イメージ」とすると覚えやすいかもしれません。
次に、タグの内側ではなく、前や後に隣接させたい場合はどうすれば良いのでしょうか?

+ : 次の要素を兄弟要素として追加(階層は同じ)

何のリストかを知るには、タイトルが欲しいですね。
<ul> 要素の前に <h2> を追加してみます。

兄弟要素として追加
h2+ul>li

Tab キーで展開

兄弟要素として追加　展開後
<h2></h2>
<ul>
    <li></li>
</ul>

今度は入れ子の関係ではなく、同じ階層に並んでいる状態になりました。タグを列挙する時は + を使用します。この記号はCSSの方でもよく使うので、覚えておきましょう。

*n : その要素をn回繰り返す

前々項では、 <ul> の中に <li> を1つ作成することができました。しかし実際にリストを作る際は <li> が複数個欲しいところです。例えば <li> を6個作りたい時、前項で登場した + を使って li+li+li+li+li+li と表すこともできますが、もっとスマートな書き方があります。個数を指定して li*6 と掛け算のように記述することで、まとめて作成することができます。

n回繰り返す
h2+ul>li*6

Tab キーで展開

n回繰り返す　展開後
<h2></h2>
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
入れ子の内側に入ったままでは先に進めない?

それでは、 </ul> の後に注釈の <p> を追加したい時はどう書くのでしょうか?
h2+ul>li*6 の後ろに並べるんだから、 + を使って h2+ul>li*6+p だ！ とすると・・・

h2+ul>li*6+p　展開後
<h2></h2>
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <p></p>
</ul>

<li> と同じ階層で隣接するように <ul> の中に <p> が入ってしまいます。
Emmetで展開する時は前から読んでいくので、 <li> の時点では <ul> の内側にいます(カーソルがその位置にあると思ってください)。その位置のまま後ろにくっ付けてしまうので、 <ul> の子要素として <p> が追加されてしまいます。
この問題を解決するには、 <ul> の外に出てから <p> を追加する必要です。方法は2通りあります。

^ : 次の要素を一つ親の兄弟要素として追加(階層が一つ上)

h2+ul>li と書いた時、最後にいる位置は <ul> の内側です( > で内側に入り込んでいるため)。 </ul> の後ろに <p> を追加する際は ^ を使って <ul> の外に出る必要があります。

一つ親の兄弟要素として追加
h2+ul>li*6^p

Tab キーで展開

一つ親の兄弟要素として追加　展開後
<h2></h2>
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<p></p>

これで <ul> の外に出てから <p> を追加することができました。もし2段階外側に出たい時は ^^ のように連続して書きます。

(　) : 括弧内をグルーピング

</ul> の後ろに <p> を追加する問題では、もう一つ解決方法があります。要素を (　) で括ると一つのまとまりとして処理されます。(ul>li) のようにまとめれば入れ子の構造が無くなるので + で <p> を追加することができます。

括弧内をグルーピング
h2+(ul>li*6)+p

Tab キーで展開

括弧内をグルーピング　展開後
<h2></h2>
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
<p></p>

^ で展開した時と同じ結果となりました。同じ構造でも、異なる書き方ができるようです。以下にそれぞれの書き方についてメリット・デメリットをまとめました。

^ (　)
メリット カーソル移動が少なく打てる 構造が分かりやすい
デメリット 構造が分かりづらい 括弧の中身を書くのでカーソル移動が発生する

(　) と ^ は使いやすいと感じる方を使うと良いでしょう。

タグの構造に関わるところは以上になります。これで、HTML上の全ての構造の全てをEmmetで表せるようになりました！　次は、タグに様々なオプションを付けていきましょう。

# : IDを付ける　. : クラスを付ける

要素をCSS側で装飾したり、Javascript側で操作するときにする時にほぼ必須となるIDやクラスもEmmetで追加が可能です。CSSやjQueryのセレクターと同じように、要素名の後に #ID名 や .クラス名 をつければOKです。どのように展開されるのか、下の表をご覧ください。

略語 展開後 説明
ul#list01 <ul id="list01"></ul> IDを付ける
ul.list <ul class="list"></ul> クラスを付ける
ul.list.red <ul class="list red"></ul> 複数のクラスを付ける時は隙間を開けずに連続して書く
ul.list#list01.red <ul class="list red" id="list01"></ul> IDとクラスを混ぜても展開時にまとめてくれる

では、先ほどのリストにIDとクラスを付けてみましょう。

IDとクラスを付ける
h2+(ul#list01.fluits-list>li.fruit-item*6)+p

ちょっと長くなりますが、「タグ構造を表す記号」が現れるまでは同じ要素です。
h2 + ( ul#list01.fluits-list > li.fruit-item * 6 ) + p という区切りになっていることに注意して見てみましょう。

Tab キーで展開

IDとクラスを付ける　展開後
<h2></h2>
<ul id="list01" class="fluits-list">
    <li class="fruit-item"></li>
    <li class="fruit-item"></li>
    <li class="fruit-item"></li>
    <li class="fruit-item"></li>
    <li class="fruit-item"></li>
    <li class="fruit-item"></li>
</ul>
<p></p>

タグの展開時にID・クラス付けることができました。 *6 とすることで、クラス名のついた <li> を6つ複製しています。次の項では、一般的な属性を追加していきます。

[　] : 属性を付ける

id や class も属性の一つですが、それ以外の属性、例えば <img> に設定する src alt や <a> に設定する href などの属性は [属性名=値] というように設定します。属性値はクォーテーション "" で囲う必要はありません。

略語 展開後 説明
a[href=index.html] <a href="index.html"></a> VS Codeでは onclick=func() などの括弧がある属性値だと展開できず
img[src=img001.jpg alt=画像1] <img src="img001.jpg" alt="画像1"> 複数の属性の書き方１：
スペース区切りで記述する
img[src=img001.jpg][alt=画像1] <img src="img001.jpg" alt="画像1"> 複数の属性の書き方２：
[　]を分けて記述する
img <img src="" alt=""> 対象のタグでほぼ必須となる属性は自動的に付加される(但し、属性は空文字列となる)

「とりあえず必須の属性の記述だけを用意したい」のであれば、タグ名を打ち込むだけで補完してくれます。

それでは、リストの後のpタグの文字を赤にしてみましょう。style属性に color:blueviolet; を設定します。。

属性を付ける
h2+(ul#list01.fluits-list>li.fruit-item*6)+p[style=color:blueviolet;]

Tab キーで展開

属性を付ける　展開後
<h2></h2>
<ul id="list01" class="fluits-list">
	<li class="fruit-item"></li>
	<li class="fruit-item"></li>
	<li class="fruit-item"></li>
	<li class="fruit-item"></li>
	<li class="fruit-item"></li>
	<li class="fruit-item"></li>
</ul>
<p style="color:blueviolet;"></p>
{　} : テキストを付ける

タグの中に入れ込む文字列を展開前の段階で書き込むことが可能です。ただし、繰り返し複数個のタグを書き出す部分は同一内容のテキストでしか展開できません。

例えば、 li*3 のような書き方ではテキストの内容が異なる <li>東京</li><li>神田</li><li>秋葉原</li> などは展開できません。違う内容のテキストであれば li{東京}+li{神田}+li{秋葉原} のようにしなければなりませんが、複数の <li> に同じクラスや連番のidを付ける場合は展開後にテキストを流し込んだ方が楽かもしれません。

略語 展開後 説明
p{これはりんごです。} <p>これはりんごです。</p>
p>{これはりんごです。} <p>これはりんごです。</p> 入れ子のテキスト部分、という書き方も可能
p>{これは}+span[style=color:red;]{赤い}+{りんごです。} <p>これは<span style="color:red;">赤い</span>りんごです。</p> テキストと子要素を並べて記述する際は、最初の文字時点で子要素としての記述が必要

それでは、 <h2> と <p> の中にテキストを入れてみましょう。

テキストを付ける
h2{くだものリスト}+(ul#list01.fluits-list>li.fruit-item*6)+p[style=color:blueviolet;]>{抽選でグレープジュースをプレゼント！詳細は}+a[href=grape.html]{こちら}+{をご覧下さい。}

Tab キーで展開

テキストを付ける　展開後
<h2>くだものリスト</h2>
<ul id="list01" class="fluits-list">
	<li class="fruit-item"></li>
	<li class="fruit-item"></li>
	<li class="fruit-item"></li>
</ul>
<p style="color:blueviolet;">抽選でグレープジュースをプレゼント！詳細は<a href="grape.html">こちら</a>をご覧下さい。</p>

繰り返し構造内で同じテキストを入れ込む場合には有効ですが、そうではない時は展開前の構文が長くなってしまうので、展開後に流し込む形でも良いと思います。

$ : ナンバリングを付ける

似たような要素にidを付ける時や、複数種類の画像を使う時のファイル名に 01 , 02 , 03 ...などの「連番」を使うことがあると思います。Emmetの繰り返しの書き出し構文の中で、連番を付けることも可能です。

略語 展開後 説明
li#item-$*3 <li id="item-1"></li>
<li id="item-2"></li>
<li id="item-3"></li> 		通常は1から付番
$ の後に @ ：
連番の範囲指定をする
li#item-$$$*3 <li id="item-001"></li>
<li id="item-002"></li>
<li id="item-003"></li> 		$ をn文字連続：
常にn桁以上にする(0で補完)
li#item-$@-*31 <li id="item-3"></li>
<li id="item-2"></li>
<li id="item-1"></li> 		@ の後に - を記述：
逆順で付番する
li#item-$@9*3 <li id="item-9"></li>
<li id="item-10"></li>
<li id="item-11"></li> 		@ の後に0以上の整数：
その数字から付番する
li#item-$@-9*31 <li id="item-11"></li>
<li id="item-10"></li>
<li id="item-9"></li> 		逆順と付番範囲の合わせ技

それでは、 <li> に連番のidをつけてみましょう。

ナンバリングを付ける
h2{くだものリスト}+(ul#list01.fluits-list>li#fruit-$$@0.fruit-item*6)+p[style=color:blueviolet;]>{抽選でグレープジュースをプレゼント！詳細は}+a[href=grape.html]{こちら}+{をご覧下さい。}

Tab キーで展開

ナンバリングを付ける　展開後
<h2>くだものリスト</h2>
<ul id="list01" class="fluits-list">
	<li id="fruit-00" class="fruit-item"></li>
	<li id="fruit-01" class="fruit-item"></li>
	<li id="fruit-02" class="fruit-item"></li>
	<li id="fruit-03" class="fruit-item"></li>
	<li id="fruit-04" class="fruit-item"></li>
	<li id="fruit-05" class="fruit-item"></li>
</ul>
<p style="color:blueviolet;">抽選でグレープジュースをプレゼント！詳細は<a href="grape.html">こちら</a>をご覧下さい。</p>

これで文書構造の組み立ては完了しました。あとはEmmetで展開時に入れることができない部分のテキストを流し込んで完成です。

テキストの流し込み

繰り返し構造の中の内容が異なるテキストは展開できないので、展開後に流し込みます。コピペです。

テキストの流し込み
<h2>くだものリスト</h2>
<ul id="list01" class="fluits-list">
    <li id="fruit-00" class="fruit-item">バナナ</li>
    <li id="fruit-01" class="fruit-item">リンゴ</li>
    <li id="fruit-02" class="fruit-item">メロン</li>
    <li id="fruit-03" class="fruit-item">モモ</li>
    <li id="fruit-04" class="fruit-item">イチゴ</li>
    <li id="fruit-05" class="fruit-item">パイナップル</li>
</ul>
<p style="color:blueviolet;">抽選でグレープジュースをプレゼント！詳細は<a href="grape.html">こちら</a>をご覧下さい。</p>

HTMLの構造の作成は以上になります！
おつかれさまでした。

複数のタグ構造をまとめて展開できる特別な略語 1

HTMLでは、しばしば「このタグとあのタグはセットで使う」という場面があると思います。例えば、 <ul> と <li> 、<table> と <tr> と <td> などはほぽ必ずセットで用いると思います。そういった"セットもの"をまとめて展開できる書き方が一部のエディタで用意されています。1 代表的なものを以下に挙げます：

略語 展開後 説明
table+ <table>
　<tr>
　　<td></td>
　</tr>
</table>
tr+ <tr>
　<td></td>
</tr>
colg+ <colgroup>
　<col>
</colgroup> 		colgroup+でも展開可
ol+ <ol>
　<li></li>
</ol>
ul+ <ul>
　<li></li>
</ul>
dl+ <dl>
　<dt></dt>
　<dd></dd>
</dl>
select+ <select name="" id="">
　<option value=""></option>
</select>

CSSでの書き方

続いて、CSSでのEmmet展開方法です。CSSでは略語が大幅に短縮されているので、時間短縮効果も大きいはずです。

基本の書き方(CSS)

基本構文(CSS)

CSSの場合、略語を入力してTabキーを押すと展開されます。CSSではあいまい検索で不明な略語を見つけるため、HTMLの時とは違って完全にその語句を打ち込んでしまうと別のプロパティが出てしまうことがあるので注意です。また、あいまい検索であることを利用して、公式ドキュメントに記載されているよりも短い略語で展開することも一部エディタでは可能です。

例：widthを書き出したい時
w Tab → width: ;
width Tab → widows: ;　←違うプロパティが出てしまう

例：overflow:visibleを書き出したい時
ov:v Tab → overflow:visible; 公式ドキュメントの記述
ov-v Tab → overflow:visible; 一部エディタでは "-" で代用可
ovv Tab → overflow:visible; 一部エディタでは省略できることもある

例：letter-spacingを書き出したい時
lts Tab → letter-spacing: ; 公式ドキュメントの記述
ls Tab → letter-spacing: ; より短い表記で出せることもある

複数プロパティの一括書き出し

複数プロパティを同時に書きたい時は、 + で繋ぎます。

例：widthとheightを一気に展開したい時
w+h
　↓　Tab
width: ;
height: ;

値を代入して展開

展開時に値を入れたい場合は、略語の直後に(スペースを入れずに)書きます。

例：widthを100pxに指定して展開したい時
w100 Tab → width: 100px;

値の単位について

値に使用する単位(pxやemなど)も短縮できます。デフォルトでは、単位がない場合は px として処理されますが、 line-height z-index font-weight opacity などの一般的に単位なしで使われるプロパティではそのまま単位なしとして出力されます。

略語 展開後 説明
なし px 一部のプロパティでは
単位無しで展開される
e em
p %
r rem
x ex
文字列 文字列 そのまま展開される

色の指定方法

色指定は #08614f のような16進数のカラーコードを略語の中に使うことができます。略語中で (　) が入ると動作をしなくなるため、 rgb() rgba() などは使えません(展開後に手動で打ち込みます)。デフォルトでは、カラーコードが3桁に短縮できる場合(例： #00cccc )は自動的に短縮されます。1

例：複数の値を設定
c#123456 Tab → color: #123456;
c#123 Tab → color: #123;2 #112233と同じ
c#12 Tab → color: #121212;
c#1 Tab → color: #111;2 #111111と同じ

なお、VS Codeでは色の値を含んだ場合、複数の値を入れての展開、複数プロパティをまとめて展開することができなくなります。

複数の値を代入する

複数の値を設定したい時、略語の時点で単位がない場合は - で区切り、単位を付けている場合はそのまま次の値を記述します。ハイフンの後にマイナスの値が来る場合は -- のように2つ続けて記述します。色指定の値を繋げる時、カラーコードの先頭 # が区切り文字となるので - は不要です。

例：複数の値を設定
m10-20 Tab → margin: 10px 20px;
m10--20 Tab → margin: 10px -20px;
m10%20 Tab → margin: 10% 20px;
m10%-20 Tab → margin: 10% -20px;

bd1-s#8 Tab → border: 2px solid #888; solid のみ "s" で展開可能

主要な略語一覧

Emmet公式サイトにも略語一覧が掲載されていますが、その中にはどのブラウザでもサポートされていないマイナーなCSSプロパティが含まれています。ここでは「主なCSSの略語」のみを抜粋し、ジャンルごとにまとめています。

ボックスのプロパティ

CSSでかなりの頻度で使う、幅や高さの指定です。

略語 展開後 値の変更
w width: ; :a → auto
maw
miw 		max-width: ;
min-width: ; 		:n → none
h height: ; :a → auto
mah
mih 		max-height: ;
min-height: ; 		:n → none
bxz box-sizing: border-box; :cb → content-box
:bb → border-box

マージンとパディング

要素間の隙間や要素内の余白を設定するのによく使うプロパティです。

略語 展開後 値の変更
m margin: ; :a → auto
p padding: ;

方向別の略語
top, right, bottom, left の4方向を個別に設定する用の略語も用意されています。

プロパティ＼方向 -top -right -bottom -left
margin-(方向): ; mt mr mb ml
padding-(方向): ; pt pr pb pl

ボックスの配置や重なり順に関するプロパティ

略語 展開後 値の変更
pos position: relative; :s → static
:a → absolute
:r → relative
:f → fixed
t
r
b
l 		top: ;
right: ;
bottom: ;
left: ; 		:a → auto
fl float: left; :n → none
:l → left
:r → right
cl clear: both; :n → none
:l → left
:r → right
:b → both
z z-index: ; :a → auto

要素・カーソルの表示に関するプロパティ

略語 展開後 値の変更
d display: block; :n → none
:b → block
:f → flex
:if → inline-flex
:i → inline
:ib → inline-block
:li → list-item
:ri → run-in
:cp → compact
:tb → table
:itb → inline-table
:tbcp → table-caption
:tbcl → table-column1
:tbclg → table-column-group
:tbhg → table-header-group
:tbfg → table-footer-group
:tbr → table-row
:tbrg → table-row-group
:tbc → table-cell
:rb → ruby
:rbb → ruby-base1
:rbbg → ruby-base-group1
:rbt → ruby-text
:rbtg → ruby-text-group
ov
ovx
ovy 		overflow: hidden;
overflow-x: hidden;
overflow-y: hidden; 		:v → visible
:h → hidden
:s → scroll
:a → auto
cur cursor: pointer; :a → auto
:d → default
:c → crosshair
:ha → hand
:he → help
:m → move
:p → pointer
:t → text

フレックスボックスに関するプロパティ

要素を横に並べる時などに使うプロパティです。一度に多くのプロパティを設定すことが多いので df+jcc+aic+fxww のようにまとめて展開すると捗ります。

略語 展開後 値の変更
fx flex: ;
fxb flex-basis: ;3
fxd flex-direction: ;3 :c → column
:cr → column-reverse
:r → row
:rr → row-reverse
fxf flex-flow: ;
fxg flex-grow: ;
fxsh flex-shrink: ;
fxw flex-wrap: ;3 :n → nowrap
:w → wrap
:wr → wrap-reverse1
jc justify-content: ;3 :c → center
:fe → flex-end
:fs → flex-start
:sa → space-around
:sb → space-between
ai align-items: ;3 :b → baseline
:c → center
:fe → flex-end
:fs → flex-start
:s → stretch
as align-self: ;3 :a → auto
:b → baseline
:c → center
:fe → flex-end
:fs → flex-start
:s → stretch
ord order: ;

リストに関するプロパティ

略語 展開後 値の変更
lis list-style: ; :n → none1
lisp list-style-position: ;3 :i → inside
:o → outside
list list-style-type: ;3 :n → none1
:d → disc
:c → circle
:s → square
:dc → decimal1
:dclz → decimal-leading-zero2
:lr → lower-roman
:ul → upper-roman
lisi list-style-image: ; :n → :none1

要素の境界線に関するプロパティ

border 関連のCSSは方向ごとに細かいプロパティが用意されていますが、Emmetではそれらに全て対応しています。
ショートハンドで展開するときは - や # (色指定の時)を使って続けて記述します。

略語 展開後 値の変更
bd border: ;3 + → 1px solid #000
:n → none
bdcl border-collapse: ; :c → collapse
:s → separate
bdc border-color: #000; :t → transparent1
bdi border-image: url(); :n → none1
bds border-style: ;3 :n → none
:h → hidden
:dt → dotted
:ds → dashed
:s → solid
:db → double
:dtds → dot-dash
:dtdtds → dot-dot-dash
:w → wave
:g → groove
:r → ridge
:i → inset
:o → outset
bdw border-width: ;
bdrs border-radius: ;

方向別の略語(1)
margin や padding 同様、4方向を個別に設定する略語もあります。

プロパティ＼方向 top right bottom left
border-(方向): ; bdt3 bdr3 bdb3 bdl3
border-(方向)-color: #000; bdtc bdrc bdbc bdlc
border-(方向)-image: url(); bdti bdri bdbi bdli
border-(方向)-style: ; bdts bdrs bdbs bdls
border-(方向)-width: ; bdtw bdrw bdbw bdlw

方向別の略語(2)
境界線のプロパティでは、上下左右の他に角を示す右上・右下・左下・左上の略語も用意されています。

プロパティ＼方向 top-right bottom-right bottom-left top-left
border-(方向)-radius: ; bdtrrs bdbrrs bdblrs bdtlrs
border-(方向)-image: url(); bdtri bdbri bdbli bdtli

要素の背景に関するプロパティ

略語 展開後 値の変更
bg background: #000; + → #fff url() 0 0 no-repeat
:n → none
bgc background-color: #fff; :t → transparent
bgi background-image: url(); :n → none
bgr background-repeat: ; :n → no-repeat
:x → repeat-x
:y → repeat-y
:sp → space
:rd → round
bgp
bgpx
bgpy 		background-position: 0 0;
background-position-x: ;
background-position-y: ;
bgsz background-size: ; :a → auto
:ct → contain
:cv → cover

テキストに関するプロパティ

公式ドキュメントでは、なぜか lts-n だけ - が使われています。

略語 展開後 値の変更
ta text-align: left; :l → left
:c → center
:r → right
:j → justify
va vertical-align: top; :sup → super
:t → top
:tt → text-top
:m → middle
:bl → baseline
:b → bottom
:tb → text-bottom
:sub → sub
td text-decoration: none; :n → none
:u → underline
:o → overline
:l → line-through
lh line-height: ;
lts letter-spacing: ;3 -n → normal
tt text-transform: uppercase; :n → none
:c → capitalize
:u → uppercase
:l → lowercase
whs white-space: ;3 :n → normal
:p → pre
:nw → nowrap
:pw → pre-wrap
:pl → pre-line

フォントに関するプロパティ

略語 展開後 値の変更
f font: ;3 + → 1em Arial,sans-serif1
fz font-size: ;
fw font-weight: ;3 :n → normal
:b → bold
:br → bolder
:lr → lighter
fs font-style: italic; :i → italic
:n → normal
:o → oblique
ff font-family: ;3 :s → serif
:ss → sans-serif
:c → cursive
:f → fantasy
:m → monospace
:a → Arial, "Helvetica Neue", Helvetica, sans-serif;2
:t → "Times New Roman", Times, Baskerville, Georgia, serif;1
:v → Verdana, Geneva, sans-serif1

色指定に関するプロパティ

色の値を一度に展開できるのは16進数コード(1、2、3、6桁)のみです。それ以外の形式の値は展開後に入力しましょう。

略語 展開後 値の変更
c color: #000; :r → rgb(0, 0, 0);1
:ra → rgba(0, 0, 0, .5);1
op opacity: ;

要素の変化に関するプロパティ

展開後に関数部分の括弧内にデフォルトで文字列が入るので、書き換えましょう。

略語 展開後 値の変更
trf transform: ; :r → rotate(angle)
:rx → rotateX(angle)
:ry → rotateY(angle)
:rz → rotateZ(angle)
:sc → scale(x, y)
:sc3 → scale3d(x, y, z)1
:scx → scaleX(x)
:scy → scaleY(y)
:scz → scaleZ(z)
:skx → skewX(angle)
:sky → skewY(angle)
:t → translate(x, y)
:t3 → translate3d(tx, ty, tz)1
:tx → translateX(x)
:ty → translateY(y)
:tz → translateZ(z)
trfs transform-origin: ;
trs transition: prop time;
trsde transition-delay: time;
trsdu transition-duration: time;
trsp transition-property: prop;
trstf transition-timing-function: tfunc;1

要素のアニメーションに関するプロパティ

略語 展開後 値の変更
anim animation: ;3 - → animation:name duration timing-function delay iteration-count direction fill-mode
animdel animation-delay: time;
animdir animation-direction: normal; :a → alternate
:ar → alternate-reverse1
:n → normal
:r → reverse
animdur animation-duration: 0s;
animfm animation-fill-mode: both; :b → backwards1
:bh → both
:bt → both
:f → forwards

主に擬似要素などで使うプロパティ

::before や ::after には必須のプロパティです。文字列や url() を一度に展開することはできなさそうです。

略語 展開後 値の変更
ct
cnt 		content: ;3
content: ''; 		:n → normal
:oq → open-quote
:noq → no-open-quote
:cq → close-quote
:ncq → no-close-quote
:a → attr()
:c → counter()
:cs → counters()1

CSSで使うその他の略語

アニメーション設定、フォント読み込みなどの特殊なプロパティやコメントを記述するときに使えるものです。

略語 展開後 値の変更
! !important
@i
@import 		@import url();
@m
@media 		@media screen {

}
@kf @-webkit-keyframes identifier {
　　from { }
　　to { }
}
@-o-keyframes identifier {
　　from { }
　　to { }
}
@-moz-keyframes identifier {
　　from { }
　　to { }
}
@keyframes identifier {
　　from { }
　　to { }
}2
@f @font-face {
　　font-family:;
　　src:url();
} 		+ →
@font-face {
　　font-family: 'FontName';
　　src: url('FileName.eot');
　　src: url('FileName.eot?#iefix') format('embedded-opentype'),
　　　　url('FileName.woff') format('woff'),
　　　　url('FileName.ttf') format('truetype'),
　　　　url('FileName.svg#FontName') format('svg');
　　font-style: normal;
　　font-weight: normal;
}1
cm /* */

おわりに

皆さん、いかがでしたでしょうか。これをマスターすれば、頭の中に浮かんでいることをほぼ等速で書き出すことができると思います。

また、同じEmmetと言ってもHTMLとCSSでだいぶ性格が違うこともお分りいただけましたでしょうか。HTMLではタグ構造を一気に書き出すことができ、CSSでは複数のプロパティを値付きで出すことができます。HTMLではタグ構造が複雑になると略語を組み立てるために考える時間が多くなってしまうので、「無理のない範囲で」「自分がやりやすいように」使うことが大切だと思います。

ありがとうございました。

脚注

  1. VS Codeでは動作しませんでした。 ↩ ↩2 ↩3 ↩4 ↩5 ↩6 ↩7 ↩8 ↩9 ↩10 ↩11 ↩12 ↩13 ↩14 ↩15 ↩16 ↩17 ↩18 ↩19 ↩20 ↩21 ↩22 ↩23 ↩24 ↩25 ↩26 ↩27 ↩28 ↩29 ↩30 ↩31

  2. VS Codeでは異なる値が補完されます。 ↩ ↩2 ↩3 ↩4 ↩5

  3. VS Codeでは独自の初期値が補完されます。 ↩ ↩2 ↩3 ↩4 ↩5 ↩6 ↩7 ↩8 ↩9 ↩10 ↩11 ↩12 ↩13 ↩14 ↩15 ↩16 ↩17 ↩18 ↩19 ↩20 ↩21

179
163
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
179
163

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?