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

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

ࠓ೔ͷ಺༰ ‣ ΑΓຊ֨తͳ8FCσβΠϯϔ ‣ ʮ$44ϑϨʔϜϫʔΫʯΛ͔ͭͬͯΈΔ ‣ ࠓճ͸ɺ5XJUUFS#PPUTUSBQΛ୊ࡐʹ

5XJUUFS#PPUTUSBQͱ͸

5XJUUFS#PPUTUSBQͱ͸ ‣http://getbootstrap.com/

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

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

5XJUUFS#PPUTUSBQΛ࢖ͬͯΈΔ

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Λ࢖ͬͯΈΔ ‣ ಋೖ͸؆୯ɺԼهͷϦϯΫΛೖΕΔ͚ͩ <link href="css/bootstrap.min.css" rel="stylesheet">

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>

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>

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>

5XJUUFS#PPUTUSBQΛ࢖ͬͯΈΔ ‣ 5XJUUFS#PPUTUSBQͰͷϨΠΞ΢τ͸ʮάϦουγεςϜʯ͕جຊͱͳ͍ͬͯΔ ‣ Grid Systems in Graphic Design/Raster Systeme
Fur Die Visuele Gestaltung

5XJUUFS#PPUTUSBQΛ࢖ͬͯΈΔ ‣ ը໘্ʹՍۭͷॎԣઢΛΨΠυϥΠϯͱͯ͠Ҿ͖ɺͦͷϒϩοΫ͝ͱʹจࣈ΍ਤ൛Λ ഑ஔ͢Δ

5XJUUFS#PPUTUSBQΛ࢖ͬͯΈΔ ‣ άϦουγεςϜ ‣ ΤσΟτϦΞϧ ग़൛ σβΠϯͷ෼໺Ͱ͸ɺϨΠΞ΢τͷجຊͱͳ͍ͬͯΔ ‣ 8FCσβΠϯʹ͓͍ͯ΋ɺάϦουγεςϜ͸σβΠϯ΍ϨΠΞ΢τͷجຊ

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

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

5XJUUFS#PPUTUSBQΛ࢖ͬͯΈΔ ‣ EJWDMBTTSPXͷதʹ ‣ ͭͷEJWDMBTTTQBOΛೖΕΔ ... ! <div class="row"> <div
class="span4"> </div> <div class="span4"> </div> <div class="span4"> </div> </div> ! ...

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

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

5XJUUFS#PPUTUSBQΛ࢖ͬͯΈΔ ‣ ͍Ζ͍Ζͳύλʔϯͷஈ૊ʹ௅ઓͯ͠ΈΔ

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> ...

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

5XJUUFS#PPUTUSBQΛ࢖ͬͯΈΔ ‣ ࠓ೔͸͜͜·Ͱ ‣ ࣍ճ͸σβΠϯΛΧελϚΠζͯ͠ɺΑΓચ࿅͞ΕͨσβΠϯʹ͍͖ͯ͠·͢

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

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

Atsushi Tadokoro

More Decks by Atsushi Tadokoro

Other Decks in Technology

Featured

Transcript

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

ࠓ೔ͷ಺༰ ‣ ΑΓຊ֨తͳ8FCσβΠϯϔ ‣ ʮ$44ϑϨʔϜϫʔΫʯΛ͔ͭͬͯΈΔ ‣ ࠓճ͸ɺ5XJUUFS#PPUTUSBQΛ୊ࡐʹ

5XJUUFS#PPUTUSBQͱ͸

5XJUUFS#PPUTUSBQͱ͸ ‣http://getbootstrap.com/

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

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

5XJUUFS#PPUTUSBQΛ࢖ͬͯΈΔ

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

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

5XJUUFS#PPUTUSBQΛ࢖ͬͯΈΔ ‣ ಋೖ͸؆୯ɺԼهͷϦϯΫΛೖΕΔ͚ͩ <link href="css/bootstrap.min.css" rel="stylesheet">

5XJUUFS#PPUTUSBQΛ࢖ͬͯΈΔ ‣ Ͱ͸ૣ଎ɺ#PPUTUSBQΛೖΕͨ)5.-ͷϕʔεΛ࡞੒ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap

5XJUUFS#PPUTUSBQΛ࢖ͬͯΈΔ ‣ ࣍ʹɺ#PPUTUSBQͷίϯςϯτશମΛɺDMBTTDPOUBJOFSͷEJWཁૉͰғΉ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap

5XJUUFS#PPUTUSBQΛ࢖ͬͯΈΔ ‣ )Ͱݟग़͠Λͭͬͯ͘ΈΔ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap

5XJUUFS#PPUTUSBQΛ࢖ͬͯΈΔ ‣ 5XJUUFS#PPUTUSBQͰͷϨΠΞ΢τ͸ʮάϦουγεςϜʯ͕جຊͱͳ͍ͬͯΔ ‣ Grid Systems in Graphic Design/Raster Systeme

5XJUUFS#PPUTUSBQΛ࢖ͬͯΈΔ ‣ ը໘্ʹՍۭͷॎԣઢΛΨΠυϥΠϯͱͯ͠Ҿ͖ɺͦͷϒϩοΫ͝ͱʹจࣈ΍ਤ൛Λ ഑ஔ͢Δ

5XJUUFS#PPUTUSBQΛ࢖ͬͯΈΔ ‣ άϦουγεςϜ ‣ ΤσΟτϦΞϧ ग़൛ σβΠϯͷ෼໺Ͱ͸ɺϨΠΞ΢τͷجຊͱͳ͍ͬͯΔ ‣ 8FCσβΠϯʹ͓͍ͯ΋ɺάϦουγεςϜ͸σβΠϯ΍ϨΠΞ΢τͷجຊ

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

5XJUUFS#PPUTUSBQΛ࢖ͬͯΈΔ ‣ ͨͱ͑͹ɺ ͷίϥϜΛ૊ΜͰΈΔ ‣ ·ͣίϥϜͷઌ಄ΛEJWDMBTTSPXͰғΉ <!DOCTYPE html> <html>

5XJUUFS#PPUTUSBQΛ࢖ͬͯΈΔ ‣ EJWDMBTTSPXͷதʹ ‣ ͭͷEJWDMBTTTQBOΛೖΕΔ ... ! <div class="row"> <div

5XJUUFS#PPUTUSBQΛ࢖ͬͯΈΔ ‣ ͦΕͧΕͷEJWDMBTTTQBOͷதʹɺ಺༰Λهड़ ... ! <div class="row"> <div class="span4"> <h2>Span

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

5XJUUFS#PPUTUSBQΛ࢖ͬͯΈΔ ‣ ͍Ζ͍Ζͳύλʔϯͷஈ૊ʹ௅ઓͯ͠ΈΔ

5XJUUFS#PPUTUSBQΛ࢖ͬͯΈΔ ‣ ๯಄ͷ)ΛΑΓϔομʔΒ͘͠ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap

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

5XJUUFS#PPUTUSBQΛ࢖ͬͯΈΔ ‣ ࠓ೔͸͜͜·Ͱ ‣ ࣍ճ͸σβΠϯΛΧελϚΠζͯ͠ɺΑΓચ࿅͞ΕͨσβΠϯʹ͍͖ͯ͠·͢