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

ܳज़৘ใԋशσβΠϯ 8FC $44ϑϨʔϜϫʔΫΛ࢖͏ 5XJUUFS#PPUTUSBQͷΧελϚΠζ ೥݄೔ ౦ژ᥁ज़େֶܳज़৘ใηϯλʔ ".$ ୲౰ɿాॴ३

લճͷ෮श

5XJUUFS#PPUTUSBQͱ͸ ‣IUUQHFUCPPUTUSBQDPN

5XJUUFS#PPUTUSBQͱ͸ ‣ 5XJUUFS#PPUTUSBQɿ ‣ 5XJUUFS͕ࣾ։ൃʗఏڙ͢ΔΦʔϓϯιʔεͳʮ$44ϑϨʔϜϫʔΫʯ ‣ ؆୯ʹߴ౓ͳ8FCσβΠϯΛ͢Δ͜ͱ͕Մೳ ‣ ೥݄ݱࡏͷόʔδϣϯ͸ɺ7FSTJPO

5XJUUFS#PPUTUSBQͱ͸ ‣ #PPUTUSBQΛ࢖༻ͨ͠αΠτ ‣ http://expo.getbootstrap.com/ Ͱଟ਺঺հ

5XJUUFS#PPUTUSBQΛ࢖ͬͯΈΔ ‣ ·ͣ͸ɺ#PPUTUSBQΛμ΢ϯϩʔυ ‣ http://getbootstrap.com/ ! ‣ %PXOMPBE#PPUTUSBQϘλϯ͔Β

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

5XJUUFS#PPUTUSBQΛ࢖ͬͯΈΔ ‣ 5XJUUFS#PPUTUSBQʹ͓͚ΔάϦου͸ɺίϥϜ͕جຊ ‣ ͷ෼ׂ͔Βɺ༷ʑͳ૊߹͕ͤੜ·ΕΔ ! ! ! ! !
! ! ! ! ! ‣ ͜ͷγεςϜΛར༻ͯ͠ϨΠΞ΢τ͍ͯ͘͠

5XJUUFS#PPUTUSBQΛ࢖ͬͯΈΔ ‣ ͨͱ͑͹ɺ ͷίϥϜΛ૊ΜͰΈΔ ‣ ·ͣίϯςϯπશମΛEJWDMBTTDPOUBJOFSͰғΉ <!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>

5XJUUFS#PPUTUSBQΛ࢖ͬͯΈΔ ‣ ࣍ʹɺίϥϜͷઌ಄ΛEJWDMBTTSPXͰғΉ <!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>

5XJUUFS#PPUTUSBQΛ࢖ͬͯΈΔ ‣ EJWDMBTTlSPXͷதʹ ‣ ͭͷEJWDMBTTlDPMNEΛೖΕΔ ... <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> ...

5XJUUFS#PPUTUSBQΛ࢖ͬͯΈΔ ‣ ͦΕͧΕͷEJWDMBTTDPMNEͷதʹɺ಺༰Λهड़ ... <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> ...

5XJUUFS#PPUTUSBQΛ࢖ͬͯΈΔ ‣ ஈ૊ͷϨΠΞ΢τ͕؆୯ʹ࣮ݱ

5XJUUFS#PPUTUSBQΛ࢖ͬͯΈΔ ‣ ׬੒ͨ͠ϖʔδͷαϯϓϧ

5XJUUFS#PPUTUSBQΛ࢖ͬͯΈΔ ‣ ஈ૊ͷ׬੒ͨ͠αϯϓϧΛҎԼ͔Βμ΢ϯϩʔυ ‣ ࣮ࡍʹίʔυΛΈͳ͕Β෮श͠·͢ http://goo.gl/iQGCra

5XJUUFS#PPUTUSBQ ϖʔδαϯϓϧΛղੳ͢Δ

ϖʔδαϯϓϧΛղੳ͢Δ ‣ ΦϑΟγϟϧϖʔδʹɺ࣮ࡍͷ׆༻ྫͷςϯϓϨʔτ͕ެ։͞Ε͍ͯΔ ‣ ͜ΕΛࢀߟʹ͢Δͱɺ࣮ࡍʹϖʔδͷΠϝʔδ͕௫Έ΍͍͢

ϖʔδαϯϓϧΛղੳ͢Δ ‣ 4UBSUFSUFNQMBUF

ϖʔδαϯϓϧΛղੳ͢Δ ‣ #BTJDNBSLFUJOHTJUF

ϖʔδαϯϓϧΛղੳ͢Δ ‣ 'MVJEMBZPVU !

ϖʔδαϯϓϧΛղੳ͢Δ ‣ 'MVJEMBZPVU

ϖʔδαϯϓϧΛղੳ͢Δ ‣ 4UJDLZGPPUFS

ϖʔδαϯϓϧΛղੳ͢Δ ‣ $BSPVTFMKVNCPUSPO

