受付9:00～18:00 ※土日祝除く
2025.04.02Web制作
最終更新日：2025.03.28
Visual Studio CodeのEmmetでコーディングを効率化する
Visual Studio Codeの強力な機能のひとつが「Emmet」です。コーディングにおける予測変換機能と言ってよいでしょう。Google変換やATOKと同じく、使いすぎるとタイピングが下手になりそうなほど便利な機能です。
VScodeの専売特許のような書き出しですが、Emmetは多くのエディタにプラグインとして提供されていて、VScodeもそのひとつというだけです。秀丸でもさくらでもBracketsでもDWでも使うことができます。
それではEmmetの利便性を紹介していきます。CSSなどでは意識せずに使っていることも多いと思いますが、きちんと使うと効率化の強い味方になってくれます。本記事ではVS CodeのEmmetを例として使用します。
HTMLでEmmetを使う
予測変換と書きました。ですから単語を打った後、あるいは途中にTabキーを押すことで発動します。対象となる拡張子のファイルでしか機能しない点には注意しましょう。HTMLタグでしたら.html/.htm/.phpなどで機能します。
html5→Tabキーを押すことで下記が自動入力されます。doc→TabでもOK。TabではなくEnterでも同様です。本記事ではTabで統一しています。
htmlまで入力すると変換候補が出てきますのでそこからカーソルキーでhtml5を選択してEnterでも構いません。「Emmet 省略記法」と記載されているものがEmmet候補です。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>デフォルトでは英語設定になっているため、<html lang=”en”>を日本語に変える必要があります。
html langを日本語に変更する
デフォルトでlang=”ja”となるように設定を変更していきます。
VScodeの左下にある歯車マークをクリックし「設定」を選択します。
右上にあるドキュメントのアイコンを選択します。
このような設定ファイルが開きます。内容は環境によって異なります。
下記コードを追加します。上記画像がすでに追加した状態ですので参考にしてください。「,」で区切ってからコードを追加する点に注意してください。カンマを忘れるとエラーとなります。修正が完了しましたら保存してVScodeを再起動してください。
"emmet.variables": {
"lang": "ja"
},再起動について
VS Codeのアプリを閉じて再度開いても再起動したことにはならないので注意が必要です。Chromeなどもそうですが、プロセスを一旦終わらせる必要があります。「表示」から「コマンドパレット」を開き（ショートカット：ctrl+shift+p）、コマンド窓に「reload window」で再起動できます。
HTMLでEmmetを使う 続き
いろいろなタグの入力を試していきましょう。下記をそれぞれ入力してみてください。
h1→Tabキー
main→Tabキー
nav→Tabキー
section→Tabキー
<h1></h1>
<main></main>
<nav></nav>
<section></section>「.」や「#」のようにコードにおいて特殊な意味を持つものもそのまま使えます。
div.card→Tabキー
<div class="card"></div>container#service→Tabキー
<container id="service"></container>class名やidが挿入された状態で展開されました。
地味に便利なのが「.」や「#」で止める方法です。class名やidが空の状態になります。最初に全体の型を作りたいときなどに使えます。
div.→Tabキー
container#→Tabキー
<div class=""></div>
<container id=""></container>結局、一番使うのはこれかもしれません。
.sample→Tabキー
<div class="sample"></div>「.」や「#」はhtml/cssにとってclassやidを表す特別な意味のある記号でした。一方でemmetにとって特別な意味を持つ記号があります。
「+」「*」「>」「()」です。それぞれ見ていきましょう。
まずは「+」です。複数のタグを一気に入力できます。
h1+h2+h3+h4+h5+h6→Tabキー
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>次に「*」です。同じタグを指定した個数だけ入力できます。これは便利です。
li*5→Tabキー
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>「>」は入れ子にします。CSSで直下を意味するセレクタでもあるので直観的にわかりやすいですね。
ul>li→Tabキー
<ul>
<li></li>
</ul>組み合わせるとこういうことができて効率的です。olでも同様です。
ul>li*5→Tabキー
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>こうなってくると完全にプログラミングです。使いこなせないです。
ul>li.item$$$*5
<ul>
<li class="item001"></li>
<li class="item002"></li>
<li class="item003"></li>
<li class="item004"></li>
<li class="item005"></li>
</ul>
「()」は四則演算のように使えます。エクセルみたいですね。プログラマー脳でない自分のような人間は手で書いた方が速い気がしてきますが、やってみると意外と簡単です。
(section>h2+p+h3+p)*3→Tabキー
<section>
<h2></h2>
<p></p>
<h3></h3>
<p></p>
</section>
<section>
<h2></h2>
<p></p>
<h3></h3>
<p></p>
</section>
<section>
<h2></h2>
<p></p>
<h3></h3>
<p></p>
</section>組み合わせるとこういうこともできます。もはやほとんど完成しています。
body>(div.>nav.>ul.>li.*5)+main>(section>h2+h3+p)*3→Tabキー
<body>
<div class="">
<nav class="">
<ul class="">
<li class=""></li>
<li class=""></li>
<li class=""></li>
<li class=""></li>
<li class=""></li>
</ul>
</nav>
</div>
<main>
<section>
<h2></h2>
<h3></h3>
<p></p>
</section>
<section>
<h2></h2>
<h3></h3>
<p></p>
</section>
<section>
<h2></h2>
<h3></h3>
<p></p>
</section>
</main>
</body>
あとはデザイナーにはお馴染みのlorem ipsum。指定なしだと30ワード、指定ありだと指定数のダミーテキストができます。文字数でなくワード数なので長さがまちまちなのが玉に瑕。
lorem→Tabキー
lorem100→Tabキー
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quasi esse ipsum vitae, error eos temporibus aliquam consectetur magnam, voluptate ratione quis dolore, quisquam doloremque eaque magni. Ab necessitatibus accusamus dolorem.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facere ex possimus maiores earum, culpa delectus perferendis doloremque ea repellat qui illo officia debitis laborum, a natus ipsa fugiat ipsum sed veritatis corporis recusandae nemo totam. Eaque quibusdam iure doloribus ea! Aliquam earum laboriosam est laborum sint delectus eveniet ad? Sunt ratione quo totam eligendi nisi cumque similique perferendis error tempora officiis cupiditate quae nostrum ducimus vero soluta, laboriosam neque obcaecati quas magnam, praesentium at mollitia sit! Iusto laborum dicta ea provident tempora officiis sint? Eligendi iusto ipsa assumenda deleniti, recusandae asperiores natus aliquam id, repudiandae nulla minus facilis culpa aut.lorem ipsumがピンとこない方はLorem ipsumについてをご覧ください。海外のテンプレなどをDLするとよく書いてあるあれです。英語圏の人にとっての無意味な欧文の代名詞といったところです。昔あったトヨタのイプサムもこのipsumが語源のようです。
CSSでEmmetを使う
CSSでの使用の方が馴染み深いかもしれません。特に意識していなくても勝手に予測変換されますから。厳密に言いますと、「dis」と入力して出てくるのが予測変換、d→Tabキーで実行されるのがemmetです。あまり意識せず使いやすい方法を採用してください。
CSSプロパティのemmetは.css/.scssファイルで機能しますが、cssセレクタの中でしか発動しないようになっています。試す時は.sample{}などで囲んであげましょう。
displayプロパティだけでも下記の記法があります。
db→Tabキー
di→Tabキー
dib→Tabキー
dg→Tabキー
df→Tabキー
「d」の後にコロン「:」を入れても機能します。SCSSの場合、コロンなしでは別のプロパティになってしまうことがあるのでコロンありでクセをつけておいた方がいいかもしれません。
.sample {
display: block;
display: inline;
display: inline-block;
display: grid;
display: flex;
}d→Tabキーでもdbと同じですが、カーソルの位置がセミコロン「;」の前になって使いづらいのでdb推奨です。
w→Tabキー
h→Tabキー
p→Tabキー
m→Tabキー
width: ;
height: ;
padding: ;
margin: ;単位とセットでの入力も可能です。こちらの方が実用的です。
w1000→Tabキー
h100vw→Tabキー
p2em→Tabキー
m10%→Tabキー
width: 1000px;
height: 100vw;
padding: 2em;
margin: 10%;「%」は「p」、「em」は「e」、「rem」は「r」でも発動します。「p」はピクセルではなくパーセントになる点に若干注意でしょうか。
そのままclass名のようなこちらもよく使います。必要な単位と併せてどうぞ。mをpに変えればそのままパディングに、mをなくせばpositionの位置指定になります。
mt10
mr10
mb10
ml10
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;非常に便利なEmmetですが、楽しようとし過ぎると意外なところで引っかかるかもしれません。
posa→OK
poa→いけた！
pa→？？？
position: absolute;
position: absolute;
padding: auto;その他のプロパティも試してみてください。よく使うものから導入するだけでも、作業量がかなり減ると思います。いろいろな書式を勉強したい方はチートシートを参照してみてください。
Emmetの語源は？
「emmet」は英語で蟻（アリ）を意味する単語で、アリのように効率的で迅速に作業を進めることを目指していることを現しているようです。BTTFのエメット・ブラウン博士とは関係ないのですね。Emmetを使うときは頭の中でクリストファー・ロイドの顔が再生されていたので関係なくて残念です。
参考
お問い合わせCONTACT
株式会社エー・エム・ティーは
印刷物からホームページ制作・更新運用管理までトータルサポート。
企業様の課題解決や企業価値向上のお手伝いをいたします。