プログラミング

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. プログラミング

    PDOで郵便番号辞書データベース構築の記録
  2. プログラミング

    Google Maps Platform 位置情報取得、緯度経度より住所取得
  3. Ubuntu nginx SSL

    サーバー環境

    ubuntu nginx SSL Webサーバー構築
  4. Web・デザイン

    Photoshop ショートカットキーデータベース化 カテゴリ別絞り込み hov…
  5. Web・デザイン

    CSS3 機能 セレクタ、target擬似クラス、構造擬似クラスについて学ぶ
PAGE TOP