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:-