Webフレームワークを使う - Twitter Boostrap

Transcript

1. ܳज़৘ใԋशσβΠϯ 8FC
   
   8FCϑϨʔϜϫʔΫΛ࢖͏
   5XJUUFS
   #PPUTUSBQ ೥݄೔
   ౦ژ᥁ज़େֶ
   ܳज़৘ใηϯλʔ ".$
   ୲౰ɿాॴ३
   
2. ࠓ೔ͷ಺༰ ‣ ΑΓຊ֨తͳ8FCσβΠϯϔ
   ‣ ʮ$44ϑϨʔϜϫʔΫʯΛ͔ͭͬͯΈΔ
   ‣ ࠓճ͸ɺ5XJUUFS
   #PPUTUSBQΛ୊ࡐʹ
3. 5XJUUFS
   #PPUTUSBQͱ͸
4. 5XJUUFS
   #PPUTUSBQͱ͸ ‣http://getbootstrap.com/
5. 5XJUUFS
   #PPUTUSBQͱ͸ ‣ 5XJUUFS
   #PPUTUSBQɿ
   ‣ 5XJUUFS͕ࣾ։ൃʗఏڙ͢ΔΦʔϓϯιʔεͳʮ$44ϑϨʔϜϫʔΫʯ
   ‣ ؆୯ʹߴ౓ͳ8FCσβΠϯΛ͢Δ͜ͱ͕Մೳ
   ‣ ೥݄ݱࡏͷόʔδϣϯ͸ɺ7FSTJPO
   
6. 5XJUUFS
   #PPUTUSBQͱ͸ ‣ #PPUTUSBQΛ࢖༻ͨ͠αΠτ
   ‣ http://expo.getbootstrap.com/ Ͱଟ਺঺հ
7. 5XJUUFS
   #PPUTUSBQΛ࢖ͬͯΈΔ
8. 5XJUUFS
   #PPUTUSBQΛ࢖ͬͯΈΔ ‣ ·ͣ͸ɺ#PPUTUSBQΛμ΢ϯϩʔυ
   ‣ http://getbootstrap.com/ ! ‣ %PXOMPBE
   #PPUTUSBQ
   Ϙλϯ͔Β
9. 5XJUUFS
   #PPUTUSBQΛ࢖ͬͯΈΔ ‣ ;JQϑΝΠϧΛղౚ͢ΔͱɺҎԼͷΑ͏ͳ಺༰ʹͳ͍ͬͯΔ
   ‣ ͜ͷʮCPPUTUSBQʯϑΥϧμʹϖʔδΛ࡞੒͍ͯ͘͠ bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ └── bootstrap-theme.min.css ├── js/ │ ├── bootstrap.js │ └── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf └── glyphicons-halflings-regular.woff
10. 5XJUUFS
    #PPUTUSBQΛ࢖ͬͯΈΔ ‣ ಋೖ͸؆୯ɺԼهͷϦϯΫΛೖΕΔ͚ͩ <link href="css/bootstrap.min.css" rel="stylesheet">
11. 5XJUUFS
    #PPUTUSBQΛ࢖ͬͯΈΔ ‣ Ͱ͸ૣ଎ɺ#PPUTUSBQΛೖΕͨ)5.-ͷϕʔεΛ࡞੒ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap Template</title> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> ! </body> </html>
12. 5XJUUFS
    #PPUTUSBQΛ࢖ͬͯΈΔ ‣ ࣍ʹɺ#PPUTUSBQͷίϯςϯτશମΛɺDMBTTDPOUBJOFSͷEJWཁૉͰғΉ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap Template</title> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="container"> </div> </body> </html>
13. 5XJUUFS
    #PPUTUSBQΛ࢖ͬͯΈΔ ‣ )Ͱݟग़͠Λͭͬͯ͘ΈΔ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap Template</title> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="container"> <h1>Twitter Bootstrapͷςετ</h1> </div> </body> </html>
14. 5XJUUFS
    #PPUTUSBQΛ࢖ͬͯΈΔ ‣ 5XJUUFS
    #PPUTUSBQͰͷϨΠΞ΢τ͸ʮάϦουγεςϜʯ͕جຊͱͳ͍ͬͯΔ
    ‣ Grid Systems in Graphic Design/Raster Systeme Fur Die Visuele Gestaltung
