Web制作

爆速コーディング!Emmetの使い方・書き方とVSCodeの設定を解説

※ 当サイトではアフィリエイト広告を利用しています

効率よくコーディングする方法ない?
Emmetを使うと爆速コーディングできるようになるよ!

コーディングをする際、例えばjustify-content: space-between;と入力するとします。

これは文字数で言えば30文字もあり、全て入力するのは大変且つスペルミスのリスクもあります。

しかしEmmetを使うとjcsbの4文字+EnterキーかTabキーを押せば一瞬で書けます。

つまり、

  • タイピング量が減り時短になる
  • タイピング量が減り疲れにくくなる
  • スペルミスのリスクが減る

などなど、メリットだらけです。

これを活用していないコーダーはいないと思うので、勉強を始めたばかりの方は早めに習得しておきましょう。

今回はVSCodeというテキストエディタで解説していくので、まだインストールしていない人は以下の記事を参照下さい。

あわせて読みたい
【初心者向き】VSCodeのインストールと日本語化する方法を画像で解説
【初心者向き】VSCodeのインストールと日本語化する方法を画像で解説

続きを見る

この記事がおすすめな人

  • 効率よくコーディングをしたい
  • コーディングでスペルミスを減らしたい
  • Emmetについて知りたい

 

完全無料のプログラミングスクール『ZeroPlus Gate』
30日間でWeb制作を学べる無料のプログラミングスクールがこちら
  • 30日間でWeb制作を学べる
  • 完全無料
  • 現役エンジニアへの質問無制限
  • オンラインの動画学習なので時間場所を問わず勉強可能
  • 最大4回の学習サポート面談
  • 受付は1日25名までの先着制
無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。
いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。
現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

\ 完全無料 /

ZeroPlus Gate公式サイト

先着1日25名まで!

Emmet(エメット)とは?

Emmet公式サイト

Emmet公式サイト

Emmetとは、HTMLやCSSを省略記法で素早く入力できるテキストエディタ用のプラグインです。

例えばHTMLでsection.aboutと入力してEnterキーかTabキーを押すと、以下のように展開されます。

<section class="about"></section>

これを全部入力しようとすると面倒ですが、section.aboutだけで済むのでコーディングの効率化には欠かせません。

またCSSでも同様で、例えばjcsbと入力してEnterキーかTabキーを押すと、以下のように展開されます。

justify-content: space-between;

そしてEmmetはテキスト用のプラグインと書きましたがVSCodeにはデフォルトで備わっているので、プラグインのインストールや有効化などはする必要はありません。



VSCodeでEmmetが使えない時の対処方法

先ほどVSCodeでデフォルトで使えると書きましたが、もし使えない場合は以下の手順で設定を確認してみましょう。

VSCodeでEmmetが使えない時の対処方法

  • VSCodeの設定画面を開く
  • 検索窓で『Emmet』と検索
  • 3つの設定を確認
  • VSCodeを再起動

 

手順①:VSCodeの設定画面を開く

まずはVSCodeを起動して左下の歯車アイコンをクリックして『設定』をクリックします。

VSCode:歯車アイコン→設定

VSCode:歯車アイコン→設定

 

手順②:検索窓で『Emmet』と検索

設定画面を開いたら、検索窓で『Emmet』と入力します。

VSCode:検索窓で『Emmet』と入力

VSCode:検索窓で『Emmet』と入力

 

手順③:3つの設定を確認

検索窓で『Emmet』と入力すると、Emmet関連の設定が表示されます。

その中で確認するのは以下の3つになります。

Emmetの設定で確認する項目

  • Show Abbreviation Suggestions → チェックを入れる
  • Show Expanded Abbreviation → alwaysを選択
  • Trigger Expansion On Tab → チェックを入れる
VSCode:Emmetの設定

VSCode:Emmetの設定

VSCode:Emmetの設定

VSCode:Emmetの設定

チェックを入れたり選択すれば自動で設定は保存されます。

 

手順④:VSCodeを再起動

ここまででまだ使えるようになっていない場合は、VSCodeを再起動してみましょう(それでもダメならアンインストールして再インストール)



VSCodeのEmmetおすすめ設定

Emmetが使えるようになったら、いくつか設定を変更しておきましょう。

ただしこれは必須ではないので、好みに応じて変更して下さい。

 

lang属性を日本語に変更(lang="ja")

