Download as PDF, PPTX
Uploaded byAkira Maruyama
Dreamweaver コードヒントHowTo
CSS Nite in OSAKA Vol.20 前夜祭でお話したDreamweaverのコードヒントのカスタマイズについてのスライドです
Dreamweaver コードヒントHowTo
- 1.
- 2.
- 3. 丸山 章 mixi: http://mixi.jp/show_profile.pl?id=7200 Twitter: @akira_maru blog:http://dwlog.net/ 岡山県出身 鳥取在住のフリーランス。 CSS Nite in OSAKAの 実行委員もやってます。 3
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28. タグ以外の設定は codehint.xmlに格納されている Mac OSX /Applications/Adobe DreamweaverCS4/ configuration/CodeHints/ Windows C:¥Program Files¥Adobe¥Adobe Dreamweaver CS4 ¥configuration¥CodeHints 28
- 29.
- 30.
- 31.
- 32. 基本骨格 <codehints xmlns:MMString="http://www.adobe.com/ schemes/data/string/"> <menugroup MMString:name="css_codehints_1" id="CodeHints_Style_Attributes"> <description> <MMString:loadStringid="css_codehints_2" /> </description> </menugroup> </codehints> この部分にコードヒント表示 させたいものを定義 32
- 33. CSSコードヒントの基本形 <menu pattern="hoge"> <menuitem label="表示される文字" value="挿入される文字" /> </menu> hoge aaaaa bbbbb hoge 確定後 ccccc 33
- 34.
- 35.
- 36.
- 37.
- 38.
- 39. <menu>の属性 type属性 font /color / url 特殊なコードヒントを表示する。 39
- 40. <menu>の属性 type属性 font /color / url type="font" フォントリストを表示 type="color" 選択後、カラーパレット表示 type="url" 選択後、ファイル参照 ダイアログを表示 40
- 41.
- 42.
- 43. CSSプロパティを出す 基本形 <menu pattern="hoge" displayrestriction="css"> <menuitemlabel="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
- 48.
- 49. CSSセレクタを出す 基本形 <menu pattern="hoge" doctypes="CSS"> <menuitemlabel="viewtext" value ="inserttext" /> </menu> 大文字 49
- 50. CSSセレクタを出す 例：" @ "の後にimportを表示 <menupattern="@" doctypes="CSS"> <menuitem label="@import" value ="import" /> </menu> 50
- 51.
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58.