2017年5月13日（土）大阪産業創造館 4Fイベントホールで開催したCSS Nite in OSAKA, Vol.43「Reboot Dreamweaver」のフォローアップとして、鷹野 雅弘（スイッチ）の『Dreamweaverのコードエディター機能を進化させたBrackets』セッションのスライドなどを公開します。
- スライド（PDF）
- Emmetチートシート（PDF、59ページ、.5MB）
- Emmetチートシート（PDF、39ページ、.5MB）
- Zen Coding（CSS）チートシート（PDF、2ページ、.5MB）
- 音声
- 動画
メッセージとフォローアップ
アンケートにいただいた質問やコメントへの返答
Emmetでできることを全部知りたいです。特殊文字の変換の仕方があれば教えてください。
「p*4>lorem」でLorem Ipsumが入ったりしますが、特殊文字（©とか？）はないと思います。
BracketsはAtomでも使えますか？
おそらく「EmmetはAtomでも使えますか？」ですね。こちらからプラグインをダウンロードできます。
その他のエディタのプラグインも、こちらにまとまっています。
「Generic…」の続きがメモれなかった。
？
Dreamweaverもパッケージをインストールしてカスタマイズするやり方になっていることに驚きました。
10年以上前からDMXzoneはありますよ。つまり、拡張機能でカスタマイズするという文化は存在していました。以前は、アドビのサイト内でも拡張機能が紹介されていました。
Emmetフル版のインストール
公式サイトから拡張機能をダウンロードして、Dreamweaverにインストールします。
CC 2015以降、拡張機能をインストールするためのアプリケーション Extension Manager がサポート終了となってしまったため、DMXzone Extension Manager、または、オープンソースのZXPInstallerを利用します。
- emmetio/dreamweaver: Emmet for Dreamweaver
- Extension Manager サポート終了のお知らせ
- DMXzone Extension Manager for Dreamweaver - Extensions - DMXzone.COM
- ZXPInstaller
EmmetをDreamweaverにインストールしたときの全機能
Dreamweaverのキーボードショートカット設定にて割り当て可能です。
| コマンド | 意味 | |
|---|---|---|
| Numbers | Increment Number by 1 | 1増やす |
| Decrement Number by 1 | 1減らす | |
| Increment Number by 0.1 | 0.1増やす | |
| Decrement Number by 0.1 | 0.1減らす | |
| Increment Number by 10 | 10増やす | |
| Decrement Number by 10 | 10減らす | |
| Evaluate Math Expression | 四則演算 | |
| CSS | Reflect CSS Value | ベンダープリフィックスの値を一致させる |
| HTML | Match Pair Tag (outward) | 親要素を選択（Dreamweaverの 親要素を選択と同様） |
| Match Pair Tag (inward) | 子要素を選択 | |
| Go To Matching Pair | 開始タグと終了タグを行き来する | |
| Remove Tag | タグを削除 | |
| Split/Join Tag Declaration | 閉じタグを省略する | |
| Expand Abbreviation | 省略語を展開する | |
| Wrap with Abbreviation | 選択したテキストに省略語でマークアップする | |
| Toggle Comment | カーソルの位置の要素をコメントアウト （HTML/CSS） | |
| Previous Edit Point | 前の編集ポイントへ移動 | |
| Next Edit Point | 次の編集ポイントへ移動 | |
| Select Next Item | 次のDOMに移動 | |
| Select Previous Item | 直前のDOMの項目に移動 | |
| Merge Lines | 改行を削除する | |
| Emmet Preferences | 環境設定（無効） | |
ご参考
ベストセッション2019
2019年、CSS Niteでは49回の関連イベントを通して123セッションが行われました。その中からベスト・セッション＋αを選びました。