デフォルトではhtml:5と入力してEnterキーを押すとこちらが展開されます。

<!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>

しかし2行目がlang="en"lang属性が英語になっているので、これを日本語にするには以下のように設定します。

VSCode:歯車アイコン→設定

VSCode:歯車アイコン→設定

VSCode:画面右上のアイコンをクリック

VSCode:画面右上のアイコンをクリック

すると『settings.json』が開くので、以下のコードを追記します。

"emmet.variables":{
  "lang": "ja"
}

すると次からhtml:5と入力してEnterキーを押すとこうなります。

<!DOCTYPE html>
<html lang="ja">
<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>

 

閉じタグの後ろにコメントアウトを表示

例えば以下のようなHTMLがあったとします。

<div class="sample"></div>
<!-- /.sample -->

この<!-- /.sample -->がコメントアウトで、ここではclass名が表示されています(idの場合もあり)

これを自動で表示させるには.sample|cと入力してEnterキーを押します。

VSCode:デフォルトのコメントアウト自動表示

VSCode:デフォルトのコメントアウト自動表示

しかし|cを省略して.sampleと入力すれば表示できるように設定可能です。

詳しくは以下の記事を参照下さい。

あわせて読みたい
【VSCode】HTMLで閉じタグの後ろにコメントアウトを自動挿入する方法
【VSCode】HTMLで閉じタグの後ろにコメントアウトを自動挿入する方法

続きを見る



HTMLのEmmet記法(書き方)

それではまずHTMLのEmmet記法を解説していきます。

冒頭の例だと以下のように書いていきます。

1行目を入力してEnterキーかTabキーを押すと、コードが展開されるという見方です。

section.about

<section class="about"></section>

そしてここでご紹介するのはこちらになります。

入力するキー展開されるコード
!HTMLの雛形
要素名要素の開始タグと閉じタグ(終了タグ)
.class名classが付いたタグ
#id名idが付いたタグ
.class名#id名classとidが付いたタグ
>要素を入れ子(ネスト)にする(左が親要素、右が子要素)
*数字数字の数だけ繰り返す
$連番の数字
+兄弟要素(同じ階層)
()グループ化
^一つ上の階層に戻る
{テキスト}テキストを入力して展開
loremダミーテキストを出力(Lorem Ipsum)

それでは1つずつ見ていきます。

 

『 ! 』でHTMLの雛形を展開

!

<!DOCTYPE html>
<html lang="ja">
<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>

 

『要素名』で要素を展開

h1

<h1></h1>

section

<section></section>

div

<div></div>

 

『.』でclass名を付ける

個人的にはこれが一番よく使います。

h1.title

<h1 class="title"></h1>

divタグの場合は省略可能です。

.inner

<div class="inner"></div>

 

『#』でid名を付ける

section#about

<section id="about"></section>

これもdivタグの場合は省略可能です。

#main

<div id="main"></div>

 

『.』と『#』でclass名とid名を同時に付ける

section.about#js-about

<section class="about" id="js-about"></section>

js-○○というid名は、JavaScriptで使用する時に書くと分かりやすいです。

 

『>』で入れ子(ネスト)を展開

ul>li

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

 

『*』で要素を繰り返す

*3という書き方をすると『×3』という意味になり、要素を複数展開することも可能です。

ul>li*3

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

 

『$』で連番を展開

ul>li.item$*5

<ul>
  <li class="item1"></li>
  <li class="item2"></li>
  <li class="item3"></li>
  <li class="item4"></li>
  <li class="item5"></li>
</ul>

これは要素を繰り返す『*』を書かないと1つしか展開されません。

ul>li.item$

<ul>
  <li class="item1"></li>
</ul>

 

『+』で兄弟要素を展開

header+section

<header></header>
<section></section>

 

『()』でグループ化して展開

table>(tr>td*2)*3

<table>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

ちなみにこれだと展開されません。

table>tr>td*2*3

 

『^』で一つ上の階層に戻る

ul>li^div

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

もし『^』ではなく『>』の場合はこのようになります。

ul>li>div

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

 

『{テキスト}』でテキストを入力して展開

h1{タイトル}

<h1>タイトル</h1>

 

ダミーテキスト(Lorem Ipsum) を出力

これはダミーテキストとして有名な『Lorem Ipsum』を出力します。

lorem

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia tenetur unde molestiae et quas sint esse. Harum atque similique sint placeat voluptatibus aliquid hic odio dolorem? Corporis ex dolores culpa?

