Web基礎実習B/情報メディア活用演習 01/02 #10

Transcript

1. ڞཱঁࢠେֶ
   8FC جૅ࣮श # ৘ใϝσΟΞ׆༻ԋश @ UBLBXP
   TIVOTVLF UBLBXP!DFOLIPSPSH Webجૅ࣮शB/ ৘ใϝσΟΞ׆༻ԋश_01/02 #10 Twitter Bootstrapͷར༻(2) WebαΠτاըॻʹ͍ͭͯ 2012.06.25 ୲౰: ߴඌ ढ़հ (౦ژ᥁ज़େֶ ܳज़৘ใηϯλʔ)
2. ڞཱঁࢠେֶ
   8FC جૅ࣮श # ৘ใϝσΟΞ׆༻ԋश @ UBLBXP
   TIVOTVLF UBLBXP!DFOLIPSPSH #10 Twitter Bootstrapͷར༻(2) तۀεϥΠυ+αϯϓϧϑΝΠϧURL •http://speakerdeck.com/u/takawo •αϯϓϧϑΝΠϧ •http://goo.gl/fOiGz
3. ڞཱঁࢠେֶ
   8FC جૅ࣮श # ৘ใϝσΟΞ׆༻ԋश @ UBLBXP
   TIVOTVLF UBLBXP!DFOLIPSPSH #10 Twitter Bootstrapͷར༻(2) ࠓिͷఏग़՝୊ •࠷ऴ՝୊ͱ੍ͯ͠࡞͢ΔɺWebαΠτͷاըॻΛ੍࡞͢Δ 1.αΠτͷςʔϚ 2.λʔήοτ (ͲͷΑ͏ͳਓΛର৅ʹ͍ͯ͠Δ͔) 3.αΠτͷ֊૚ߏ଄ (࠷௿10ϖʔδ) 4.τοϓϖʔδͷϫΠϠʔϑϨʔϜ •དྷिͷतۀ͔Β࣮ࡍʹ࢖༻͢ΔͷͰσʔλʹ·ͱΊͯߦ͘͜ͱ •Word΋͘͠͸PowerPointͷσʔλ •࢖༻͢Δࣸਅ΍ૉࡐ͸ϑΥϧμʹ·ͱΊ͓ͯ͘͜ͱɻ
4. ڞཱঁࢠେֶ
   8FC جૅ࣮श # ৘ใϝσΟΞ׆༻ԋश @ UBLBXP
   TIVOTVLF UBLBXP!DFOLIPSPSH #10 Twitter Bootstrapͷར༻(2) લճͷ෮श •Twitter Bootstrapͱ͸ •Twitter Bootstrap •Twitter Bootstrapͷಛ௃ •HTML5/CSS3ͷϑϨʔϜϫʔΫ •Φʔϓϯιʔε •Ϋϩεϒϥ΢β •ϨεϙϯγϒσβΠϯ •12ΧϥϜͷάϦουϨΠΞ΢τ •jQueryͷϓϥάΠϯ͕࢖༻Ͱ͖Δ
5. ڞཱঁࢠେֶ
   8FC جૅ࣮श # ৘ใϝσΟΞ׆༻ԋश @ UBLBXP
   TIVOTVLF UBLBXP!DFOLIPSPSH #10 Twitter Bootstrapͷར༻(2) લճͷ෮श Twitter Bootstrap •Twitter Bootstrapͱ͸ •Twitter BootstrapϑΝΠϧͷμ΢ϯϩʔυ(00) •Twitter BootstrapͷಡΈࠐΈ(01) •άϦουγεςϜ(02-03) •ஈ૊ͷೖΕࢠ(04) •ྲྀಈతͳϨΠΞ΢τ(05) •ϨεϙϯγϒͳϨΠΞ΢τ(06)
6. ڞཱঁࢠେֶ
   8FC جૅ࣮श # ৘ใϝσΟΞ׆༻ԋश @ UBLBXP
   TIVOTVLF UBLBXP!DFOLIPSPSH #10 Twitter Bootstrapͷར༻(2) ࠓճͷ಺༰ •Twitter BootstrapΛ࢖ͬͨWebϖʔδ੍࡞ଓ͖ •ϘλϯΛ࡞Δ(07) •ΞΠίϯ෇͖ϘλϯΛ࡞Δ(08) •ϘλϯάϧʔϓΛ࡞Δ(09) •λϒͷϝχϡʔΛ࡞Δ •WebαΠτاըॻʹ͍ͭͯ •اըॻͷ֬ೝɺϫΠϠϑϨʔϜͷڞ༗ •ࠓޙͷਐΊํ
7. ڞཱঁࢠେֶ
   8FC جૅ࣮श # ৘ใϝσΟΞ׆༻ԋश @ UBLBXP
   TIVOTVLF UBLBXP!DFOLIPSPSH #10 Twitter Bootstrapͷར༻(2) ϘλϯΛ࡞Δ(07) <div class="container" style="padding-top:40px"> <a href="http://twitter.com/#!/takawo" target="_blank"> <span class="btn">Twitter</span> </a> </div>
