チームで使える。ワークフローに効く。Dreamweaver + Bootstrap @CSS nite LP51

Transcript

1. ث٦يד⢪ִ׷կ 匟歊湫埠 ٙ٦ؙؿٗ٦ח⸬ֻ Dreamweaver + Bootstrap
2. CCO, Web Designer 匟歊湫埠
3. 2015䎃
   Dreamweaver CC
   ָ
   Bootstrap
   ח㼎䘔׃ת׃׋
4. 20th 7th
5. ז׈
   $44
   ؿٖ٦يٙ٦ؙ׾⢪ֲךַ B
6. 锃叨㼎韋
   ⟰噟ך8FC؟؎زⵖ⡲װ麊㌀٥麊欽חꟼ׻׏גְג8FCⵖ⡲٥8FC
   رؠ؎ٝ噟⹡׾㢩岣׃׋ֿהָ֮׷娕⟃♳ך⠓爡㆞٥穗㌀罏٥䕵㆞
   ؟ٝفٕ侧
    ⟰噟ך8FC䬐䔲罏ח耀ְג׫׋ך颵㉏٥؟ؤ٦ٖه٦ز
   
   ٖأهٝءـ䱰欽⟰噟כⰋ⡤ךⶴ
   <
   ♴⼱劍>
   IUUQTCMPHTBEPCFDPNDSFBUJWFTUBUJPOXFCIRVFTUJPOTGPSXFCNBOBHFSTTVNNBSZ չ麊欽⚥պչⵖ⡲⚥ⵖ⡲✮㹀պך
 XFC؟؎زכٖأهٝءـדַׅ כְ
   82.1% ְְִ
   17.9%
7. IUUQTXFCNBTUFSTHPPHMFCMPHDPNNPCJMFSTUJOEFYJOHIUNM ٌغ؎ٕ
   SEO ךꅾ銲䚍
8. 然㹋ז؝ٝه٦طٝز鏣鎘
   HTML/CSS 㹋鄲חֶֽ׷Ⱏ鸐➬圫٥ٕ٦ٕ
9. Watch 6,776 Star 107,173 Fork 48,923
10. 38%חֶֽ׷
 ٙ؎َ٦ؿٖ٦يה㹋鄲ך⛣ꨄ
11. ⢽ִל植㜥דֿ׿זֿה
12. ؟٦ؽأ٥醡ㅷ صُ٦أ أةحؿـؚٗ ⠓爡周ⰻ ֶ㉏ְさ׻ׇ 䱰欽䞔㜠 Mobile WF Desktop WF *3䞔㜠
13. Tablet ؟٦ؽأ٥醡ㅷ صُ٦أ أةحؿـؚٗ ⠓爡周ⰻ ֶ㉏ְさ׻ׇ 䱰欽䞔㜠 *3䞔㜠 DW Dreamweaver
 20th Anniversary 　ת׶ֹ׵זְًصُ٦
14. Desktop WF Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco Lorem ipsum dolor sit amet Dreamweaver 3ͭͷಛ௃
15. Tablet ᷫԂਫ਼ࣷͷ৊ͷ੠ɺ ॾߦແৗͷڹ͖͋ Γɻࠫཏ૒थͷՖ ͷ৭ɺ੝ऀඞਰͷ ཧΛ͋Β͸͢ɻ͓ ͝ΕΔਓ΋ٱ͔͠ Βͣɻͨͩय़ͷ໷ ͷເͷ͝ͱ͠ɻͨ ͚͖ऀ΋਱ʹ͸΄ Ζͼ͵ɺͻͱ΁ʹ ෩ͷલͷਖʹಉ͡ɻ ԕ͘ͷҟேΛͱͿ Dreamweaver 20th Anniversary 杞ֺׅ׷ؕٓي ᷫԂਫ਼ࣷͷ৊ͷ੠ɺ ॾߦແৗͷڹ͖͋ Γɻࠫཏ૒थͷՖ ͷ৭ɺ੝ऀඞਰͷ ཧΛ͋Β͸͢ɻ͓ ͝ΕΔਓ΋ٱ͔͠ Βͣɻͨͩय़ͷ໷ ͷເͷ͝ͱ͠ɻͨ ͚͖ऀ΋਱ʹ͸΄ Ζͼ͵ɺͻͱ΁ʹ ෩ͷલͷਖʹಉ͡ɻ ԕ͘ͷҟேΛͱͿ ᷫԂਫ਼ࣷͷ৊ͷ੠ɺ ॾߦແৗͷڹ͖͋ Γɻࠫཏ૒थͷՖ ͷ৭ɺ੝ऀඞਰͷ ཧΛ͋Β͸͢ɻ͓ ͝ΕΔਓ΋ٱ͔͠ Βͣɻͨͩय़ͷ໷ ͷເͷ͝ͱ͠ɻͨ ͚͖ऀ΋਱ʹ͸΄ Ζͼ͵ɺͻͱ΁ʹ ෩ͷલͷਖʹಉ͡ɻ ԕ͘ͷҟேΛͱͿ Dreamweaver 20th Anniversary Dreamweaver 20th Anniversary
16. Mobile ᷫԂਫ਼ࣷͷ৊ͷ੠ɺॾߦແৗͷڹ ͖͋Γɻࠫཏ૒थͷՖͷ৭ɺ੝ऀ ඞਰͷཧΛ͋Β͸͢ɻ͓͝ΕΔਓ ΋ٱ͔͠Βͣɻͨͩय़ͷ໷ͷເͷ ͝ͱ͠ɻ͚͖ͨऀ΋਱ʹ͸΄Ζͼ ͵ɺͻͱ΁ʹ෩ͷલͷਖʹಉ͡ɻ ԕ͘ͷҟேΛͱͿΒ͑͹ɺීͷ᪅ ߴɺ׽ͷԦ᣸ɺྊͷपҏɺ౜ͷ࿣ ࢁɺ͜ΕΒ͸օɺچओઌߖͷ੓ʹ Dreamweaver 20th Anniversary ꞿְ俑畍
17. 鏣鎘儗ח鍑寸דֹתׇ׿ַי
18. Bootstrap
    ׾稆㖑ה׃ג
 ٙ؎َ٦ؿٖ٦ي׾⡲׸ל✲⵸חⴻ僇׃׋ַ׮
