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

Slide 1

Slide 1 text

ث٦يד⢪ִ׷կ 匟歊湫埠 ٙ٦ؙؿٗ٦ח⸬ֻ Dreamweaver + Bootstrap

Slide 2

Slide 2 text

CCO, Web Designer 匟歊湫埠

Slide 3

Slide 3 text

2015䎃 Dreamweaver CCָ Bootstrapח㼎䘔׃ת׃׋

Slide 4

Slide 4 text

20th 7th

Slide 5

Slide 5 text

ז׈$44ؿٖ٦يٙ٦ؙ׾⢪ֲךַ B

Slide 6

Slide 6 text

锃叨㼎韋⟰噟ך8FC؟؎زⵖ⡲װ麊㌀٥麊欽חꟼ׻׏גְג8FCⵖ⡲٥8FCرؠ؎ٝ噟⹡׾㢩岣׃׋ֿהָ֮׷娕⟃♳ך⠓爡㆞٥穗㌀罏٥䕵㆞ ؟ٝفٕ侧 ⟰噟ך8FC䬐䔲罏ח耀ְג׫׋ך颵㉏٥؟ؤ٦ٖه٦زٖأهٝءـ䱰欽⟰噟כⰋ⡤ךⶴ<♴⼱劍> IUUQTCMPHTBEPCFDPNDSFBUJWFTUBUJPOXFCIRVFTUJPOTGPSXFCNBOBHFSTTVNNBSZ չ麊欽⚥պչⵖ⡲⚥ⵖ⡲✮㹀պך  XFC؟؎زכٖأهٝءـדַׅ כְ 82.1% ְְִ 17.9%

Slide 7

Slide 7 text

IUUQTXFCNBTUFSTHPPHMFCMPHDPNNPCJMFSTUJOEFYJOHIUNM ٌغ؎ٕSEO ךꅾ銲䚍

Slide 8

Slide 8 text

然㹋ז؝ٝه٦طٝز鏣鎘 HTML/CSS 㹋鄲חֶֽ׷Ⱏ鸐➬圫٥ٕ٦ٕ

Slide 9

Slide 9 text

Watch 6,776 Star 107,173 Fork 48,923

Slide 10

Slide 10 text

38%חֶֽ׷  ٙ؎َ٦ؿٖ٦يה㹋鄲ך⛣ꨄ

Slide 11

Slide 11 text

⢽ִל植㜥דֿ׿זֿה

Slide 12

Slide 12 text

؟٦ؽأ٥醡ㅷ صُ٦أ أةحؿـؚٗ ⠓爡周ⰻ ֶ㉏ְさ׻ׇ 䱰欽䞔㜠 Mobile WF Desktop WF *3䞔㜠

Slide 13

Slide 13 text

Tablet ؟٦ؽأ٥醡ㅷ صُ٦أ أةحؿـؚٗ ⠓爡周ⰻ ֶ㉏ְさ׻ׇ 䱰欽䞔㜠 *3䞔㜠 DW Dreamweaver  20th Anniversary 　ת׶ֹ׵זְًصُ٦

Slide 14

Slide 14 text

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ͭͷಛ௃

Slide 15

Slide 15 text

Tablet ᷫԂਫ਼ࣷͷ৊ͷ੠ɺ ॾߦແৗͷڹ͖͋ Γɻࠫཏ૒थͷՖ ͷ৭ɺ੝ऀඞਰͷ ཧΛ͋Β͸͢ɻ͓ ͝ΕΔਓ΋ٱ͔͠ Βͣɻͨͩय़ͷ໷ ͷເͷ͝ͱ͠ɻͨ ͚͖ऀ΋਱ʹ͸΄ Ζͼ͵ɺͻͱ΁ʹ ෩ͷલͷਖʹಉ͡ɻ ԕ͘ͷҟேΛͱͿ Dreamweaver 20th Anniversary 杞ֺׅ׷ؕٓي ᷫԂਫ਼ࣷͷ৊ͷ੠ɺ ॾߦແৗͷڹ͖͋ Γɻࠫཏ૒थͷՖ ͷ৭ɺ੝ऀඞਰͷ ཧΛ͋Β͸͢ɻ͓ ͝ΕΔਓ΋ٱ͔͠ Βͣɻͨͩय़ͷ໷ ͷເͷ͝ͱ͠ɻͨ ͚͖ऀ΋਱ʹ͸΄ Ζͼ͵ɺͻͱ΁ʹ ෩ͷલͷਖʹಉ͡ɻ ԕ͘ͷҟேΛͱͿ ᷫԂਫ਼ࣷͷ৊ͷ੠ɺ ॾߦແৗͷڹ͖͋ Γɻࠫཏ૒थͷՖ ͷ৭ɺ੝ऀඞਰͷ ཧΛ͋Β͸͢ɻ͓ ͝ΕΔਓ΋ٱ͔͠ Βͣɻͨͩय़ͷ໷ ͷເͷ͝ͱ͠ɻͨ ͚͖ऀ΋਱ʹ͸΄ Ζͼ͵ɺͻͱ΁ʹ ෩ͷલͷਖʹಉ͡ɻ ԕ͘ͷҟேΛͱͿ Dreamweaver 20th Anniversary Dreamweaver 20th Anniversary

Slide 16

Slide 16 text

