最近は会社ではwin、家ではmacなので、coda2からSublime Textを使うようになりました。 それと一緒にEmmetもつかうようになって便利だなーとか思いながらもいまいち使いこなせて無い気がしたので 改めて使い方をまとめてみました。

使い方

ctrl + e または tab でショートコードを展開出来ます。 ショートコードというのはコードを短縮したもの。 基本、タグはタグの名前を打って展開すれば閉じタグまで自動で書いてくれます。

覚えておきたいショートコード&ショートカット

.はclass,#はid
~~~ html

div#hoge

div.hoge
~~~
[○○○]で属性を追加
~~~ html

a[href=“https://www.google.co.jp”] ~~~

>で一つ下の階層へ移動
~~~ html

div>p

~~~
+で兄弟関係
~~~ html

ul>li+li

~~~
*○で○回繰り返し
~~~ html

ul>li*3

~~~
()でグループ化
~~~ html

ul>(li>a)*3

~~~
^で上の階層に戻る
~~~ html

div>h1>a^p

~~~
$で連番
~~~ html

ul>li.item$*3

~~~
{}でタグの中のテキストを指定
~~~ html

p{テキストが入ります}

テキストが入ります

~~~
loremでダミーテキスト
~~~ html

p>lorem

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, officia repellendus doloribus praesentium alias tempora ipsum eius modi vel nam inventore saepe quidem qui delectus architecto incidunt quisquam ea eligendi?

~~~
shift+option+/でコメントアウト
~~~ html

text