19. Dreamweaver
    ך
    Bootstrap
    堣腉 DW B
20. 倜鋉سًُؗٝزت؎،ؚٗדBootstrap׾䭷㹀
21. 䯏ⰅػطٕחBootstrap؝ٝه٦طٝزָ鷄⸇
22. Bootstrap؝ٝه٦طٝزךclassせָ؟آؑأز
23. 鋅⳿׃װimgזוך
    ؙ؎حؙفٗػذ؍؎ٝألؙة٦ָ
    Bootstrap 㼎䘔
24. ؚٔحسٖ؎،ؐز׾知⽃㹋鄲
25. ؽآُ،ًٕر؍،ؙؒٔ٦ָׁ׵ח鋅װֻׅ
26. Dreamweaver
    ה
    Bootstrapד⡲׷
 ٖأهٝءـل٦آ DEMO
27. IUUQTCMPHTBEPCFDPNDSFBUJWFTUBUJPOXFCESFBNXFBWFSCPPUTUSBQKVNCPUSPOMBZPVU
28. DEMO
29. הכְִծ䓲挿׮֮׶תׅ
30. Sass晛ָ⢪ִזְ
 ׉ךתתדכ ؕأةو؎ؤ
 㔭ꨇ 4 Bootstrap 4
    כ
 ת׌⢪ִזְ DreamweaverדSass׾⢪ֲ׋׭ך⹞䨽
31. ઃܭ޻ఔͰ Bootstrap ΛͲ͏࢖͏ʁ
32. رؠ؎ٝ٥㹋鄲⩎הך钠陎麩ְ׾זֻׅծ׾䗰䖤׷ OK OK
33. ٙ؎َ٦ؿٖ٦ي׾
    Bootstrap
    ד⡲׷؝خ
34. Bootstrap
    堣腉ך׫ד
 ٙ؎َ٦ؿٖ٦ي׾⡲׷ 1
35. ٓ؎ـؽُ٦ה
 DOM ػطٕ׌ֽד׮
 ٖ؎،ؐز〳腉
 Bootstrap ך׫ךHTML כ 铣׫װֻׅ
 䒷ֹ床׃ָ⸬桦涸
36. ⥯ղCSSכ剅ַזְ 2
37. ؔٔآشٕך$44כ
 鍑铣؝أزַָׁ׬
38. funcssion Emma.css https://funcssion.com/ https://github.com/ruedap/emma.css
39. ⡲׶鴥תזְ
    鿇ⴓ涸ח⡲׏ג鑐׃ג׫׷ 4
40. 邌植׃חְֻ
 䮙⹛ָ⠗׻׸ל״׃
    خ٦ٕ׾⢪ְⴓֽ׷
41. ·ͱΊ
42. %SFBNXFBWFSד
 ؿٖ٦يٙ٦ָؙ׫׿זך׮ךח
43. ؿٖ٦يٙ٦ؙ#PPUTUSBQָ
 Ⱏ鸐鎉铂ד֮׶ծ؝ىُص؛٦ءّٝعـ
44. Bootstrap Studio BLOCS https://bootstrapstudio.io/ http://blocsapp.com/
45. Extract $$ٓ؎ـٓٔ Bootstrap ٔ،ٕة؎ي
    فٖؽُ٦ ٙ٦ؙؿٗ٦ח♧顐׃׋⸬桦⻉׾׮׋׵ׅ
46. 鏣鎘ח׮㹋鄲ח׮կDreamweaver
47. ֮׶ָהֲ׀ְׂת׃׋ 匟歊湫埠