Tweet
Tweet

Slide 1

Slide 1 text

吳䒭⠓爡תר׹׃ 匟歊湫埠

Slide 2

Slide 2 text

Sublime Text 3 User 吳䒭⠓爡תר׹׃ 匟歊湫埠

Slide 3

Slide 3 text

8FCⵖ⡲罏ך׋׭ך
 *MMVTUSBUPSكؙة٦ر٦ةך侄猰剅 ֮׻ײֹ 瓐加⽆㡦 ♲ꥡٓنꞿ谏㻂ㄤծ㹧愮翯✳ 匟歊湫埠

Slide 4

Slide 4 text

͸·Δʲቕ·Δɾర·Δɾṇ·Δʳ ᶃ ͽͬͨΓ߹ͬͯ͸͍Δɻ ᶄ ઒ɾ஑ͳͲʹམͪࠐΉɻʮਂΈʹʵɾΔʯʮߔʹʵɾΔʯʮՌ͸आۚͷ෵;ͪ ʹʵɾΓʗුӢ࢛໎ʯ ᶅ ܭུʹ͔͚ΒΕΔɻʮΘͳʹʵɾΔʯʮࢥ͏ͭ΅ʹʵɾΔʯ ᶆ ৚݅ʹͽͬͨΓ߹͏ɻద߹͢Δɻ͋ͯ͸·Δɻʮ໾ʹʵɾ͍ͬͯΔʯ ᶇ ʢʮܕʹ͸·ΔʯͷܗͰʣߦಈɾදݱͳͲ͕ྨܕతͰ͋Δɻʮܕʹʵɾͬͨจষʯ ʮܕʹʵɾͬͨڭҭʯ ᶈ ઐ೦͢Δɻ·ͨɼເதʹͳͬͯ਎ಈ͖͕ͱΕͳ͘ͳΔɻݱ୅Ͱ΋ଏޠతʹ༻͍Δɻ ʮࠓύιίϯʹʵɾ͍ͬͯΔʯʮੈؒϊࣄχʵɾϧʗ೔෤ʯʮਮΒ͖͠உ͸ʵɾ Βͤʗුੈ૲ࢠɾҰ୅உʯʤʮ͸ΊΔʯʹର͢Δࣗಈࢺʥ େࣙྛୈࡾ൛ΑΓ

Slide 5

Slide 5 text