8. ڞཱঁࢠେֶ
   8FC جૅ࣮श # ৘ใϝσΟΞ׆༻ԋश @ UBLBXP
   TIVOTVLF UBLBXP!DFOLIPSPSH #10 Twitter Bootstrapͷར༻(2) ϘλϯΛ࡞Δ(07) <div class="container" style="padding-top:40px"> <a href="http://twitter.com/#!/takawo" target="_blank"><span class="btn">Twitter</span></a> <span class="btn btn-large">OK!</span> <span class="btn btn-small btn-primary">OK!</span> <span class="btn btn-info">OK!</span> <span class="btn btn-success">OK!</span> <span class="btn btn-warning">OK!</span> <span class="btn btn-danger">OK!</span> </div>
9. ڞཱঁࢠେֶ
   8FC جૅ࣮श # ৘ใϝσΟΞ׆༻ԋश @ UBLBXP
   TIVOTVLF UBLBXP!DFOLIPSPSH #10 Twitter Bootstrapͷར༻(2) ΞΠίϯ෇͖ϘλϯΛ࡞Δ(08) <div class="container" style="padding-top:40px"> <span class="btn"><i class="icon-camera"></i> ϑΥτΪϟϥϦʔ</span> <span class="btn btn-info"><i class="icon-camera icon-white"></i> ϑΥτΪϟϥ Ϧʔ</span> </div>
10. ڞཱঁࢠେֶ
    8FC جૅ࣮श # ৘ใϝσΟΞ׆༻ԋश @ UBLBXP
    TIVOTVLF UBLBXP!DFOLIPSPSH #10 Twitter Bootstrapͷར༻(2) ΞΠίϯ෇͖ϘλϯΛ࡞Δ(08) •ͦͷଞͷΞΠίϯ •http://twitter.github.com/bootstrap/base-css.html#icons
11. ڞཱঁࢠେֶ
    8FC جૅ࣮श # ৘ใϝσΟΞ׆༻ԋश @ UBLBXP
    TIVOTVLF UBLBXP!DFOLIPSPSH #10 Twitter Bootstrapͷར༻(2) ϘλϯάϧʔϓΛ࡞Δ(09) <div class="btn-group"> <button class="btn">Option 1</button> <button class="btn"><i class="icon-search"></i> Option 2</button> <button class="btn">Option 3</button> </div>
12. ڞཱঁࢠେֶ
    8FC جૅ࣮श # ৘ใϝσΟΞ׆༻ԋश @ UBLBXP
    TIVOTVLF UBLBXP!DFOLIPSPSH #10 Twitter Bootstrapͷར༻(2) λϒͷϝχϡʔΛ࡞Δ(10) <div class="container" style="padding-top:40px"> <div class="tabbable tabs-below"> <div class="tab-content"> <div id="menu1" class="tab-pane active">Menu1 Content</div> <div id="menu2" class="tab-pane">M2 Content</div> <div id="menu3" class="tab-pane">M3 Content</div> </div> <ul class="nav nav-tabs"> <li class="active"><a href="#menu1" data-toggle="tab">Menu1</a></li> <li><a href="#menu2" data-toggle="tab">Menu2</a></li> <li><a href="#menu3" data-toggle="tab">Menu3</a></li> </ul> </div>
13. ڞཱঁࢠେֶ
    8FC جૅ࣮श # ৘ใϝσΟΞ׆༻ԋश @ UBLBXP
    TIVOTVLF UBLBXP!DFOLIPSPSH #10 WebαΠτاըॻʹ͍ͭͯ اըॻͷ֬ೝ •αΠτͷςʔϚ •λʔήοτ (ͲͷΑ͏ͳਓΛର৅ʹ͍ͯ͠Δ͔) •αΠτͷ֊૚ߏ଄ (࠷௿10ϖʔδ) •τοϓϖʔδͷϫΠϠʔϑϨʔϜ •ϓϦϯτΞ΢τͯ͠ఏग़͍ͯͩ͘͠͞ɻ
14. ڞཱঁࢠେֶ
    8FC جૅ࣮श # ৘ใϝσΟΞ׆༻ԋश @ UBLBXP
    TIVOTVLF UBLBXP!DFOLIPSPSH #10 WebαΠτاըॻʹ͍ͭͯ ϫΠϠϑϨʔϜͷڞ༗ •ϫΠϠϑϨʔϜΛඳ͍͖ͯͨਓ͸ ֶ੶൪߸ͱ໊લ Λهೖͯ͠ఏग़͍ͯͩ͘͠͞ɻ
15. ڞཱঁࢠେֶ
    8FC جૅ࣮श # ৘ใϝσΟΞ׆༻ԋश @ UBLBXP
    TIVOTVLF UBLBXP!DFOLIPSPSH #10 Twitter Bootstrapͷར༻(2) Ξϯέʔτ •ࠓճͷतۀʹ͍ͭͯ •http://goo.gl/Hp44y