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

備忘録_Emmet

More than 3 years have passed since last update.

ちょこちょこ追加修正しないと・・・

> 子要素として展開する

ul>li>a

<ul>
  <li><a href=""></a></li>
</ul>

+ 隣接した要素(隣り合わせ配置)

dl>dt+dd

<dl>
  <dt></dt>
  <dd></dd>
</dl>

^ 上の階層(続けて配置)

div>p^div

<div>
  <p></p>
</div>
<div></div>

IDやクラスをつける

ul#hoge>li.moge

<ul id="hoge">
  <li class="moge"></li>
</ul>

IDやクラスを複数つける

p#id1.class1.class2

<p id="id1" class="class1 class2"></p>

divの省略

main^.sub

<div id="main"></div>
<div class="sub"></div>

連番と繰り返し

ul>li#item$*5

<ul>
  <li id="item1"></li>
  <li id="item2"></li>
  <li id="item3"></li>
  <li id="item4"></li>
  <li id="item5"></li>
</ul>

降順に番号をつける

ul>li#item$@-*3

<ul>
  <li id="item3"></li>
  <li id="item2"></li>
  <li id="item1"></li>
</ul>

開始番号を指定して、番号をつける

ul>li#item$@5*3

<ul>
  <li id="item5"></li>
  <li id="item6"></li>
  <li id="item7"></li>
</ul>

まとめて展開する

dl>(dt+dd)*3

<dl>
  <dt></dt>
  <dd></dd>
  <dt></dt>
  <dd></dd>
  <dt></dt>
  <dd></dd>
</dl>

属性・値を指定する

a[href=# target=_blank]

<a href="#" target="_blank"></a>

文字列を入れる

div>p{テキスト}

<div>
  <p>テキスト</p>
</div>

ul>li*3>a{メニュー$}

<ul>
  <li><a href="">メニュー1</a></li>
  <li><a href="">メニュー2</a></li>
  <li><a href="">メニュー3</a></li>
</ul>

ダミー文章を入れる

lorem

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore id minus dolorem architecto, neque voluptatibus et, culpa iste ad, voluptas perspiciatis magni earum. Ex ipsum eum mollitia, eius sint, est.

p>lorem5

<p>Lorem ipsum dolor sit amet.</p>

|e 特殊文字をエンコードして出力

div>p|e

&lt;div&gt;
  &lt;p&gt;&lt;/p&gt;
&lt;/div&gt;

|c 閉じたタグの後にIDやクラスをコメントで出力

main>p^.sub>p|c

<div id="main">
  <p></p>
</div>
<!-- /#main -->
<div id="sub">
  <p></p>
</div>
<!-- /.sub -->

|s シングルラインで出力

ul>li*3|s

<ul><li></li><li></li><li></li></ul>

捕捉機能

Wrap変換(Ctrl + Shift + G)

特定の範囲を選択し、Emmetのコードを入力するとその前後に開始タグを終了タグを追加してくれる

展開済みのHTMLを更新(Ctrl + Shift +U)

すでに展開済みのHTMLを更新できる
※出現したウィンドウに入力することで追加できる

画像の幅・高さ情報を追加(Ctrl + U)

保存済みのHTMLの画像パスのところにカーソルを合わせて「Ctrl + U」で、画像の幅・高さを追加することができる

編集点間の移動(Ctrl + Alt + ← or →)

属性の値などの編集点を移動するショートカット

最後に

Emmetのチートシート

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

y_sekitoba
異業種からweb業界へ転職。 基本的に備忘録がメインです。
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
ユーザーは見つかりませんでした