今こそCSS組版

Kyoto.js 11で発表したLTです．
Author: @spring_raining

Transcript

1. ➙ֿ׉$44穈晛
   ,ZPUPKT
   !TQSJOH@SBJOJOH
   IUUQIBSVTBNFYDPN
   

   View Slide

2. ֿ׿ח׍כ
   ˖ כ׷ׁ׭!TQSJOH@SBJOJOH
   ˖ 㣐ꢻ㣐㷕䎃欰
   ˖ ⼼噟ׅ׷׊הְֲ䓼ְ䠐䘊
   ˖ 3FBDUד8FC،فٔ׾

   ⡲׷
   (*'،صָً⡲׸׷8FC،فٔ(JSBG
   ⢪׏גװ׏ג♴ְׁ
   

   View Slide

3. ➙㔐כ
   3FBDU/BUJWF
   חאְג
   

   View Slide

4. ➙㔐כ
   3FBDU/BUJWF
   חאְג
   ךず➂钞׾⡲׏׋鑧
   

   View Slide

5. 䪮遭剅הְִל
   -B5F9
   

   View Slide

6. View Slide

7. IUUQXXXTMJEFTIBSFOFUJFTMJTFOPPLFOUFY
   

   View Slide

8. View Slide

9. 7JWMJPTUZMF
   ˖ 8FCـٓؐؠك٦أך荈⹛穈晛ءأذي
   ˖ ꨵ㶨剅硂׮8FC׮秵ך劤׮$44אד
   ˖ 穈晛ؒٝآٝ 7JWMJPTUZMFKT
   כ"QBDIF

   ⳿珲欽1%'欰䧭خ٦ٕ 7JWMJPTUZMF'PSNBUUFS
   ך
   ׫فٗفٓ؎ؒةٔ
   

   View Slide

10. 8FCك٦أך
    穈晛
    

    View Slide

11. View Slide

12. 
    
    
    

    View Slide

13. ـٓؐؠך⳿⸂׾
    ׉ךתת⢪ִל葺ְךדכ
    

    View Slide

14. 穈晛ך׋׭ך$44
    ˖ 7JWMJPTUZMFKTך㹋⡤כ$44׾ػ٦أ׃ג

    ـٓؐؠ劢㹋鄲ךأة؎ٕ׾邌爙ׅ׷QPMZMM
    

    View Slide

15. 劢㹋鄲ךأة؎ٕ
    ˖ CMFFEהכ˘
    

    View Slide

16. 劢㹋鄲ךأة؎ٕ
    ˖ CMFFEהכ˘鄩׍衅ה׃
    ˖ ⽩ⵗًر؍،דך鄩׍衅ה׃ך㣐ֹׁ׾䭷㹀
    

    View Slide

17. &QVC"EBQUJWF-BZPVU
    ˖ $44׾䭁䓸׃ג)5.-׾⽩ⵗ暟ぢֽךٖ؎،ؐ
    زחٔؿٗ٦
    IUUQXXXJEQGPSHFQVCQHU
    

    View Slide

18. FQVCYFYQS
    
    ˖ $44ך⚥ד㢌侧װ♲갪怴皾㶨׾⢪׏׋怴皾ָדֹ
    ׋׶ׅ׷
    

    View Slide

19. $44׌ֽד׮
    劤ָ⡲׸׉ֲ
    

    View Slide

20. IUUQTQFOUBQPEHJUIVCJPD
    

    View Slide

21. 7JWMJPTUZMFח״׷
    %51ٙ٦ؙؿٗ٦
    

    View Slide

22. 㸣䧭תדך崧׸
    )5.-
    $44
    1%'
    1VH
    4UZMVT
    邌秵ך窩כ!FEB@UPSJ孑ח
    䲽ְגְ׋׌ֹת׃׋
    

    View Slide

23. )5.-欰䧭
    ˖ ⾱珲כ1VH KBEF
    ד㛁瘗׃)5.-׾荈⹛欰䧭
    ˖ 1VH+4ك٦أךذٝفٖ٦زؒٝآٝ
    

    View Slide

24. View Slide

25. 1VHؿ؍ٕة٦
    ˖ 1VH׌ֽדⰋגךةؚ׾鎸鶢ׅ׷ךכ鳞ְךד
    ؿ؍ٕة٦堣腉ד.BSLEPXO瘝׾剅ֽ׷״ֲחׅ
    ׷
    

    View Slide

26. 1VHؿ؍ٕة٦
    ˖ +45SBOTGPSNהְֲ؎ٝة٦ؿؑ٦أח䖞ִל
    ؿ؍ٕة٦ך荈⡲ָ〳腉
    1SJTNKT׾⢪׏ג
    ءٝةحؙأع؎ٓ؎ز׾遤ֲ
    ؿ؍ٕة׾⡲䧭
    

    View Slide

27. $44欰䧭
    ˖ 4UZMVT(VMQזו׾⢪׏׋兛鸐ך8FCل٦آⵖ
    ⡲ה㢌׻׵זְ倯岀
    ˖ IUUQTHJUIVCDPNQFOUBQPEDCVJMEFSח
    ⰕꟚ׃גתׅ
    

    View Slide

28. 1%'⳿⸂
    ˖ $ISPNFך⽩ⵗ堣腉ד1%'׾⳿⸂ׅ׷׌ֽ
    

    View Slide

29. ⽩ⵗ
    ˖ ؚٓؿ؍حׁؙ׿ח⣛걾׃ת׃׋

    ⦐➂䞔㜠כ曯暨חז׏׋ך׌˘˘
    ˖ ؔؿإحز#ؿٕؕٓ٦ⱁ⽩ⵗ׃ג

    ⰼ 㷕欰כⶴ䒷
    
    ˖ ؿٕؕٓ٦כ⿑׃ְ
    

    View Slide

30. Ⰵ珲ر٦ة⡲䧭
    ˖ Ⰵ珲欽ח欽䠐ׁ׸׋"*ذٝفٖ٦زח欰䧭׃׋
    QEG׾ل٦آل٦آ䩛ד顦׶➰ֽ
    ˖ 㾄鴈涸ז⡲噟׌׏׋

    窫㼎ח荈⹛⻉׃זֽ

    ׸לז׵זְ
    

    View Slide

31. Ⰵ珲
    

    View Slide

32. 鋅劤钞ָ㾈ְ׋
    

    View Slide

33. ׉׃ג؝ى؛䔲傈
    

    View Slide

34. View Slide

35. ⼱ⴓֻ׵ְ㡰׸ת׃׋
    

    View Slide

36. 䠬䟝
    ˖ ず➂钞⡲׶嚂׃ְ
    ˖ 㡰׸׷ה׮׏ה嚂׃ְ
    ˖ $44穈晛חꣲ׵׆䪮遭禸ず➂钞׾⡲׏ג㡰׷ך
    כؔأأًדׅװ׶ת׃׳ֲ
    

    View Slide

37. ➙傈כ׉׿ז
    כׄ׭׷3FBDU/BUJWF
    ׾˘˘
    

    View Slide

38. ׀欽䠐׃גֶ׶תׅ
    

    View Slide

39. כׄ׭׷3FBDU/BUJWF
    ˖ #ؿٕؕٓ٦ل٦آ
    ˖ ⱁ㶨晛d
    ˖ ꨵ㶨晛飑Ⰵ幥׫ך倯כ
    dד顋㡰׃תׅ
    ˖ ꨵ㶨晛d
    ׀莆㄂֮׸ל

    ֶ㡮ַֻֽ׌ְׁ
    

    View Slide