htmlやCSSなど、コーディングする人の大変さといったら…もうほんとに大変。
タイピングが得意な人でも全て手書きでコーディングしていたら相当大変だと思います。
今は色々と便利なツールが出てきてるので数年前と比べたら相当便利で簡単にはなってきていますが、私が知る中でEmmetを超えるものは未だ出会ってません。（私が知らないだけなので良いものがあったら教えてください☆）
このページをブックマークされるとEmmetのショートコードを忘れた時に便利です。
下記目次よりご希望の項目まで移動することが出来ます。
・Emmet（エメット）のダウンロード（Dreamweaverに入っていない方用）
・EmmetのDreamweaver CC 2017での使い方詳細
・私がDreamweaver CC 2017でよく使うEmmetのショートコード一覧
・まとめ
Contents
- 1 Emmet（エメット）ってなに？
- 2 Emmet（エメット）のダウンロード（Dreamweaverに入っていない方用）
- 3 EmmetのDreamweaver CC 2017での使い方詳細
- 3.1 今までのEmmetとDreamweaverの関係
- 3.2 私がDreamweaver CC 2017でよく使うEmmetのショートコード一覧
- 3.2.1 まずはhtmlのショートコードから
- 3.2.2 IDを付与したdivを作る方法（#ID名）
- 3.2.3 classを付与したdivを作る方法（.クラス名）
- 3.2.4 複数の同じ要素を作る方法（*必要数）
- 3.2.5 classに連番を付ける方法（.クラス名$）
- 3.2.6 連番のclassを付与した複数の同じ要素を作る方法（.要素名*必要数）
- 3.2.7 入れ子（ネスト）を使う方法（要素名>要素名）
- 3.2.8 入れ子（ネスト）＋複数要素を作る（上記の複合）
- 3.2.9 入れ子（ネスト）の子要素に連番のクラスを付ける方法（少し応用）
- 3.2.10 さらに要素内に文字列を挿入する方法（{}） ※「()」も使った少し上級編
- 3.2.11 画像要素を作る方法（img）
- 3.2.12 画像のソースも指定する方法（img[src=パス.拡張子]）
- 3.2.13 連番の画像名など時に便利な方法(img[src=/images/image$$.拡張子]*必要数)
- 3.2.14 上記のaltに文字を入れる方法（ alt=）
- 3.2.15 同じ階層に要素を作る（+）
- 3.2.16 階層を戻る（^）※少し上級編
- 3.2.17 私がよく使うCSSのショートコード
- 3.2.18 width・height
- 3.2.19 padding・margin
- 3.2.20 display系
- 3.2.21 background系
- 3.2.22 border系
- 3.2.23 float・position・overflow
- 3.2.24 その他
- 3.3 実際に超使うCSSの記述パターンサンプル
- 4 まとめ
Emmet（エメット）ってなに？
そもそもEmmetってなに？？という方もいらっしゃると思いますので簡単に説明しますね☆
エメットを一言で説明すると、
『コーディングの効率、速度、正確さを信じられない位上げまくってくれる神ツール』
これですね（笑）
Emmetは以前までDreamweaverに入れて使うのが非常にやっかいだったのですが、Dreamweaver CC 2017にはデフォルトで入っているのでそのまま使うことができます。
こんな神ツールがデフォルトで入っているのに使ってないなんて勿体なさすぎます。
ではどう神ツールっぷりを発揮してくれるのかをご紹介します。
たった数文字でコードを書ける
まずはこれが1番！
Emmetの1番便利な所は「たった数文字で」ものすごい量のコードが書けちゃうところです。
言葉で説明してもなかなか伝わりにくいと思うので一例を挙げてみますね☆
例えばこんなコードを書くとします。
<div id="testArea">
<div class="testBox">
<ul>
<li class="test01"><a href="#"><img src="images/sample01" alt="#"></a></li>
<li class="test02"><a href="#"><img src="images/sample02" alt="#"></a></li>
<li class="test03"><a href="#"><img src="images/sample03" alt="#"></a></li>
<li class="test04"><a href="#"><img src="images/sample04" alt="#"></a></li>
<li class="test05"><a href="#"><img src="images/sample05" alt="#"></a></li>
<li class="test06"><a href="#"><img src="images/sample06" alt="#"></a></li>
</ul>
</div>
</div>
これをEmmetで書くと…
#testArea>.testBox>ul>(li.test$$>a[href=#]>img[src=images/sample$$ alt=#])*6
となります。
たったこれだけで、あとはEmmetの[展開]で全く同じコードが出来上がります。
他にも、
<div id="testArea02">
<div class="testMain">
<table class="testTable">
<tbody>
<tr>
<th>サンプル01</th>
<td>テキスト01</td>
<td>テキスト02</td>
<td>テキスト03</td>
</tr>
<tr>
<th>サンプル02</th>
<td>テキスト01</td>
<td>テキスト02</td>
<td>テキスト03</td>
</tr>
</tbody>
</table>
</div>
</div>
| サンプル01 | テキスト01 | テキスト02 | テキスト03 |
|---|---|---|---|
| サンプル02 | テキスト01 | テキスト02 | テキスト03 |
こんな感じのよくあるtableを書く時も、
#testArea02>.testMain>table.testTable>tbody>(tr>th{サンプル$$}+(td{テキスト$$}*3))*2これだけでOK！
もちろんCSSでもEmmetはバリバリ使えます。
これも後ほど説明しますね☆
ミスタイプが激減
たった数文字でコードが書けるので、絶対的にタイプミスが減ります。
例えば、CSSでボタンの角を丸くしようとborder-radiusを5pxずつかけるとします。
まず間違えることはないとは思いますが、
[borderradius][border-radeus]など、単語はわかっていても「ミスタイプに気が付かなかった」と言うことはよくある話です。
「border-radiusを5pxずつ」をEmmet仕様で書いたら
bdrs5
となります。数字を入れてもたった5文字になりましたね☆
それでは実際にCSSファイルに[bdrs5]と書いてTabを押すとどうなるかと言うと、
border-radius: 5px;
となります。
自動で補完してくれるのでスペルミスなんてありませんね☆
他にも私の大好きな[display: flex;]なども、
df ←これをEmmetで展開すると、 display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;
といったようにしっかりベンダープレフィックスまで付けて展開されます。
これでもうコピペしてベンダープレフィックスを手書きして…なんて事とはおさらばです(笑)
※全てのベンダープレフィックを完璧に補完してくれるというわけではないと思います。
Emmet（エメット）のダウンロード（Dreamweaverに入っていない方用）
それではEmmet（エメット）をダウンロードしましょう。
※上の画像をクリックしてもダウンロードページへ移動できます。
※Extension Managerをお持ちでないかたはこちらからダウンロード出来ます。
上記ダウンロードページに行ったら画像の赤丸で囲っている「Emmet.zxp」をクリック
するとダウンロード確認になりますので赤丸の「OK」をクリック
次に免責事項を読んで問題なければ赤丸の「承諾する」をクリック
証明書の注意喚起の画面になりますが問題ないようでしたら「インストール」をクリック
これでExtension ManagerからインストールOK！
EmmetのDreamweaver CC 2017での使い方詳細
今までのEmmetとDreamweaverの関係
私はEmmetの前身であるZen-cordingの時代から使ってますが、Dreamweaver CCにデフォルト対応されたのは2017からです。
それまでは「brackets」だったり「sublime text」でEmmetを使うのは簡単でしたが、Dreamweaverで使うのはちょっと知識がないとかなり面倒だったりしました。
それがDreamweaver CC 2017になってからはついにデフォルトでEmmetが使える！そして[展開]をわざわざTab変更する作業がなくなりました！
これで特にファイルを直で編集したり難しい設定をしなくてもいきなりEmmetをDreamweaver CC 2017で使うことが出来るようになりました。
※もちろんカスタマイズをする際には必要な場合もあります。
私がDreamweaver CC 2017でよく使うEmmetのショートコード一覧
ここからはEmmetの基本的なhtmlショートコードや普段私がよく使っているEmmetのCSSショートコードの一覧になります。
Emmetのショートコードは非常に簡単で覚えやすいですが、最初のうちはそれでも忘れることがありますので同じようなコードを使う方などはこのページをブックマークや、スマホの方はホーム画面に追加などしておくと便利です。
まずはhtmlのショートコードから
IDを付与したdivを作る方法（#ID名）
#test ←これを展開すると
<div id="test"></div>
classを付与したdivを作る方法（.クラス名）
.test ←これを展開すると <div class="test"></div>
複数の同じ要素を作る方法（*必要数）
.test*3 ←これを展開すると <div class="test"></div> <div class="test"></div> <div class="test"></div>
classに連番を付ける方法（.クラス名$）
.test$ ←これを展開すると <div class="test1"></div> .test$$ ←これを展開すると <div class="test01"></div>
連番のclassを付与した複数の同じ要素を作る方法（.要素名*必要数）
.test$*3 ←これを展開すると <div class="test1"></div> <div class="test2"></div> <div class="test3"></div>
入れ子（ネスト）を使う方法（要素名>要素名）
.test>ul>li →これを展開すると
<div class="test">
<ul>
<li></li>
</ul>
</div>
入れ子（ネスト）＋複数要素を作る（上記の複合）
.test>ul>li*3 →これを展開すると
<div class="test">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
入れ子（ネスト）の子要素に連番のクラスを付ける方法（少し応用）
.test>ul>li.sample$$*3 ←これを展開すると
<div class="test">
<ul>
<li class="sample01"></li>
<li class="sample02"></li>
<li class="sample03"></li>
</ul>
</div>
さらに要素内に文字列を挿入する方法（{}）
※「()」も使った少し上級編
.test>ul>(li.sample$$>{サンプル$$})*3 ←これを展開すると
<div class="test">
<ul>
<li class="sample01">サンプル01</li>
<li class="sample02">サンプル02</li>
<li class="sample03">サンプル03</li>
</ul>
</div>
画像要素を作る方法（img）
img ←これを展開すると <img src="" alt="">
画像のソースも指定する方法（img[src=パス.拡張子]）
img[src=/images/image01.jpg] ←これを展開すると <img src="/images/image01.jpg" alt="">
連番の画像名など時に便利な方法(img[src=/images/image$$.拡張子]*必要数)
img[src=images/image$$.jpg]*3 ←これを展開すると <img src="images/image01.jpg" alt=""> <img src="images/image02.jpg" alt=""> <img src="images/image03.jpg" alt="">
上記のaltに文字を入れる方法（ alt=）
img[src=images/image$$.jpg alt=イメージ$$]*3 ←これを展開すると <img src="images/image01.jpg" alt="イメージ01"> <img src="images/image02.jpg" alt="イメージ02"> <img src="images/image03.jpg" alt="イメージ03">
同じ階層に要素を作る（+）
.test01+.test02 ←これを展開すると <div class="test01"></div> <div class="test02"></div>
階層を戻る（^）※少し上級編
.test01>.example01^.test02>.example02 ←これを展開すると <div class="test01"> <div class="example01"></div> </div> <div class="test02"> <div class="example02"></div> </div>
基本はこんなところでしょうか。
これ位覚えてるだけで信じられないほど「楽に効率良く正確なコーディング」が出来るようになりますよ☆
次によく使うCSSのショートコードです。
※公式チートシートに記載されているものと違うのもありますが、私はこれで慣れてしまってるのでもしどうしても公式のショートコードで書きたいと言う方はこちらからEmmetのチートシートをご確認ください☆
私がよく使うCSSのショートコード
基本的にpxなどの単位は何も指定しなければpxになります。pなら%、eならemといった感じです。わかりやすいですね☆
width・height
w →展開すると width: ; w300 →展開すると width: 300px; w100p →展開すると width: 100%; wa →展開すると width: auto; h →展開すると height: ; ha →展開すると height: auto;
padding・margin
p →展開すると padding: ; pl →展開すると padding-left: ; pr →展開すると padding-right: ; pt →展開すると padding-top: ; pb →展開すると padding-bottom: ; ------------------------------ m →展開すると margin: ; ml →展開すると margin-left: ; mr →展開すると margin-right: ; mt →展開すると margin-top: ; mb →展開すると margin-bottom: ;
display系
d →展開すると display: block; d:ib →展開すると display: inline-block; d:t →展開すると display: table; d:tc →展開すると display: table-cell; d:f →展開すると display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;
background系
bg →展開すると bgbackground: #000; bg#fff →展開すると background: #fff; bgi →展開すると background-image: url(); bgc →展開すると background-color: #fff; bgs →展開すると -webkit-background-size: ; background-size: ; bgp →展開すると background-position: 0 0;
border系
bd →展開すると border: ; bdb →展開すると border-bottom: ; bdn →展開すると border: none; bd1-s#ccc →展開すると border: 1px solid #ccc; bbrs →展開すると border-radius: ; bdrs5 →展開すると border-radius: 5px;
float・position・overflow
fl →展開すると float: left; fr →展開すると float: right; ov →展開すると overflow: hidden; p:r →展開すると position: relative; p:a →展開すると position: absolute; pf →展開すると position: fixed;
その他
j →展開すると justify-content: ; j:c →展開すると justify-content: center; j:fs →展開すると justify-content: flex-start; j:fe →展開すると justify-content: flex-end; j:s →展開すると justify-content: space-around; j:sb →展開すると justify-content: space-between; ------------------------------ ai →展開すると -ms-align-items: ; align-items: ; aic →展開すると -ms-align-items: center; align-items: center; aif →展開すると -ms-align-items: flex-start; align-items: flex-start; aife →展開すると -ms-align-items: flex-end; align-items: flex-end; ais →展開すると -ms-align-items: stretch; align-items: stretch;
だめだ。全然書ききれませんね（笑）
ただ、今上の説明で書いたCSSも実際にEmmetを使って展開したものを使っているので相当時間は短縮されてます。
たったこれだけでもすべて手書きで書いたらと思うと……。
そう考えただけでもEmmetから絶対に離れられないです（笑）
実際に超使うCSSの記述パターンサンプル
CSSで複数のプロパティを一気に書いてしまいたい時は（ほとんどそうですけど）[+]で繋げます。
次の説明で使ってますので参考にしてみてください。非常に便利ですよ☆
それでは最後に初心者さんでもベテランさんでもよく使うテンプレ的なCSSの記述をいくつかEmmetで書いてみますね☆
width: 100%; height: auto; padding: 5px; margin: 0 auto; text-align: center;
これをEmmetのショートコードで書くと
w100p+ha+p5+m0-a+tac
となります。
他にも
width: 336px; height: 280px; padding: 1em; margin: 0 auto; float: left; overflow: hidden;
これをEmmetのショートコードで書くと
w336+h280+p1e+m0-a+fl+ov
となります。
最後にもうひとつ
display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; justify-content: space-around; -ms-align-items: center; align-items: center;
これをEmmetのショートコードで書くと
df+j:s+aic
といった感じになります。
まとめ
いかがだったでしょうか。
今回は私がコレなしじゃ絶対無理と思うほど便利な神ツール「Emmet」のご紹介でした。
実際にはここに書いてある内容以外にも色々と使っています。
Emmetの良いところは「ショートコードが唯一ではない」というところもあります。
私のように「キーが打ちやすいから」「慣れているから」といった理由で公式チートシートに記載されているショートコードじゃない記述をしても、だいたいのニュアンスでも大抵補完してくれます（笑）
「Emmetのショートコード」＋「Dreamweaver CC 2017のコードヒント」やその他の機能を合わせたら、現在では私はこれが最強だと思います。
是非皆さんもこの最強コンビ、使ってみてください☆
この記事が気に入ったら
いいね ! しよう
ディスカッションコーナー コメントやご質問、その他この記事に関する事はこちらからどうぞ☆