今回はVisual Studio Code(VSCode)のエメット機能を紹介します。これを知っておくと仕事が何倍もスピードアップする優れものなので、あまり詳しくないよという方は要チェックです！。
目次
VSCodeの便利機能エメットの使い方をご紹介【コーディング】
全体で使える便利機能→HTML→CSSの順に３つにまとめて紹介していきます。
全体で使える便利機能
まずは全体で使える便利機能を3つ紹介します。
command+→
選択中の行の末尾に移動してくれます。改行するときに便利です。
shift+option+↓
今カーソルがある行を下の行にそのままコピペします。<li>タグの複製などに便利です。
optionで複数選択
同名のクラスなどをまとめて変更したいときに使います。変更したい箇所にoptionキーを押しながら選択することで、一度に複数の文字の変更が行えます。
HTMLのエメット
これから紹介していくエメットは入力した後にTabキーを押して機能します。これはCSSの場合も同じなので覚えておいてください。
!
<!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>link:css,script:src
<link rel="stylesheet" href="style.css">
<script src=""></script>linkだけでも良いですが、:cssをつけると自動でstyle.cssになります。
.item.price
<div class="item price"></div>#box
<div id="box"></div>.item#box
<div class="item" id="box"></div>p{Hello}
<p>Hello</p>nav>ul>li>a
<nav>
<ul>
<li><a href=""></a></li>
</ul>
</nav>ナビゲーションを作るときに使えます。
ul>li*3
<ul>
<li></li>
<li></li>
<li></li>
</ul>a[href=#]
<a href="#"></a>ul>li*3>a[href=#]{about}
<ul>
<li><a href="#">about</a></li>
<li><a href="#">about</a></li>
<li><a href="#">about</a></li>
</ul>header+main+footer
<header></header>
<main></main>
<footer></footer>.item+.price>p
<div class="item"></div>
<div class="price">
<p></p>
</div>section>(div>h2+p)+div
<section>
<div>
<h2></h2>
<p></p>
</div>
<div></div>
</section>input:text,or,input:t
<input type="text" name="" id="">input:text[name=text]#text
<input type="text" name="text" id="text">ul>li.item$*3
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
</ul>$マークで連番になります。いちいち書き直す手間が省けますよ。
ul>li.item$$$*3
<ul>
<li class="item001"></li>
<li class="item002"></li>
<li class="item003"></li>
</ul>h$[title=item$]{item$}*3
<h1 title="item1">item1</h1>
<h2 title="item2">item2</h2>
<h3 title="item3">item3</h3>CSSのエメット
CSSmのエメットは数が多すぎるので、よく使うものだけピックアップして紹介します。予測変換で出てくるもの意外に絞っています。
poa
position: absolute;w10,h10,t10,r10,b10,l10,p10,m10
width: 10px;
height: 10px;
top: 10px;
right: 10px;
bottom: 10px;
left: 10px;
padding: 10px;
margin: 10px;m10:a
margin: 10px auto;df,jcc,aic
display: flex;
justify-content: center;
align-items: center;z1
z-index: 1;bxz
box-sizing: border-box;maw10,mih10
max-width: 10px;
min-height: 10px;bg#fff,bgu
background: #ffffff;
background: url();bdrs15
border-radius: 15px;op1
opacity: 1;c#fff
color: #ffffff;ff
font-family: serif;fz2em
font-size: 2em;lh15px
line-height: 15px;tdn
text-decoration: none;tac
text-align: center;まとめ
よく使うタグやCSSのエメットを覚えておくだけで作業スピードは何倍にも上がります。今回は私がよく使うエメットを紹介しましたが、エメットはまだまだたくさんあります。この機会に全て覚えて実際に使ってみましょう。プラグインなどもインストール不要です。デフォルトで用意されてある機能ですので、誰でもすぐに機能しますよ！あなたも早速使ってみてはどうでしょうか！！
