Help us understand the problem. What is going on with this article?

Emmetの基本的な書き方

概要

Emmetの基本的な書き方のまとめです。

Emmetとは?

決められた書き方を入力することで、HTMLやCSSなどに変換してくれるテキストエディタの拡張用ソフトウェアです。テキストエディタにインストールすれば使えます。決められた書き方を覚えれば、素早く書くことができます。

環境

  • OS:MacOS
  • テキストエディタ:VSCode

※VSCodeにはEmmetが最初からインストールされています。

書き方(HTML編)

基本

タグ名を書いてEnterを押すだけ。
例)div って書くと、、、divタグに変換してくれます。
スクリーンショット 2020-01-23 10.30.22.png
※Emmet Abbrevation!:タグ名を書くと、「Emmet Abbrevation!」が表示される。クリックすると展開内容が表示されます。
※タブストップ:「|」の表示が入力位置となります。Tabキーを押すと、次の「|」の入力位置に移動できます。

id属性(class属性)を同時に書く

例)div#login.btn.red って書くと、
スクリーンショット 2020-01-23 10.35.03.png

属性を同時に複数書く

例)div[data-id="1" title="site"] って書くと、
スクリーンショット 2020-01-23 10.51.09.png

同じタグを複数書く

例)p*3 って書くと、、、
スクリーンショット 2020-01-23 11.07.59.png

class属性を連番で書く

例)div.id$*5 って書くと、
スクリーンショット 2020-01-23 11.10.46.png
※「$」の数で桁数も指定できる。
※「$@2」で連番を2から始めることもできる。

id属性(class属性)だけ書くと、divになる

スクリーンショット 2020-01-23 11.24.12.png

すでに書かれたタグを囲う方法

① 囲う範囲を選択
② ⌘ + Shift + p を押す
③ wrap と入力
④ ラップ変換(Emmet:Wrap with Abbreviation)を選択
⑤ 囲うタグをEmmet記法で入力

ベタ書きをHTMLに変換する方法

① 変換する範囲を選択
② ⌘ + Shift + p を押す
③ wrap と入力する
④ 個々の行でラップ変換(Emmet:Wrap Individual Lines with Abbreviation)を選択
⑤ 囲うタグをEmmet記法で入力する
スクリーンショット 2020-01-23 13.46.33.png
※取り除く |t を使うといい。

参考

https://docs.emmet.io/cheat-sheet/

kor0103
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした