Dreamweaver CC 2015でEmmet（エメット）を使ったコーディング

dreamweaver

Dreamweaver CC 2015ではEmmet（エメット）が標準で使用できます。

Emmetについて公式サイトに書かれていることを適当に意訳すると以下のようになります。

多くのテキストエディタは「スニペット」と呼ばれるコードの塊を保管し再利用することができます。
スニペットは生産性を向上するための良い方法ですが落とし穴があります。
最初のスニペットを定義する必要があり実行時にそれらを拡張することはできません。

Emmetは全く新しいレベルへのスニペットのアイデアです。
cssライクな表現で動的に展開され、略語で入力した内容に応じて出力を生成することができます。
Emmetはhtml/xmlやcssを使用するWeb開発者のために開発、最適化され、あなたもプログラミングに使用することができます。

書き方

スニペットを入力してタブキーを押すと登録されたコードが展開されます。

例：divを入力してタブキーを押した場合

div → <div></div>

htmlのコーディングでよく使うスニペット

htmlの雛形を作成するとき

[lang=ja]を指定するのは、指定しない場合自動的にlang="en"が指定されてしまうから。
※htmlの後に4t,4s,xt,xs,xxsを指定するとでDOCTYPEを変更することが出来ます。

![lang=ja] または html:5[lang=ja]

<!doctype html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
</head>
<body>
    
</body>
</html>

ビューポートの設定

meta:vp

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

description,keywordの設定

meta[name=description content]+meta[name=keywords content]

<meta name="description" content="">
<meta name="keywords" content="">

スタイルシートの設定

link

<link rel="stylesheet" href="">

faviconの設定

link:favicon

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">

javascriptの設定

script:src

<script src=""></script>

リンク付きのリストを5個作る場合

ul>li*5>a

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

cssのコーディングで使うスニペット

基本的なスニペットしか使わないので省略。

スニペットのカスタマイズ

今のところsnippets.jsを直接カスタマイズしないと無理みたいです。 Dreamweaverのアップデートで変更される可能性があるので直接ファイルを編集するのはおすすめしません。

まとめ

Emmetを利用すると少ないタイピングでコーディングができ作業効率があがります。 全てをEmmetで書く必要はありませんが、Dreamweaverのスニペットと使い分けると快適ですね。
あとはスニペットの編集が手軽にできるようになれば最強だと思います。