CSSフレームワークを使う-2 Twitter Bootstrapのカスタマイズ

Transcript

1. ܳज़৘ใԋशσβΠϯ 8FC
   
   $44ϑϨʔϜϫʔΫΛ࢖͏
   
   
   5XJUUFS
   #PPUTUSBQͷΧελϚΠζ ೥݄೔
   ౦ژ᥁ज़େֶ
   ܳज़৘ใηϯλʔ ".$
   ୲౰ɿాॴ३
2. લճͷ෮श
3. 5XJUUFS
   #PPUTUSBQͱ͸ ‣IUUQHFUCPPUTUSBQDPN
4. 5XJUUFS
   #PPUTUSBQͱ͸ ‣ 5XJUUFS
   #PPUTUSBQɿ
   ‣ 5XJUUFS͕ࣾ։ൃʗఏڙ͢ΔΦʔϓϯιʔεͳʮ$44ϑϨʔϜϫʔΫʯ
   ‣ ؆୯ʹߴ౓ͳ8FCσβΠϯΛ͢Δ͜ͱ͕Մೳ
   ‣ ೥݄ݱࡏͷόʔδϣϯ͸ɺ7FSTJPO
   
5. 5XJUUFS
   #PPUTUSBQͱ͸ ‣ #PPUTUSBQΛ࢖༻ͨ͠αΠτ
   ‣ http://expo.getbootstrap.com/ Ͱଟ਺঺հ
6. 5XJUUFS
   #PPUTUSBQΛ࢖ͬͯΈΔ ‣ ·ͣ͸ɺ#PPUTUSBQΛμ΢ϯϩʔυ
   ‣ http://getbootstrap.com/ ! ‣ %PXOMPBE
   #PPUTUSBQ
   Ϙλϯ͔Β
7. 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
8. 5XJUUFS
   #PPUTUSBQΛ࢖ͬͯΈΔ ‣ 5XJUUFS
   #PPUTUSBQʹ͓͚ΔάϦου͸ɺίϥϜ͕جຊ
   ‣ ͷ෼ׂ͔Βɺ༷ʑͳ૊߹͕ͤੜ·ΕΔ
   ! ! ! ! ! ! ! ! ! ! ‣ ͜ͷγεςϜΛར༻ͯ͠ϨΠΞ΢τ͍ͯ͘͠
9. 5XJUUFS
   #PPUTUSBQΛ࢖ͬͯΈΔ ‣ ͨͱ͑͹ɺ
   
   
   
   ͷίϥϜΛ૊ΜͰΈΔ
   ‣ ·ͣίϯςϯπશମΛEJW
   DMBTTDPOUBJOFSͰғΉ <!DOCTYPE HTML> <html> <head> <link rel="stylesheet" href="css/bootstrap.css" /> <meta charset="utf-8" /> <title>Bootstrapͷςετ</title> </head> <body> <div class="container"> ! </div> </body> </html>
10. 5XJUUFS
    #PPUTUSBQΛ࢖ͬͯΈΔ ‣ ࣍ʹɺίϥϜͷઌ಄ΛEJW
    DMBTTSPXͰғΉ <!DOCTYPE HTML> <html> <head> <link rel="stylesheet" href="css/bootstrap.css" /> <meta charset="utf-8" /> <title>Bootstrapͷςετ</title> </head> <body> <div class="container"> <h1>Twitter Bootstrapͷςετ</h1> <div class="row"> </div> </div> </body> </html>
11. 5XJUUFS
    #PPUTUSBQΛ࢖ͬͯΈΔ ‣ EJW
    DMBTTlSPX
    ͷதʹ
    ‣ ͭͷ
    EJW
    DMBTTlDPMNE
    ΛೖΕΔ ... <div class="container"> <h1>Twitter Bootstrapͷςετ</h1> <div class="row"> <div class="col-md-4"> </div> <div class="col-md-4"> </div> <div class="col-md-4"> </div> </div> </div> ...
12. 5XJUUFS
    #PPUTUSBQΛ࢖ͬͯΈΔ ‣ ͦΕͧΕͷEJW
    DMBTTDPMNEͷதʹɺ಺༰Λهड़ ... <div class="row"> <div class="col-md-4"> <h2>ςετ</h2> <p>͋ͷΠʔϋτʔϰΥͷ͖͢ͱ͓ͬͨ෩...</p> </div> <div class="col-md-4"> <h2>ςετ</h2> <p>͋ͷΠʔϋτʔϰΥͷ͖͢ͱ͓ͬͨ෩...</p> </div> <div class="col-md-4"> <h2>ςετ</h2> <p>͋ͷΠʔϋτʔϰΥͷ͖͢ͱ͓ͬͨ෩...</p> </div> </div> ...
