DreamWeaverにEmmetインストールして、カスタマイズした

Pocket
LINEで送る

Zen-codingからEmmetにするのを忘れていたので、手があいてるときにやってみました。
ついでに覚えてなかったけどよく使いそうなCSSショートカットもメモ。

ダウンロード&インストール

GithubのEmmet.zxpをクリックしてダウンロードし、ダウンロードしたファイルをダブルクリックしてExtension managerからインストールします。
※DWは再起動する必要があります。

キーボードショートカットをカスタマイズ

展開をTabに変更しました。
DreamWeaver>キーボードショートカットを開き コマンド>Emmet>Expand AbbreviationのところのキーをTabに変更
※Tabは押してるキーをそのままショートカットとして入力できないので、テキストで入力します。
ちなみにこれだとふつうのタブが挿入できなくなります・・・どうすればいいんだろ?
なお、DreamWeaverだとEmmetの新しい機能のキーボードショートカットが設定されていないみたいです。
便利な機能:Html編を参考に、自分の押しやすいキーで設定するといいと思います。 私はとりあえずコメントアウトのみ設定しました。

展開するコードをカスタマイズ

MacのCS5.5だと下記のファイルにあたります。
/Users/ユーザ名/Library/Application Support/Adobe/Dreamweaver CS5.5/ja_JP/Configuration/Commands/Emmet/snippets.js
CSSの展開がデフォだと、***:***なのですが***: ***に変更しました。

覚えてなかったけどよく使いそうなCSSショートカット

覚えてないところを復習。

display

  • display: block; → d
  • display: inline; → d:i
  • display: inline-block; → d:ib
  • display: table; → d:tb
  • display: table-cell; → d:tbc

overflow

  • overflow: hidden; → ov
  • overflow: auto; → ov:a
  • overflow: scroll; → ov:s

CSS3

  • box-sizing: border-box; → bxz boxz
  • box-shadow: inset hoff voff blur color; → bxs boxs
  • text-shadow: hoff voff blur #000; → tsh

その他

  • zoom: 1; → zoo
  • border: 1px solid #000; → bd+
  • border-radius: ; → bdrs
  • vertical-align: top; → va
  • text-decoration: none; → td
  • text-indent: -9999px; → ti:-