47(ח 㣄⚥ח׮ז׸לծ 縐ח׮כת׷

Slide 6

Slide 6 text

47(ח 㣄⚥ח׮ז׸לծ 縐ח׮ַַ׷

Slide 7

Slide 7 text

47(ךⵃ欽朐屣

Slide 8

Slide 8 text

،صً٦ءّٝ ؎ٝةؙٓءّٝ Animation & Interaction

Slide 9

Slide 9 text

https://arrivabusandcoach.co.uk/buses-the-weird-and-wonderful

Slide 10

Slide 10 text

https://fleximize.com/mission/

Slide 11

Slide 11 text

ؽآُ،ٓ؎ئ٦ءّٝ Visualization

Slide 12

Slide 12 text

http://www.bbc.com/news/politics/eu_referendum/results https://nbremer.github.io/olympicfeathers/

Slide 13

Slide 13 text

http://flowingdata.com/2015/12/15/a-day-in-the-life-of-americans/

Slide 14

Slide 14 text

ٗ؞ Logos

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

،؎؝ٝ Icons

Slide 17

Slide 17 text

https://github.com/blog/2112-delivering-octicons-with-svg

Slide 18

Slide 18 text

https://sarasoueidan.com/blog/icon-fonts-to-svg/

Slide 19

Slide 19 text

➙㔐כծ崢䩛ז⢪׻׸倯״׶׮
 㖑㄂ז⢪׻׸倯דך縐ח岣湡׃ג׫ת׃׳ֲ

Slide 20

Slide 20 text

׉ך⵸חծ47(ך暴䗙

Slide 21

Slide 21 text

Standalone SVG )5.- $44 47( )5.- TWH TWH inline SVG 兛鸐ך歗⫷ؿ؋؎ٕה׃ג邌爙ׇׁ׷ )5.-ך⚥חծ47(؝٦س׾湫䱸剅ֻ 兛鸐ך歗⫷ה殯ז׷暴䗙

Slide 22

Slide 22 text

兛鸐ך歗⫷ה殯ז׷暴䗙 WJFX#PY XJEUI IFJHIU QSFTFSWF"TQFDU3BUJP 䲽歗걄㚖ך䏟垥禸׾㹀纏 㹋㼄ך؟؎ؤ䭷㹀 䭁簭儗ך،ألؙز嫰⥂䭯倯岀ך䭷㹀

Slide 23

Slide 23 text

47(ךعو׷ه؎ٝز 1 鼅 0

Slide 24

Slide 24 text

*&ה"OESPJE⟃♴ד عو׷ 01

Slide 25

Slide 25 text

JOMJOF47(ך㜥さ JNH銲稆ך㜥さ *& "OESPJEד47(ך嫰桦ֶַָ׃ְ  J04

Slide 26

Slide 26 text

ז׈ 47(ך넝ׁ٥䌴ָ䭷㹀ׁ׸גְזְ …

Slide 27

Slide 27 text

ז׈ 47(ך넝ׁ٥䌴ָ䭷㹀ׁ׸גְזְ JOMJOF47(חכ IFJHIUBVUPָ⸬ַזְ QSFTFSWF"TQFDU3BUJPך 䮙⹛חغָؚ֮׷

Slide 28

Slide 28 text

鍑寸 TWH銲稆חծXJEUI IFJHIU׾QYד䭷㹀 … * CSSͰͷɺwidth,heightࢦఆͰ΋Մ

Slide 29

Slide 29 text

鍑寸 "Jךչٖأهٝءـպחثؑحؙ׃זְ

Slide 30

Slide 30 text

JOMJOF47(ך'MVJE⻉ד
 عو׷ 02

Slide 31

Slide 31 text

*& 4BGBSJדJOMJOF47(ָ'MVJEחז׵זְ TDSFFOXJEUI

Slide 32

Slide 32 text

ז׈ *&דכծIFJHIUBVUPָ⸬ַזְ svg { height: auto; } QYח
 㔿㹀ׁ׸׷ )5.-$BOWBTך➬圫הずׄ

Slide 33

Slide 33 text

ז׈ 4BGBSJծ$44ָIFJHIU㾩䚍׾馄ִ׵׸זְ svg { height: auto; } QYח
 㔿㹀ׁ׸׷ )5.-$BOWBTך➬圫הずׄ IFJHIU㾩䚍ָ ⮚⯓ׁ׸׷

Slide 34

Slide 34 text

鍑寸 QBEEJOHIBDL׃׋EJW銲稆ד㔲ֲ div.svg-container .svg-wrap > svg { display: block; position: absolute; width: 100%; height: 100%; } .svg-container { position: relative; height:0; padding-top: calc(100%/200*200); } TWH

Slide 35

Slide 35 text

47(4QSJUFT 47(4UPSF דعو׷ 03

Slide 36

Slide 36 text

icons.svg index.html Send Mail 47(4QSJUFTָծ邌爙ׁ׸זְװ׋׵ꅾֻז׷

Slide 37

Slide 37 text

*& &EHFծ㢩鿇47(ַ׵*%⿫撑דֹזְ icons.svg index.html Send Mail ז׈

Slide 38

Slide 38 text

J04⟃⵸ծ⿫撑׀החؙٔؒأز icons.svg index.html Send Mail ז׈

Slide 39

Slide 39 text

鍑寸 ،؎؝ٝ欽47(׾ծ)5.-חJOMJOFד㙵׭׷ index.html Send Mail … … …

Slide 40

Slide 40 text

J04⟃⵸ծ⿫撑ׅ׷״׶⵸ח㹀纏ָ זְה邌爙ׁ׸זְ ז׈ index.html CPEZךꟗׄةؚך湫⵸ח 47(،؎؝ٝ׾㹀纏׃ג׮ծ ⿫撑דֹזְ㉏겗

Slide 41

Slide 41 text

鍑寸 47(׾ծ)5.-ךCPEZ湫♴חJOMJOFד㙵׭׷

Slide 42

Slide 42 text

47(CBDLHSPVOEJNBHFד
 عو׷ 04

Slide 43

Slide 43 text

*&דծCBDLHSPVOETJ[FDPWFSֶַָ׃ֻז׷

Slide 44

Slide 44 text

鍑寸 TWH銲稆ךQSFTFSWF"TQFDU3BUJP׾㢌刿 … * σϑΥϧτͰ͸ "xMidYMid meet"

Slide 45

Slide 45 text

鍑寸 TWH銲稆ךQSFTFSWF"TQFDU3BUJP׾㢌刿 preserveAspectRatio="xMidYMid slice" = background-size: cover; background-position: center center;

Slide 46

Slide 46 text

[JOEFYדعو׷ 05

Slide 47

Slide 47 text

JOMJOF47(ךTWH銲稆׾ծ[JOEFYדⵖ䖴דֹזְ 爳㕦礵莔ךꗺך㡮ծ长遤搀䌢ך갟ֹ֮׶կ尩繎⿽埠ך蔃ך葿ծ渿罏 䗳邜ך椚׾֮׵כׅկֶ׀׸׷➂׮⛉׃ַ׵׆կ׋׌僰ך㢸ך㣄ך׀ ה׃կ׋ֹֽ罏׮鹴חכק׹ןטծמהפח괏ך⵸ך㞒חずׄկ黅ֻ ך殯劉׾הע׵ִלծ兛ך馠넝ծ恌ך桬蜭ծ咿ךワ⟻ծ㇪ך犡㿊ծ ֿ׸׵כ涺ծ傊⚺⯓涽ך佟ח׮䖞כ׆ծ嚂׃׫׾噰׭ծ镡׭׾׮䙼מ Ⰵ׸׆ծ㣓♴ך✉׸׿ֿה׾䝎׵׆׃גծ孖꟦ך䟴ס׷הֿ׹׾濼׵ ׂא׃ַלծ⛉׃ַ׵׆׃גծ❕ׄח׃罏ו׮ז׶կ z-index: 100; z-index: 50;

Slide 48

Slide 48 text

47(ד⢪ִ׷$44فٗػذ؍כ寸ת׏גְ׷ ז׈ www.w3.org/TR/SVG/propidx.html

Slide 49

Slide 49 text

鍑寸 47(銲稆׾ծ)5.-ך銲稆ד㔲׏גⵖ䖴 爳㕦礵莔ךꗺך㡮ծ长遤搀䌢ך갟ֹ֮׶կ尩繎⿽埠ך蔃ך葿ծ渿罏 䗳邜ך椚׾֮׵כׅկֶ׀׸׷➂׮⛉׃ַ׵׆կ׋׌僰ך㢸ך㣄ך׀ ה׃կ׋ֹֽ罏׮鹴חכק׹ןטծמהפח괏ך⵸ך㞒חずׄկ黅ֻ ך殯劉׾הע׵ִלծ兛ך馠넝ծ恌ך桬蜭ծ咿ךワ⟻ծ㇪ך犡㿊ծ ֿ׸׵כ涺ծ傊⚺⯓涽ך佟ח׮䖞כ׆ծ嚂׃׫׾噰׭ծ镡׭׾׮䙼מ Ⰵ׸׆ծ㣓♴ך✉׸׿ֿה׾䝎׵׆׃גծ孖꟦ך䟴ס׷הֿ׹׾濼׵ ׂא׃ַלծ⛉׃ַ׵׆׃גծ❕ׄח׃罏ו׮ז׶կ z-index: 100; z-index: 50; EJW

Slide 50

Slide 50 text

47(ךذؗأزדعو׷ 06

Slide 51

Slide 51 text

$ISPNFדծ47(簭㼭儗חذؗأزָֻ׆׸׷

Slide 52

Slide 52 text

剑㼭ؿؓٝز؟؎ؤ鏣㹀ָ剣⸬׌ַ׵ ז׈

Slide 53

Slide 53 text

鍑寸 ذؗأز׾،ؐزٓ؎ٝ⻉ׅ׷ ׋׌׃ծ
 ؿ؋؎ٕ؟؎ؤָ慧㟓ׅ׷ךדծ ؽحزوحف⻉ָكة٦ַ׮

Slide 54

Slide 54 text

㺘滠ׇׁ׋ػأךꥴ꟦ד عو׷ 07

Slide 55

Slide 55 text

נ׏׋׶ֻ׏אְגְ׷כ׆ךػأず㡦ծ ז׈ַꥴ꟦ָדֹג׃תֲ

Slide 56

Slide 56 text

鍑寸 눤岀ךMUFSד♧涪鍑寸

Slide 57

Slide 57 text

before after

Slide 58

Slide 58 text

http://codepen.io/grayghostvisuals/pen/JKmRwY

Slide 59

Slide 59 text

BVUPQSFYFSדعو׷ 08

Slide 60

Slide 60 text

47(דכ歗⫷זו׾$44DMJQQBUIדوأؙדֹ׷ = + JNBHF銲稆 DMJQ1BUI銲稆

Slide 61

Slide 61 text

.clip-svg { clip-path: url(#clipping); } JNBHF銲稆 وأؙ欽ךDMJQ1BUI銲稆 $44

Slide 62

Slide 62 text

4BGBSJדכծكٝت٦فٔؿ؍حؙأ➰ָֹ
 ⢘鎸׃ג֮׷הوأָؙ⸬ַזְ ז׈ -webkit-clip-path: url(#clipping); clip-path: url(#clipping); -webkit-clip-path: url(#clipping); clip-path: url(#clipping);

Slide 63

Slide 63 text

鍑寸 ˖ 搀椚ׇ׆ծ47(ךDMJQQBUI㾩䚍׾⢪ֲ ˖ BVUPQSFYFS׾麓⥋׃זְ …

Slide 64

Slide 64 text

3FBDUדعو׷ 09

Slide 65

Slide 65 text

3FBDUדכ⢪ִ׷47(ך銲稆חⵖꣲָ֮׷ ז׈ https://facebook.github.io/react/docs/tags-and-attributes.html

Slide 66

Slide 66 text

鍑寸 如ך銲稆⟃㢩⢪׻זְ • circle • clipPath • defs • ellipse • g • image • line • linearGradient • mask • path • pattern • polygon • polyline • radialGradient • rect • stop • svg • text • tspan

Slide 67

Slide 67 text

鍑寸 TZNCPM銲稆ծVTF銲稆כ⢪ִזְךדծ 3FBDUDSFBUF$MBTTד؝ٝه٦طٝز⻉ const IconUmbrella = React.createClass({ render() { return ( Umbrella Icon ) } }); https://css-tricks.com/creating-svg-icon-system-react/

Slide 68

Slide 68 text

鍑寸 3FBDUַ׵ծׅץגך47(銲稆ה㾩䚍ָ
 אִַ׷״ֲחז׶ת׃׋ https://facebook.github.io/react/docs/tags-and-attributes.html

Slide 69

Slide 69 text

47(ךت؎ؒحزד
 عو׷ 10

Slide 70

Slide 70 text

וֲ׃ג׮ծ47(ؿ؋؎ٕ؟؎ؤָ㣐ֹֻז׷

Slide 71

Slide 71 text

鍑寸 ˖ ،ٝؕ٦ه؎ٝزך侧׾幾׵ׅ ˖ ׉׸׊׸ך䏟垥׾侭侧⦼חさ׻ׇ׷

Slide 72

Slide 72 text

鍑寸 QBUI銲稆ח㢌䳔׃ծ㾩䚍ך鎸鶢갫׾䲧ִծ H[JQ㖇簭׾遤ֲ

Slide 73

Slide 73 text

鍑寸 ؝٦سⰻחずׄ鎸鶢皘䨽ָ㢳ְקוծ
 㖇簭⸬桦כぢ♳ׅ׷

Slide 74

Slide 74 text

ְַָד׃׋ד׃׳ֲַ

Slide 75

Slide 75 text

չ47(ծ׭׿וְֻׁזպ ה䙼׻׸ת׃׋י

Slide 76

Slide 76 text

׉׿זהֹכծ 䩛㛙ְ⢪ְ倯ַ׵כׄ׭׷

Slide 77

Slide 77 text

˖ ⽃杝ך47(ؿ؋؎ٕ ˖ TWH銲稆חכծWJFX#PY XJEUI IFJHIU㾩䚍׾䭷㹀 ˖ )5.-ךJNH銲稆ד⢪ֲ

Slide 78

Slide 78 text

J04 ֿ׸ז׵ծוךـٓؐؠד׮קר㣐♱㣗

Slide 79

Slide 79 text

No content

Slide 80

Slide 80 text

IUUQCJUMZMQTWHMJOL

Slide 81

Slide 81 text

吳䒭⠓爡תר׹׃ 匟歊湫埠 ֮׶ָהֲ׀ְׂת׃׋