プログラミング

Emmet CheatSheet 省略記法まとめ

Emmetは、HTMLやCSSの記述・編集をサポートするプラグインです。
様々なエディタに対応しており、独自のスニペット等を登録すれば簡単なコードを記述するだけでコードを展開します。
Emmetは数多くのエディターにプラグインとして利用することができます。

公式サイト:https://emmet.io
ダウンロード:https://emmet.io/download/
CheatSheet(使い方一覧):https://docs.emmet.io/cheat-sheet/

Codaにインストール

今回は Mac(Ver 10.13) Coda2(2.6.6)にインストールしてみます。

インストールは 環境設定 > プラグイン > Coda プラグインを入手する

2018.03現在のバージョン: EditorConfig 1.0.2 by Panic Inc.

インストールが終了するとメニューバーに 「Emmet」が表示されます。

coda2 の場合基本的部分は無料でインストールできますが、高度の機能も有料で追加でインストールできす。

ライセンス購入サイト

購入するとメールでライセンスコードが送られてきます。登録して終了です。
ライセンスの登録:
Coda > メニューバー > Emmet > Unlock full Emmet Version..

Codaにインストール

Cheet Sheet まとめ 絞り込み、検索ツール 

nav>ul>li

nav>ul>li
--------------
<nav> <ul> <li></li> </ul> </nav>

div+p+bq

div+p+bq
--------------
<div></div> <p></p> <blockquote></blockquote>

div+div>p>span+em^bq

div+div>p>span+em^bq
--------------
<div></div> <div> <p><span></span><em></em></p> <blockquote></blockquote> </div>

div+div>p>span+em^^bq

div+div>p>span+em^^bq
--------------
<div></div> <div> <p><span></span><em></em></p> </div> <blockquote></blockquote>

div>(header>ul>li*2>a)+footer>p

div>(header>ul>li*2>a)+footer>p
--------------
<div> <header> <ul> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </header> <footer> <p></p> </footer> </div>

(div>dl>(dt+dd)*3)+footer>p

(div>dl>(dt+dd)*3)+footer>p
--------------
<div> <dl> <dt></dt> <dd></dd> <dt></dt> <dd></dd> <dt></dt> <dd></dd> </dl> </div> <footer> <p></p> </footer>

ul>li*5

ul>li*5
--------------
<ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>

ul>li.item$*5

ul>li.item$*5
--------------
<ul> <li class="item1"></li> <li class="item2"></li> <li class="item3"></li> <li class="item4"></li> <li class="item5"></li> </ul>

h$[title=item$]{Header $}*3

h$[title=item$]{Header $}*3
--------------
<h1 title="item1">Header 1</h1> <h2 title="item2">Header 2</h2> <h3 title="item3">Header 3</h3>

ul>li.item$$$*5

ul>li.item$$$*5
--------------
<ul> <li class="item001"></li> <li class="item002"></li> <li class="item003"></li> <li class="item004"></li> <li class="item005"></li> </ul>

ul>li.item$@-*5

ul>li.item$@-*5
--------------
<ul> <li class="item5"></li> <li class="item4"></li> <li class="item3"></li> <li class="item2"></li> <li class="item1"></li> </ul>

ul>li.item$@3*5

ul>li.item$@3*5
--------------
<ul> <li class="item3"></li> <li class="item4"></li> <li class="item5"></li> <li class="item6"></li> <li class="item7"></li> </ul>

#header

#header
--------------
<div id="header"></div>

.title

.title
--------------
<div class="title"></div>

form#search.wide

form#search.wide
--------------
<form id="search" class="wide"></form>

p.class1.class2.class3

p.class1.class2.class3
--------------
<p class="class1 class2 class3"></p>

p[title="Hello world"]

p[title="Hello world"]
--------------
<p title="Hello world"></p>

td[rowspan=2 colspan=3 title]

td[rowspan=2 colspan=3 title]
--------------
<td rowspan="2" colspan="3" title=""></td>

[a="value1" b="value2"]

[a="value1" b="value2"]
--------------
<div a="value1" b="value2"></div>

a{Click me}

a{Click me}
--------------
<a href="">Click me</a>)

p>{Click }+a{here}+{ to continue}

p>{Click }+a{here}+{ to continue}
--------------
<p>Click <a href="">here</a> to continue</p>

.class

.class
--------------
<div class="class"></div>

em>.class

em>.class
--------------
<em><span class="class"></span></em>

ul>.class

ul>.class
--------------
<ul> <li class="class"></li> </ul>

table>.row>.col

table>.row>.col
--------------
<table> <tr class="row"> <td class="col"></td> </tr> </table>

最近の記事

  1. wordpres5をubuntu nginxにインストール
  2. ubuntu 20.04 nginx php mysql Webサーバー環境整備
  3. Ubuntu nginx SSL
  4. EC-CUBE 4.0 インストール
  1. サーバー環境

    無料のSSL証明書 Let’s Encrypt 試してみました。
  2. プログラミング

    テキストを流れるように表示するjQueryプラグイン「jQuery.Marque…
  3. プログラミング

    Django Webアプリケーションの構築 デザイン要素としてbootstrap…
  4. プログラミング

    画像をポップアップするライトボックス jQuery プラグイン 「lightb…
  5. Web・デザイン

    CSS3 グラフィックス transform transition anima…
PAGE TOP