ダミーテキストはWordPressの投稿ページで崩れのチェックなどでよく使うので、覚えておくと便利かと思います。



CSSのEmmet記法(書き方)

続いてCSSのEmmet記法を解説していきます。

CSSはプロパティ名の頭文字を入力してEnterキーかTabキーを押すと展開されます。

m

margin: ;

ここで、

mから始まるプロパティなんてたくさんあるでしょ

と思うかも知れませんが、このようにたくさん候補が出現します。

 Emmet:CSSで『m』と入力した時に表示される候補

Emmet:CSSで『m』と入力した時に表示される候補

この中で先頭にあるのがmargin: ;ということです(一番使用頻度が高い)

そしてmargin-topの場合はこのように書きます。

mt

margin-top: ;

このように頭文字を組み合わせる形になるので、覚えなくても直感的に分かるかと思います。

ただし全てが頭文字というわけではなく、以下のような場合もあります。

fz

font-size: ;

 

数値と単位を組み合わせる

さらに数値を入力することも可能です。

mt10

margin-top: 10px;

なにも単位を書かない場合はpxになりますが、例えばrと書くとremになります。

mt10r

margin-top: 10rem;



CSSでよく使うプロパティ

CSSのプロパティはもの凄い数があるので覚える必要はなく、先ほど書いたように直感的に書けると思います。

ここではよく使うプロパティをご紹介します。

 

よく使うプロパティ

プロパティ展開されるコード
dbdisplay: block;
dibdisplay: inline-block;
bndisplay: none;
wwidth: ;
mawmax-width: ;
miwmix-width: ;
hheight: ;
mahmax-height: ;
mihmin-height: ;
psrposition: relative;
psaposition: absolute;
psfposition: fixed;
ttop: ;
rright: ;
bbottom: ;
lleft: ;
zz-index: ;

 

余白(margin・padding)

プロパティ展開されるコード
mmargin: ;
mtmargin-top: ;
mrmargin-right: ;
mbmargin-bottom: ;
mlmargin-left: ;
ppadding: ;
ptpadding-top: ;
prpadding-right: ;
pbpadding-bottom: ;
prpadding-left: ;

marginpaddingは上下左右の4方向で設定可能で、まとめたショートハンドもあります。

m10-20-30-40

margin: 10px 20px 30px 40px;

 

フォント(font)

プロパティ展開されるコード
fzfont-size: ;
fwfont-weight: ;
fffont-family: ;
fsfont-style: italic;
ccolor: ;

 

テキスト(text)

プロパティ展開されるコード
tatext-align: left;
tactext-align: center;
tdntext-decoration: none;
lhline-height: ;
lsletter-spacing: ;

 

背景(background)

プロパティ展開されるコード
bgbackground: #000;
bgcbackground-color: #fff;
bgibackground-image: url();
bgrnbackground-repeat: no-repeat;
bgpbackground-position: 0 0;
bgszbackground-size: ;

 

線(border)

プロパティ展開されるコード
bdborder: 1px solid #000;
bdnborder: none;
bdtborder-top: 1px solid #000;
bdrborder-right: 1px solid #000;
bdbborder-bottom: 1px solid #000;
bdlborder-left: 1px solid #000;
bdrsborder-radius: ;

 

Flexbox

プロパティ展開されるコード
dfdisplay: flex;
aicaling-items: center;
fxwflex-wrap: ;
fxdflex-direction: ;
jccjustify-content: center;

まとめ

今回はコーディングが爆速になるEmmetについて解説してきました。

全て覚える必要はありませんが、自分がよく使うものだけでも覚えておくとコーディングがスムーズにできると思います。

また公式サイトに全てを網羅したようなチートシートが載っているので、こちらも参考にするといいと思います。

Cheat Sheet

以上になります。

 

Web制作おすすめ教材と案件獲得サービス
当ブログではWeb制作学習におすすめの教材を厳選してご紹介しています。
こちらの記事を参考に教材を購入して成果を出している人もたくさんいるので、自分に必要な教材を探してみて下さい。
また、学習面だけでなく営業面である案件獲得サービスもご紹介しています。
スキルが身についても仕事がなければ意味がないので、営業に不安がある人はこちらの記事をぜひ参考にしてみて下さい。
この記事を参考にスキルと営業力を身につけて稼げるようになりましょう!

-Web制作
-