15. 5XJUUFS
    #PPUTUSBQΛ࢖ͬͯΈΔ ‣ ը໘্ʹՍۭͷॎԣઢΛΨΠυϥΠϯͱͯ͠Ҿ͖ɺͦͷϒϩοΫ͝ͱʹจࣈ΍ਤ൛Λ ഑ஔ͢Δ
16. 5XJUUFS
    #PPUTUSBQΛ࢖ͬͯΈΔ ‣ άϦουγεςϜ
    ‣ ΤσΟτϦΞϧ
    ग़൛
    σβΠϯͷ෼໺Ͱ͸ɺϨΠΞ΢τͷجຊͱͳ͍ͬͯΔ
    ‣ 8FCσβΠϯʹ͓͍ͯ΋ɺάϦουγεςϜ͸σβΠϯ΍ϨΠΞ΢τͷجຊ
17. 5XJUUFS
    #PPUTUSBQΛ࢖ͬͯΈΔ ‣ 5XJUUFS
    #PPUTUSBQʹ͓͚ΔάϦου͸ɺίϥϜ͕جຊ
    ‣ ͷ෼ׂ͔Βɺ༷ʑͳ૊߹͕ͤੜ·ΕΔ
    ! ! ! ! ! ! ! ! ! ! ‣ ͜ͷγεςϜΛར༻ͯ͠ϨΠΞ΢τ͍ͯ͘͠
18. 5XJUUFS
    #PPUTUSBQΛ࢖ͬͯΈΔ ‣ ͨͱ͑͹ɺ
    
    
    
    ͷίϥϜΛ૊ΜͰΈΔ
    ‣ ·ͣίϥϜͷઌ಄ΛEJW
    DMBTTSPXͰғΉ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap Template</title> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="container"> <h1>Twitter Bootstrapͷςετ</h1> <div class="row"> </div> </div> </body> </html>
19. 5XJUUFS
    #PPUTUSBQΛ࢖ͬͯΈΔ ‣ EJW
    DMBTTSPXͷதʹ
    ‣ ͭͷEJW
    DMBTTTQBOΛೖΕΔ ... ! <div class="row"> <div class="span4"> </div> <div class="span4"> </div> <div class="span4"> </div> </div> ! ...
20. 5XJUUFS
    #PPUTUSBQΛ࢖ͬͯΈΔ ‣ ͦΕͧΕͷEJW
    DMBTTTQBOͷதʹɺ಺༰Λهड़ ... ! <div class="row"> <div class="span4"> <h2>Span 4</h2> <p> ͜ͷίϥϜ͸ɺ4ͭͷεύϯ... </p> </div> <div class="span4"> <h2>Span 4</h2> <p> ͜ͷίϥϜ͸ɺ4ͭͷεύϯ... </p> </div> <div class="span4"> <h2>Span 4</h2> <p> ͜ͷίϥϜ͸ɺ4ͭͷεύϯ... </p> </div> </div> ! ...
21. 5XJUUFS
    #PPUTUSBQΛ࢖ͬͯΈΔ ‣ ஈ૊ͷϨΠΞ΢τ͕؆୯ʹ࣮ݱ
22. 5XJUUFS
    #PPUTUSBQΛ࢖ͬͯΈΔ ‣ ͍Ζ͍Ζͳύλʔϯͷஈ૊ʹ௅ઓͯ͠ΈΔ
23. 5XJUUFS
    #PPUTUSBQΛ࢖ͬͯΈΔ ‣ ๯಄ͷ)ΛΑΓϔομʔΒ͘͠ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap Template</title> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="container"> <div class="hero-unit"> <h1>Hello Twitter Bootstrap!!</h1> <p>͜ͷϖʔδ͸ɺTwitter BootstrapΛར༻ͯ͠࡞੒ͨ͠ϖʔδͷαϯϓϧͰ͢ɻ</p> <p><a class="btn btn-primary btn-large">΋ͬͱৄ͘͠</a></p> </div> ...
24. 5XJUUFS
    #PPUTUSBQΛ࢖ͬͯΈΔ ‣ αϯϓϧϖʔδͷ׬੒
25. 5XJUUFS
    #PPUTUSBQΛ࢖ͬͯΈΔ ‣ ࠓ೔͸͜͜·Ͱ
    ‣ ࣍ճ͸σβΠϯΛΧελϚΠζͯ͠ɺΑΓચ࿅͞ΕͨσβΠϯʹ͍͖ͯ͠·͢