Mobile ᷫԂਫ਼ࣷͷ৊ͷ੠ɺॾߦແৗͷڹ ͖͋Γɻࠫཏ૒थͷՖͷ৭ɺ੝ऀ ඞਰͷཧΛ͋Β͸͢ɻ͓͝ΕΔਓ ΋ٱ͔͠Βͣɻͨͩय़ͷ໷ͷເͷ ͝ͱ͠ɻ͚͖ͨऀ΋਱ʹ͸΄Ζͼ ͵ɺͻͱ΁ʹ෩ͷલͷਖʹಉ͡ɻ ԕ͘ͷҟேΛͱͿΒ͑͹ɺීͷ᪅ ߴɺ׽ͷԦ᣸ɺྊͷपҏɺ౜ͷ࿣ ࢁɺ͜ΕΒ͸օɺچओઌߖͷ੓ʹ Dreamweaver 20th Anniversary ꞿְ俑畍

Slide 17

Slide 17 text

鏣鎘儗ח鍑寸דֹתׇ׿ַי

Slide 18

Slide 18 text

Bootstrap׾稆㖑ה׃ג  ٙ؎َ٦ؿٖ٦ي׾⡲׸ל✲⵸חⴻ僇׃׋ַ׮

Slide 19

Slide 19 text

DreamweaverךBootstrap堣腉 DW B

Slide 20

Slide 20 text

倜鋉سًُؗٝزت؎،ؚٗדBootstrap׾䭷㹀

Slide 21

Slide 21 text

䯏ⰅػطٕחBootstrap؝ٝه٦طٝزָ鷄⸇

Slide 22

Slide 22 text

Bootstrap؝ٝه٦طٝزךclassせָ؟آؑأز

Slide 23

Slide 23 text

鋅⳿׃װimgזוך ؙ؎حؙفٗػذ؍؎ٝألؙة٦ָBootstrap 㼎䘔

Slide 24

Slide 24 text

ؚٔحسٖ؎،ؐز׾知⽃㹋鄲

Slide 25

Slide 25 text

ؽآُ،ًٕر؍،ؙؒٔ٦ָׁ׵ח鋅װֻׅ

Slide 26

Slide 26 text

DreamweaverהBootstrapד⡲׷  ٖأهٝءـل٦آ DEMO

Slide 27

Slide 27 text

IUUQTCMPHTBEPCFDPNDSFBUJWFTUBUJPOXFCESFBNXFBWFSCPPUTUSBQKVNCPUSPOMBZPVU

Slide 28

Slide 28 text

DEMO

Slide 29

Slide 29 text

הכְִծ䓲挿׮֮׶תׅ

Slide 30

Slide 30 text

Sass晛ָ⢪ִזְ  ׉ךתתדכ ؕأةو؎ؤ  㔭ꨇ 4 Bootstrap 4כ  ת׌⢪ִזְ DreamweaverדSass׾⢪ֲ׋׭ך⹞䨽

Slide 31

Slide 31 text

ઃܭ޻ఔͰ Bootstrap ΛͲ͏࢖͏ʁ

Slide 32

Slide 32 text

رؠ؎ٝ٥㹋鄲⩎הך钠陎麩ְ׾זֻׅծ׾䗰䖤׷ OK OK

Slide 33

Slide 33 text

ٙ؎َ٦ؿٖ٦ي׾Bootstrapד⡲׷؝خ

Slide 34

Slide 34 text

Bootstrap堣腉ך׫ד  ٙ؎َ٦ؿٖ٦ي׾⡲׷ 1

Slide 35

Slide 35 text

ٓ؎ـؽُ٦ה  DOM ػطٕ׌ֽד׮  ٖ؎،ؐز〳腉  Bootstrap ך׫ךHTML כ 铣׫װֻׅ  䒷ֹ床׃ָ⸬桦涸

Slide 36

Slide 36 text

⥯ղCSSכ剅ַזְ 2

Slide 37

Slide 37 text

ؔٔآشٕך$44כ  鍑铣؝أزַָׁ׬

Slide 38

Slide 38 text

funcssion Emma.css https://funcssion.com/ https://github.com/ruedap/emma.css

Slide 39

Slide 39 text

⡲׶鴥תזְ 鿇ⴓ涸ח⡲׏ג鑐׃ג׫׷ 4

Slide 40

Slide 40 text

邌植׃חְֻ  䮙⹛ָ⠗׻׸ל״׃ خ٦ٕ׾⢪ְⴓֽ׷

Slide 41

Slide 41 text

·ͱΊ

Slide 42

Slide 42 text

%SFBNXFBWFSד  ؿٖ٦يٙ٦ָؙ׫׿זך׮ךח

Slide 43

Slide 43 text

ؿٖ٦يٙ٦ؙ#PPUTUSBQָ  Ⱏ鸐鎉铂ד֮׶ծ؝ىُص؛٦ءّٝعـ

Slide 44

Slide 44 text

Bootstrap Studio BLOCS https://bootstrapstudio.io/ http://blocsapp.com/

Slide 45

Slide 45 text

Extract $$ٓ؎ـٓٔ Bootstrap ٔ،ٕة؎ي فٖؽُ٦ ٙ٦ؙؿٗ٦ח♧顐׃׋⸬桦⻉׾׮׋׵ׅ