1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【VSCode】超便利Emmet機能でコードを簡単に作成して時短する方法

Posted at

個人メモです。

VSCodeでタグを生成するときに、補完機能(タグ名を入力してTABを押す)以外に、タグとクラスを一挙に生成するなど、様々な便利機能がある。

目次

  1. 使い方
  2. 開始タグと終了タグの生成
  3. クラス名のついたタグを生成
  4. タグの中にタグを生成
  5. 並列でタグを作成
  6. 掛け算でまとめて生成
  7. CSSプロパティを作成

使い方

Emmet(エメット)の書式に従って記述した後に、TABキーをクリックする。

1. 開始タグと終了タグの生成

タグ名

tag.gif

2. クラス名のついたタグを生成

タグ名.クラス名1.クラス名2....

divタグの場合はタグ名を省略可能。

div-emmet.gif

3. タグの中にタグを生成

タグ名>タグ名>タグ名....

クラス名を付けたい場合は、タグの後ろに.ドットマークをつける。

divdiv.gif

4. 並列でタグを作成

タグ名+タグ名+...

div+div.gif

5. 掛け算でまとめて生成

欲しいタグを指定した数だけ生成する。グループ化したい場合はカッコで囲む。

タグ名*数値
タグ名.クラス名*数値
(タグ名+タグ名)*数値
など

multi.gif

6. CSSプロパティを作成

CSSでもエメットを使うことができる。

css.gif

backgroundcolor

bg -> background: #000;
bg#ccc -> background: #ccc;

margin, padding

p6 -> padding: 6px;
p20-60-20 -> padding: 20px 60px 20px;
m8 -> margin: 8px;
m10-20-15-8 -> margin: 10px 20px 15px 8px;

font-weignt, font-size

fz -> font-size: ;
fz16 -> font-size: 16px;
fwb -> font-weight: bold;
fw500 -> font-weight: 500;

display

df -> display: flex;
db -> display: block;
di -> display: inline;
dib -> display: inline-block;

position

por -> position: relative;
poab -> position: absolute;

いちいち記憶するというよりはそれっぽい頭文字や2語を入力すると候補が表示されるので、絞り込んでいけばOK。
1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?