VSCodeの便利機能エメットの使い方をご紹介【コーディング】

  • LINEで送る

今回はVisual Studio Code(VSCode)のエメット機能を紹介します。これを知っておくと仕事が何倍もスピードアップする優れものなので、あまり詳しくないよという方は要チェックです!。

VSCodeの便利機能エメットの使い方をご紹介【コーディング】

全体で使える便利機能HTMLCSSの順に3つにまとめて紹介していきます。

全体で使える便利機能

まずは全体で使える便利機能を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のエメットを覚えておくだけで作業スピードは何倍にも上がります。今回は私がよく使うエメットを紹介しましたが、エメットはまだまだたくさんあります。この機会に全て覚えて実際に使ってみましょう。プラグインなどもインストール不要です。デフォルトで用意されてある機能ですので、誰でもすぐに機能しますよ!あなたも早速使ってみてはどうでしょうか!!

 

 

 

  • LINEで送る

SNSでもご購読できます。

コメントを残す

*