Dreamweaver コードヒントHowTo
•
3 gefällt mir•1,611 views
CSS Nite in OSAKA Vol.20 前夜祭でお話したDreamweaverのコードヒントのカスタマイズについてのスライドです
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie Dreamweaver コードヒントHowTo
Ähnlich wie Dreamweaver コードヒントHowTo (20)
Mehr von Akira Maruyama
Mehr von Akira Maruyama (10)
Dreamweaver コードヒントHowTo
- 2. Profile 2
- 3. 丸山 章 mixi: http://mixi.jp/show_profile.pl?id=7200 Twitter: @akira_maru blog: http://dwlog.net/ 岡山県出身 鳥取在住のフリーランス。 CSS Nite in OSAKAの 実行委員もやってます。 3
- 9. コードヒントとは？ 9
- 15. タグをコードヒントで出す 15
- 26. Demo 26
- 28. タグ以外の設定は codehint.xmlに格納されている Mac OSX /Applications/Adobe Dreamweaver CS4/ configuration/CodeHints/ Windows C:¥Program Files¥Adobe¥Adobe Dreamweaver CS4 ¥configuration¥CodeHints 28
- 32. 基本骨格 <codehints xmlns:MMString="http://www.adobe.com/ schemes/data/string/"> <menugroup MMString:name="css_codehints_1" id="CodeHints_Style_Attributes"> <description> <MMString:loadString id="css_codehints_2" /> </description> </menugroup> </codehints> この部分にコードヒント表示 させたいものを定義 32
- 33. CSSコードヒントの基本形 <menu pattern="hoge"> <menuitem label="表示される文字" value ="挿入される文字" /> </menu> hoge aaaaa bbbbb hoge 確定後 ccccc 33
- 36. <menu>の属性 additionaldismisschars属性 指定した文字が入力されたらコード ヒントを消す。複数指定可。 text additionaldismisschars=";:" " : "または" ; "が入力された時、 コードヒントが消える 36
- 38. aaaaa bbbbb <menu>の属性 allowmultiplevalues属性 空白挿入後、再度menuitemの値を 入力できるかを指定。 デフォルトはfalse。 true / false allowmultiplevalues="true" hoge aaaaa bbbbb 空白入力でコードヒントが 再び出る 38
- 39. <menu>の属性 type属性 font / color / url 特殊なコードヒントを表示する。 39
- 40. <menu>の属性 type属性 font / color / url type="font" フォントリストを表示 type="color" 選択後、カラーパレット表示 type="url" 選択後、ファイル参照 ダイアログを表示 40
- 42. 記述してみる 42
- 43. CSSプロパティを出す 基本形 <menu pattern="hoge" displayrestriction="css"> <menuitem label="viewtext" value ="inserttext" /> </menu> 43
- 44. CSSプロパティを出す 考え方 ➡ " { "の入力の後に、コードヒントが 表示される。 ➡ 空白が入力されても消えない。 ➡ " : " " } " の後に、コードヒントが 消える。 44
- 45. CSSプロパティを出す <menu pattern="{" allowwhitespaceprefix="true" additionaldismisschars=":}" displayrestriction="css"> <menuitem label="opacity" value ="opacity:" /> </menu> "{"でコードヒント表示 空白OK ":"または"}"で消える コードヒントで "opacity"が表示 確定後は "opacity:" 45
- 46. 例：opacityの後に0.1∼1を表示 考え方 ➡ " { "の入力後に、コードヒントで "opacity"表示。確定文字は "opacity:" ➡ "opacity:"の入力後に、コードヒントで 0.1、0.2…を表示。確定文字も同様。 プロパティ確定後に の特定値を出す 46
- 47. プロパティ確定後に の特定値を出す <menu pattern="{" allowwhitespaceprefix="true" additionaldismisschars=":}" displayrestriction="css"> <menuitem label="opacity" value ="opacity:" /> </menu> 【opacity表示用】 47
- 49. CSSセレクタを出す 基本形 <menu pattern="hoge" doctypes="CSS"> <menuitem label="viewtext" value ="inserttext" /> </menu> 大文字 49
- 50. CSSセレクタを出す 例：" @ "の後にimportを表示 <menu pattern="@" doctypes="CSS"> <menuitem label="@import" value ="import" /> </menu> 50
- 51. Demo 51
- 52. 補 足 52
- 54. まとめ 54
- 56. 明日も話します 56
- 58. ありがとうございました。 58