【VS CODE】Emmetを使って時短&ミスを減らす方法

コードのケアレスミスに悩むカメ

プログラミングのコードを書いてもなんか反映されないな〜と思って、見返してみたらタグがちゃんと閉じてなかったり、単純にケアレスミスなことが多いな〜
気がついたらあっという間に時間が過ぎてしまうこともよくあるな〜
そういう時は、Emmetという記法を使うとすぐにタグが出てくるから便利で間違えにくくなるよ〜
時短にもなるしコードを書くならよく使うパターンだけでも覚えおきたいね

VS CODEには元々Emmetが入っているからすぐに使うことができるよ〜♪

学び続けるウサギ

コードのケアレスミスに悩むカメ

そんな便利な機能があるんだね〜 日が暮れてく前にEmmetを使って簡単なミスをなくしてサクサクと進めていきたいな〜!

「コードを書くのにとにかく時間がかかる…」

「なんか動かないと思ったらタイプミスしてた..」

上記のように思われる方に役立つ記事になってます。

VS CODEには、元々Emmetが入っているのですぐに使うことができます。

それぞれの記号などを打ち込んでから、return(enter)やtabをクリックすると出てきます。

コードを打ち間違えて修正すると、思ったよりも時間がかかってしまうこともありますよね。

Emmetを使うと楽々コードの予測が出てきて、閉じタグも出てくるので間違えにくくなります。

今回は、VS CODE(Visual Studio Code)で使える便利なEmmetをご紹介していきたいと思います。

VS CODEでコードを書くときに役に立つEmmet一覧

Emmet(ショートハンド) コード
!もしくはhtml:5
<!DOCTYPE html>から続くHTML5のひな型
link:c
<link rel="stylesheet" href="style.css">
ul>li*3
<ul>
 <li></li>
 <li></li>
 <li></li>
</ul>
nav>ul>li*4>a
<nav>
 <ul>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
 </ul>
</nav>
<dl>
 <dt></dt>
 <dd></dd>
 <dt></dt>
 <dd></dd>
 <dt></dt>
 <dd></dd>
</dl>
#header
<div id="header"></div>
.header
<div class="header"></div>
p{} <p>文字が入る</p>
m0-a margin: 0 auto;
tac text-align: center;
c#f color: #fff;
bg#f
background: #fff;
fz16
font-size: 16px;
fz1.6r
font-size: 1.6rem;
ma100%
max-width: 100%;
df
display: flex;
jcsb
justify-content: space-between;
aic
align-items: center;

上記のように便利なEmmetがたくさんありますね。

左側の記号を打ち込んでtabやenterキーを押すと右側のコードが展開されて出てきます。

今回は全部書ききれないので実際にEmmetを使用して「便利だな♪」と思ったものを書いておきました。

<!-- !と記述してtabやenter(return)キーで展開 -->

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

!もしくはhtml:5でHTML5のひな型(テンプレート)を呼び出すことができます。

!の方が一文字なので時短ですね。

わざわざドックタイプ宣言から記述しなくて良いので楽です。

最初に使ってみたときは感動して呪文を唱える魔法使いのような気持ちになりました笑

言語が英語になっているので「en」を「ja」に変えます。

必要のないmetaタグがある場合は削除します。

<!-- link:c -->
<link rel="stylesheet" href="style.css">

cssを読み込むタグを呼び出すことができます。こちらは、head内に記述します。

<!-- ul>li*3 -->
<ul>
 <li></li>
 <li></li>
 <li></li>
</ul>

親要素のulタグの中に子要素のliタグつほど呼び出すことができます。

リストタグも便利なのでよく使用しますね。

*は×(掛け算)を意味するので数字を変えればその分が出てきます。

その後に>aでリストタグの中にaタグを入れることもできます。

ナビメニューなどでよく書くと思うので手間が省けますね。

olタグなどでも同じように呼び出すことができます。

VS CODEでid名やclass名をつける時の時短法

<!-- div#contactもしくは#contactと記述 -->
<div id="contact"></div>
 
<!-- .sectionと記述 -->
<div class="section"></div>

例として、今回はdivで囲んでます。

contactの名前やクラス名はその箇所に適した名前にしてあげます。

id名やclass名をつけるだけで、VS CODEでは標準でdivに変換してくれるようになっているので、divで囲みたい時は、上記例のように、div#contact#contact.sectionなどで反映されますね。

コードのケアレスミスに悩むカメ

div以外も記述したい

divじゃなくて例えばh2タグにクラス名を付けたいときは、

h2.titleと入力してtabもしくはenterキーを押すと

<h2 class="title"></h2>と変換されます。

文字をタグ内に入れる方法

<!-- p{こんにちは} -->
<p>こんにちは</p>

<!-- a{アクセス} -->
<a href="">アクセス</a>

<!-- a.btn{ボタン} -->
<a href="" class="btn">ボタン</a>

波カッコ{}を使うと文字がセットで表示されます。

タグと入力したい文字を一気に入力することができるので便利ですよね。

CSSファイルで時短に使えるEmmet

/* m */
margin: ;

/* m0-a */
margin: 0 auto;

マージンといちいち書かなくて良いので楽ですね。

m10と書けばmargin: 10px;になります。

mb10と書けばmargin-bottom: 10px;になります。

上下10px、左右20pxにしたい時は、

m10-20とつなげて書くと、margin: 10px 20px;になります。

m0-aと書くと、margin: 0 auto;になります。

上下が0で左右が自動のauto設定は結構使われると思いますので便利です。

m10r-0-10rと書くと上と左右と下の順で記述できます。

margin: 10rem 0 10rem;
これを最初知らなくていちいち書き直してたので記述するのに時間がかかりました。
上下の幅だけを取りたい時に便利ですね。
/* p */
padding: ;

マージンと同様にパディングも内側の余白調整などでよく使うので、アルファベット一文字で出てくれるのが楽ですね。

/* tac */
text-align: center;

テキストや画像などの水平方向中央揃えにするプロパティもよく使いますね。

私はタックという風に覚えました笑

 

Emmetを使用すると時短だけでなく記述ミスを減らすこともできるところが良いですね。

Emmetを覚えたカメ

少しだけど速くミスらなくコードを記述できるようになったよ! thank you〜♪

まとめ:Emmetでらくらくコードを書こう!

今回は、VS CODE(ブイエスコード)で役に立つEmmetについてご紹介・記述してきました。

Emmetを覚えておくと、時短になりケアレスミスも減らすことができるので重宝します。

徐々に覚えて使用してみてください。

VS CODEをさらに快適に使う方法については、【エディタ】VS CODEの快適な使い方【Microsoft】の記事を参考にしてみてください。

Web制作初心者におすすめのオンラインスクール

コメントを残す

メールアドレスが公開されることはありません。