5XJUUFS#PPUTUSBQ σβΠϯΛΧελϚΠζ

σβΠϯΛΧελϚΠζ ‣ #PPUTUSBQͷ$44͸͔ͳΓෳࡶ ‣ ௚઀ฤू͢Δͷ͸ͪΐͬͱେมʜ

σβΠϯΛΧελϚΠζ ‣ #PPUTUSBQͷϖʔδʹΧελϚΠζ༻ϝχϡʔ͕͋Δ ‣ ޷ΈʹԠͯ͡มߋͯ͠ɺ$44μ΢ϯϩʔυͯ͠ೖΕସ͑Δ

σβΠϯΛΧελϚΠζ ‣ ྫ͑͹ɺഎܠͱจࣈͷ৭Λมߋ

σβΠϯΛΧελϚΠζ ‣ 5XJUUFSͷΦϑΟγϟϧͱ͸ผʹɺ༷ʑͳΧελϚΠζ༻ςϯϓϨʔτ͕ଘࡏ͢Δ ‣ ༗ྉͷ΋ͷ΋͋Δ͕ɺϑϦʔͷ΋ͷ΋ ‣ ޮՌతʹར༻ͯ͠ΈΔ

#MBDL5JF ‣ IUUQXXXCMBDLUJFDP ‣ ϙʔτϑΥϦΦʹ͓εεϝͷςʔϚΛूΊͨαΠτ

#MBDL5JF ‣ #MBDL5JF͔Β͓ؾʹ͍ΓͷςʔϚΛμ΢ϯϩʔυ ‣ ςΩετɺࣸਅɺը૾ɺϑΥϯτͳͲΛมߋͯࣗ͠෼ͷ޷ΈͷσβΠϯʹ

#MBDL5JF ‣ ྫ͑͹ɺ4UVEJPςϯϓϨʔτΛμ΢ϯϩʔυ

#MBDL5JF ‣ ΧελϚΠζͯ͠ɺࣗ෼ͷϖʔδʹ

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

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

Atsushi Tadokoro

More Decks by Atsushi Tadokoro

Other Decks in Technology

Featured

Transcript

ܳज़৘ใԋशσβΠϯ 8FC $44ϑϨʔϜϫʔΫΛ࢖͏ 5XJUUFS#PPUTUSBQͷΧελϚΠζ ೥݄೔ ౦ژ᥁ज़େֶܳज़৘ใηϯλʔ ".$ ୲౰ɿాॴ३

લճͷ෮श

5XJUUFS#PPUTUSBQͱ͸ ‣IUUQHFUCPPUTUSBQDPN

5XJUUFS#PPUTUSBQͱ͸ ‣ 5XJUUFS#PPUTUSBQɿ ‣ 5XJUUFS͕ࣾ։ൃʗఏڙ͢ΔΦʔϓϯιʔεͳʮ$44ϑϨʔϜϫʔΫʯ ‣ ؆୯ʹߴ౓ͳ8FCσβΠϯΛ͢Δ͜ͱ͕Մೳ ‣ ೥݄ݱࡏͷόʔδϣϯ͸ɺ7FSTJPO

5XJUUFS#PPUTUSBQͱ͸ ‣ #PPUTUSBQΛ࢖༻ͨ͠αΠτ ‣ http://expo.getbootstrap.com/ Ͱଟ਺঺հ

5XJUUFS#PPUTUSBQΛ࢖ͬͯΈΔ ‣ ·ͣ͸ɺ#PPUTUSBQΛμ΢ϯϩʔυ ‣ http://getbootstrap.com/ ! ‣ %PXOMPBE#PPUTUSBQϘλϯ͔Β

5XJUUFS#PPUTUSBQΛ࢖ͬͯΈΔ ‣ ;JQϑΝΠϧΛղౚ͢ΔͱɺҎԼͷΑ͏ͳ಺༰ʹͳ͍ͬͯΔ ‣ ͜ͷʮCPPUTUSBQʯϑΥϧμʹϖʔδΛ࡞੒͍ͯ͘͠ bootstrap/ ├── css/ │ ├──

5XJUUFS#PPUTUSBQΛ࢖ͬͯΈΔ ‣ 5XJUUFS#PPUTUSBQʹ͓͚ΔάϦου͸ɺίϥϜ͕جຊ ‣ ͷ෼ׂ͔Βɺ༷ʑͳ૊߹͕ͤੜ·ΕΔ ! ! ! ! !

5XJUUFS#PPUTUSBQΛ࢖ͬͯΈΔ ‣ ͨͱ͑͹ɺ ͷίϥϜΛ૊ΜͰΈΔ ‣ ·ͣίϯςϯπશମΛEJWDMBTTDPOUBJOFSͰғΉ <!DOCTYPE HTML> <html>