13. 5XJUUFS
    #PPUTUSBQΛ࢖ͬͯΈΔ ‣ ஈ૊ͷϨΠΞ΢τ͕؆୯ʹ࣮ݱ
14. 5XJUUFS
    #PPUTUSBQΛ࢖ͬͯΈΔ ‣ ׬੒ͨ͠ϖʔδͷαϯϓϧ
15. 5XJUUFS
    #PPUTUSBQΛ࢖ͬͯΈΔ ‣ ஈ૊ͷ׬੒ͨ͠αϯϓϧΛҎԼ͔Βμ΢ϯϩʔυ
    ‣ ࣮ࡍʹίʔυΛΈͳ͕Β෮श͠·͢ http://goo.gl/iQGCra
16. 5XJUUFS
    #PPUTUSBQ
    ϖʔδαϯϓϧΛղੳ͢Δ
17. ϖʔδαϯϓϧΛղੳ͢Δ ‣ ΦϑΟγϟϧϖʔδʹɺ࣮ࡍͷ׆༻ྫͷςϯϓϨʔτ͕ެ։͞Ε͍ͯΔ
    ‣ ͜ΕΛࢀߟʹ͢Δͱɺ࣮ࡍʹϖʔδͷΠϝʔδ͕௫Έ΍͍͢
18. ϖʔδαϯϓϧΛղੳ͢Δ ‣ 4UBSUFS
    UFNQMBUF
19. ϖʔδαϯϓϧΛղੳ͢Δ ‣ #BTJD
    NBSLFUJOH
    TJUF
    
20. ϖʔδαϯϓϧΛղੳ͢Δ ‣ 'MVJE
    MBZPVU
    !
21. ϖʔδαϯϓϧΛղੳ͢Δ ‣ 'MVJE
    MBZPVU
22. ϖʔδαϯϓϧΛղੳ͢Δ ‣ 4UJDLZ
    GPPUFS
23. ϖʔδαϯϓϧΛղੳ͢Δ ‣ $BSPVTFM
    KVNCPUSPO
24. 5XJUUFS
    #PPUTUSBQ
    σβΠϯΛΧελϚΠζ
25. σβΠϯΛΧελϚΠζ ‣ #PPUTUSBQͷ$44͸͔ͳΓෳࡶ
    ‣ ௚઀ฤू͢Δͷ͸ͪΐͬͱେมʜ
26. σβΠϯΛΧελϚΠζ ‣ #PPUTUSBQͷϖʔδʹΧελϚΠζ༻ϝχϡʔ͕͋Δ
    ‣ ޷ΈʹԠͯ͡มߋͯ͠ɺ$44μ΢ϯϩʔυͯ͠ೖΕସ͑Δ
27. σβΠϯΛΧελϚΠζ ‣ ྫ͑͹ɺഎܠͱจࣈͷ৭Λมߋ
28. σβΠϯΛΧελϚΠζ ‣ 5XJUUFSͷΦϑΟγϟϧͱ͸ผʹɺ༷ʑͳΧελϚΠζ༻ςϯϓϨʔτ͕ଘࡏ͢Δ
    ‣ ༗ྉͷ΋ͷ΋͋Δ͕ɺϑϦʔͷ΋ͷ΋
    ‣ ޮՌతʹར༻ͯ͠ΈΔ
29. #MBDL
    5JF ‣ IUUQXXXCMBDLUJFDP
    ‣ ϙʔτϑΥϦΦʹ͓εεϝͷςʔϚΛूΊͨαΠτ
30. #MBDL
    5JF ‣ #MBDL
    5JF͔Β͓ؾʹ͍ΓͷςʔϚΛμ΢ϯϩʔυ
    ‣ ςΩετɺࣸਅɺը૾ɺϑΥϯτͳͲΛมߋͯࣗ͠෼ͷ޷ΈͷσβΠϯʹ
31. #MBDL
    5JF ‣ ྫ͑͹ɺ4UVEJPςϯϓϨʔτΛμ΢ϯϩʔυ
32. #MBDL
    5JF ‣ ΧελϚΠζͯ͠ɺࣗ෼ͷϖʔδʹ