dreamweaver

Dreamweaverのカスタムショートカット

シングルクォーテーションやダブルクォーテーションで値を囲むのがちょっと手間なのでカスタムショートカットを設定してみた。

Adobe Dreamweaver CS4 * キーボードショートカットをカスタマイズする

ctrl+shift+2「” (ダブルクォーテーション)」で選択範囲を囲むようにしたのは問題なかったけど

ctrl+shift+7「 ‘ (シングルクォーテーション)」で選択範囲を囲むように割り当てたのは機能しないなぁ。
何かとぶつかってるんだろうか。

とりあえずctrl+shift+alt+7にしたら大丈夫だったのでダブルクォーテーションもそっちに合わせた。

zen-codingとDreamweaverメモ

[追記あり / 201006] Zen Codingに慣れてきたのでちょこちょこ更新した。

各zen-codingダウンロード先

Downloads – zen-coding – Project Hosting on Google Code

Dreamweaver用

Dreamweaver用の各バージョンはこっち。

WordPress用プラグイン

WordPressの管理画面にZen Codingを導入するプラグイン「WP Zen-Coding」 – Rewish

使い方(DW)

キーワードを入力してctrl + , (カンマ)
DWのzen-codingで変換 / ctrl + , (カンマ)

[ctrl + , (カンマ)]が使いづらいなら、キーボードショートカットから変更や追加も可能。
[ctrl + , (カンマ)]が使いづらいなら、キーボードショートカットから変更も可能
[キーボードショートカット(Y)] – [コマンド(C)] – [Zen Coding] – [Expand Abbreviation]

変換例

idやclassの前に何も指定しないと勝手にdivで補完してくれる。素敵。

$で連番をつけられる。

詳しい説明
Selectors and aliases for Zen HTML plugins

こうゆうのは一括で指定できないのかな?

出来た。()カッコでグルーピングできるらしい。
[text gutter=”false”](div#wrap>div#primary+div#secondary)+div#footer[/text]
マークアップ効率化 – zen-codingでコーディングを倍速に (Yahoo! JAPAN Tech Blog)

[追記 / 2012-09-19] Emmetなら^で出来るらしい
Zen-Codingの次期バージョン、Emmet について : Web Design KOJIKA17

Zen-Codingで、やりたかったけどできなかった『上の階層に戻る』機能。
今までは、”()”を駆使する形になっていましたが、”^”で階層を1段上がることができるようになりました。


(.header>.nav)+.logo
.header>.nav^.logo

Dreamweaverにはまだ対応してないみたい。

続きを読む

Dreamweaverの検索置換に正規表現を

随時加筆
正規表現使えるようになりたい(スキル的な意味で)

練習

ハイフン混じりのtitle要素を抜き出す

検索(D) – title=”\w+-\d+”
\d / 数字 1 文字。[0-9] と同じ
+ / 直前の文字の 1 回以上の繰り返し
マッチ

続きを読む

Dreamweaverでcolorやbackground-colorのコードヒントのカラーピッカーが表示されない

Dreamweaverでcolorやbackground-colorのコードヒントのカラーピッカーが表示されない
最近カラーピッカーが表示されないなーって思ってたら、おそらくgoogle日本語入力が原因ぽい。
フォントリストはポップアップするのにな。

F7~F10も使いづらいし、IMEに戻そうかな。

[追記 / 20100728]
とりあえず解決する方法があった

Dreamweaverのスニペット使ってますか?

Dreamweaverにはスニペットというコピペ支援みたいな機能があります。

例えばFirebugでalert()の代わりに使っているconsole.log();を
以下のようにスニペットに登録して、ショートカットキーを割り当てると、選択したテキストを挟み込んでくれたり便利です。

スニペット

続きを読む