5XJUUFS#PPUTUSBQΛ࢖ͬͯΈΔ ‣ ࣍ʹɺίϥϜͷઌ಄ΛEJWDMBTTSPXͰғΉ <!DOCTYPE HTML> <html> <head> <link rel="stylesheet" href="css/bootstrap.css"

5XJUUFS#PPUTUSBQΛ࢖ͬͯΈΔ ‣ EJWDMBTTlSPXͷதʹ ‣ ͭͷEJWDMBTTlDPMNEΛೖΕΔ ... <div class="container"> <h1>Twitter Bootstrapͷςετ</h1>

5XJUUFS#PPUTUSBQΛ࢖ͬͯΈΔ ‣ ͦΕͧΕͷEJWDMBTTDPMNEͷதʹɺ಺༰Λهड़ ... <div class="row"> <div class="col-md-4"> <h2>ςετ</h2> <p>͋ͷΠʔϋτʔϰΥͷ͖͢ͱ͓ͬͨ෩...</p>

5XJUUFS#PPUTUSBQΛ࢖ͬͯΈΔ ‣ ஈ૊ͷϨΠΞ΢τ͕؆୯ʹ࣮ݱ

5XJUUFS#PPUTUSBQΛ࢖ͬͯΈΔ ‣ ׬੒ͨ͠ϖʔδͷαϯϓϧ

5XJUUFS#PPUTUSBQΛ࢖ͬͯΈΔ ‣ ஈ૊ͷ׬੒ͨ͠αϯϓϧΛҎԼ͔Βμ΢ϯϩʔυ ‣ ࣮ࡍʹίʔυΛΈͳ͕Β෮श͠·͢ http://goo.gl/iQGCra

5XJUUFS#PPUTUSBQ ϖʔδαϯϓϧΛղੳ͢Δ

ϖʔδαϯϓϧΛղੳ͢Δ ‣ ΦϑΟγϟϧϖʔδʹɺ࣮ࡍͷ׆༻ྫͷςϯϓϨʔτ͕ެ։͞Ε͍ͯΔ ‣ ͜ΕΛࢀߟʹ͢Δͱɺ࣮ࡍʹϖʔδͷΠϝʔδ͕௫Έ΍͍͢

ϖʔδαϯϓϧΛղੳ͢Δ ‣ 4UBSUFSUFNQMBUF

ϖʔδαϯϓϧΛղੳ͢Δ ‣ #BTJDNBSLFUJOHTJUF

ϖʔδαϯϓϧΛղੳ͢Δ ‣ 'MVJEMBZPVU !

ϖʔδαϯϓϧΛղੳ͢Δ ‣ 'MVJEMBZPVU

ϖʔδαϯϓϧΛղੳ͢Δ ‣ 4UJDLZGPPUFS

ϖʔδαϯϓϧΛղੳ͢Δ ‣ $BSPVTFMKVNCPUSPO

5XJUUFS#PPUTUSBQ σβΠϯΛΧελϚΠζ

σβΠϯΛΧελϚΠζ ‣ #PPUTUSBQͷ$44͸͔ͳΓෳࡶ ‣ ௚઀ฤू͢Δͷ͸ͪΐͬͱେมʜ

σβΠϯΛΧελϚΠζ ‣ #PPUTUSBQͷϖʔδʹΧελϚΠζ༻ϝχϡʔ͕͋Δ ‣ ޷ΈʹԠͯ͡มߋͯ͠ɺ$44μ΢ϯϩʔυͯ͠ೖΕସ͑Δ

σβΠϯΛΧελϚΠζ ‣ ྫ͑͹ɺഎܠͱจࣈͷ৭Λมߋ

σβΠϯΛΧελϚΠζ ‣ 5XJUUFSͷΦϑΟγϟϧͱ͸ผʹɺ༷ʑͳΧελϚΠζ༻ςϯϓϨʔτ͕ଘࡏ͢Δ ‣ ༗ྉͷ΋ͷ΋͋Δ͕ɺϑϦʔͷ΋ͷ΋ ‣ ޮՌతʹར༻ͯ͠ΈΔ

#MBDL5JF ‣ IUUQXXXCMBDLUJFDP ‣ ϙʔτϑΥϦΦʹ͓εεϝͷςʔϚΛूΊͨαΠτ

#MBDL5JF ‣ #MBDL5JF͔Β͓ؾʹ͍ΓͷςʔϚΛμ΢ϯϩʔυ ‣ ςΩετɺࣸਅɺը૾ɺϑΥϯτͳͲΛมߋͯࣗ͠෼ͷ޷ΈͷσβΠϯʹ

#MBDL5JF ‣ ྫ͑͹ɺ4UVEJPςϯϓϨʔτΛμ΢ϯϩʔυ

#MBDL5JF ‣ ΧελϚΠζͯ͠ɺࣗ෼ͷϖʔδʹ