2000年頃のフロントエンド技術

16年でフロントエンド技術はここまで変わった。今の20代はFramesetを知らない。今の30代、40代はテクノロジーが変わりまくるこの危機的状況に気づくべきた。

Transcript

1. 2000೥ࠒͷϑϩϯτΤϯυٕज़
   Grand Frontend Osaka 2016࠙਌ձLT
   ΫοΫϏζגࣜձࣾɹਿా஌ࢸ
   

   View Slide

2. ࣗݾ঺հ
   

   View Slide

3. 5PNPZVLJ
   4VHJUB

   !UPNPUPNPCJMF
   w ΫοΫϏζגࣜձࣾ
   w %FWFMPQNFOUNBOBHFS
   w 3FBDUKTͷνϡʔτϦΞϧ
   ΍Γ·ͨ͠ʂ
   

   View Slide

4. How old are
   You?
   

   View Slide

5. ୅ʁ
   ୅ʁ
   ୅લ൒ʁ
   ୅ޙ൒ʁ
   ୅Ҏ্ʁ
   

   View Slide

6. ୅ʁ
   ୅ʁ
   ୅લ൒ʁ
   ୅ޙ൒ʁ
   ୅Ҏ্ʁ
   

   View Slide

7. ϒϥ΢β
   ϔομʔ
   ϝχϡʔ ίϯςϯπ
   

   View Slide

8. 2000೥ࠒͷٕज़Ͱ
   ίʔσΟϯάͯ͠Έ·͢
   

   View Slide

9. ϚʔΫΞοϓฤ
   

   View Slide

10. ࠓͷίʔσΟϯά
    
    
    .
    .
    .
    

    View Slide

11. 2000೥ࠒͷίʔσΟϯά
    br/>Transitional//EN" “http://www.w3.org/TR/html4/
    loose.dtd">
    
    .
    .
    .
    

    View Slide

12. 2000೥ࠒͷίʔσΟϯά
    br/>Transitional//EN" “http://www.w3.org/TR/html4/
    loose.dtd">
    
    .
    .
    .
    

    View Slide

13. 2000೥ࠒͷίʔσΟϯά
    
    .
    .
    
    .
    

    View Slide

14. ϨΠΞ΢τฤ
    

    View Slide

15. ϒϥ΢β
    ϔομʔ
    ϝχϡʔ ίϯςϯπ
    

    View Slide

16. ࠓͷϨΠΞ΢τ
    IFBEFS
    OBW EJWJElDPOUFOUTz
    TFDUJPO
    

    View Slide

17. 2000೥͝ΖͷϨΠΞ΢τ
    IFBEFSIUNM
    NFOVIUNM JOEFYIUNM
    8FC$PNQPOFOUT͸࢖͍·ͤΜΑ
    

    View Slide

18. 2000೥ࠒͷίʔσΟϯά
    br/>Frameset//EN" “http://www.w3.org/TR/html4/
    frameset.dtd">
    
    .
    .
    .
    

    View Slide

19. 2000೥͝ΖͷϨΠΞ΢τ(վ)
    5%JElIFBEFSz
    5%JE

    lNFOVz
    5%JElDPOUFOUTz
    

    View Slide

20. View Slide

21. DPMTQBO
    

    View Slide

22. DPMTQBO
    ίϯςϯπʹΑͬͯԿނ͔ζϨΔ
    

    View Slide

23. TQBDFSHJG
    IFJHIUQY
    XJEUIQY
    ಁ໌(*'ը૾
    ͦ͜Ͱొ৔ɾɾɾ
    

    View Slide

24. JNHTSDlTQBDFSHJGz

    XJEUIIFJHIU
    

    View Slide

25. JNHTSDlTQBDFSHJGz

    XJEUIIFJHIU

    BMUlz
    4&0ؾʹ͢Δ੎
    

    View Slide

26. XJEUI XJEUI
    IFJHIU DPMTQBO
    TQBDFSHJGͳ͠ʁ
    

    View Slide

27. XJEUI XJEUI
    IFJHIU
    
    DPMTQBO
    TQBDFS
    HJGͳ
    ͠ʁ
    

    View Slide

28. CSS࢖Θͳͯ͘΋
    ϨΠΞ΢τͰ͖Δʂ
    

    View Slide

29. ηϯλϦϯάฤ
    

    View Slide

30. ϒϥ΢β
    ϔομʔ
    ϝχϡʔ ίϯςϯπ
    ౰ͨΓલ͗ͯ͢࿩୊ʹ͢Β্͕Βͳ͍
    ίϯςφͷηϯλϦϯά
    

    View Slide

31. ࠓͷίʔσΟϯά
    div#container {
    margin: 0 auto;
    }
    

    View Slide

32. 2000೥ࠒͷίʔσΟϯά
    
    
    ...
    
    
    

    View Slide

33. CSS࢖Θͳͯ͘΋
    ηϯλϦϯάͰ͖Δʂ
    

    View Slide

34. ·ͱΊ
    • ࠓͷਓ͸֮͑Δ͜ͱ͕ଟͯ͘େมͩͶʂ
    • Ͱ΋ɺ͋ͷ࣌୅ʹ͸໭Γͨ͘ͳ͍ʂ
    

    View Slide

35. αʔόʔαΠυΤϯδχΞืूத
    ΫοΫϏζגࣜձࣾ
    

    View Slide