Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

takawo shunsuke

June 24, 2012
Tweet

More Decks by takawo shunsuke

Other Decks in Education

Transcript

  1. ڞཱঁࢠେֶ8FC جૅ࣮श # ৘ใϝσΟΞ׆༻ԋश @ UBLBXPTIVOTVLF UBLBXP!DFOLIPSPSH Webجૅ࣮शB/ ৘ใϝσΟΞ׆༻ԋश_01/02 #10

    Twitter Bootstrapͷར༻(2) WebαΠτاըॻʹ͍ͭͯ 2012.06.25 ୲౰: ߴඌ ढ़հ (౦ژ᥁ज़େֶ ܳज़৘ใηϯλʔ)
  2. ڞཱঁࢠେֶ8FC جૅ࣮श # ৘ใϝσΟΞ׆༻ԋश @ UBLBXPTIVOTVLF UBLBXP!DFOLIPSPSH #10 Twitter Bootstrapͷར༻(2)

    तۀεϥΠυ+αϯϓϧϑΝΠϧURL •http://speakerdeck.com/u/takawo •αϯϓϧϑΝΠϧ •http://goo.gl/fOiGz
  3. ڞཱঁࢠେֶ8FC جૅ࣮श # ৘ใϝσΟΞ׆༻ԋश @ UBLBXPTIVOTVLF UBLBXP!DFOLIPSPSH #10 Twitter Bootstrapͷར༻(2)

    ࠓिͷఏग़՝୊ •࠷ऴ՝୊ͱ੍ͯ͠࡞͢ΔɺWebαΠτͷاըॻΛ੍࡞͢Δ 1.αΠτͷςʔϚ 2.λʔήοτ (ͲͷΑ͏ͳਓΛର৅ʹ͍ͯ͠Δ͔) 3.αΠτͷ֊૚ߏ଄ (࠷௿10ϖʔδ) 4.τοϓϖʔδͷϫΠϠʔϑϨʔϜ •དྷिͷतۀ͔Β࣮ࡍʹ࢖༻͢ΔͷͰσʔλʹ·ͱΊͯߦ͘͜ͱ •Word΋͘͠͸PowerPointͷσʔλ •࢖༻͢Δࣸਅ΍ૉࡐ͸ϑΥϧμʹ·ͱΊ͓ͯ͘͜ͱɻ
  4. ڞཱঁࢠେֶ8FC جૅ࣮श # ৘ใϝσΟΞ׆༻ԋश @ UBLBXPTIVOTVLF UBLBXP!DFOLIPSPSH #10 Twitter Bootstrapͷར༻(2)

    લճͷ෮श •Twitter Bootstrapͱ͸ •Twitter Bootstrap •Twitter Bootstrapͷಛ௃ •HTML5/CSS3ͷϑϨʔϜϫʔΫ •Φʔϓϯιʔε •Ϋϩεϒϥ΢β •ϨεϙϯγϒσβΠϯ •12ΧϥϜͷάϦουϨΠΞ΢τ •jQueryͷϓϥάΠϯ͕࢖༻Ͱ͖Δ
  5. ڞཱঁࢠେֶ8FC جૅ࣮श # ৘ใϝσΟΞ׆༻ԋश @ UBLBXPTIVOTVLF UBLBXP!DFOLIPSPSH #10 Twitter Bootstrapͷར༻(2)

    લճͷ෮श Twitter Bootstrap •Twitter Bootstrapͱ͸ •Twitter BootstrapϑΝΠϧͷμ΢ϯϩʔυ(00) •Twitter BootstrapͷಡΈࠐΈ(01) •άϦουγεςϜ(02-03) •ஈ૊ͷೖΕࢠ(04) •ྲྀಈతͳϨΠΞ΢τ(05) •ϨεϙϯγϒͳϨΠΞ΢τ(06)
  6. ڞཱঁࢠେֶ8FC جૅ࣮श # ৘ใϝσΟΞ׆༻ԋश @ UBLBXPTIVOTVLF UBLBXP!DFOLIPSPSH #10 Twitter Bootstrapͷར༻(2)

    ࠓճͷ಺༰ •Twitter BootstrapΛ࢖ͬͨWebϖʔδ੍࡞ଓ͖ •ϘλϯΛ࡞Δ(07) •ΞΠίϯ෇͖ϘλϯΛ࡞Δ(08) •ϘλϯάϧʔϓΛ࡞Δ(09) •λϒͷϝχϡʔΛ࡞Δ •WebαΠτاըॻʹ͍ͭͯ •اըॻͷ֬ೝɺϫΠϠϑϨʔϜͷڞ༗ •ࠓޙͷਐΊํ
  7. ڞཱঁࢠେֶ8FC جૅ࣮श # ৘ใϝσΟΞ׆༻ԋश @ UBLBXPTIVOTVLF 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 جૅ࣮श # ৘ใϝσΟΞ׆༻ԋश @ UBLBXPTIVOTVLF 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 جૅ࣮श # ৘ใϝσΟΞ׆༻ԋश @ UBLBXPTIVOTVLF 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 جૅ࣮श # ৘ใϝσΟΞ׆༻ԋश @ UBLBXPTIVOTVLF UBLBXP!DFOLIPSPSH #10 Twitter Bootstrapͷར༻(2)

    ΞΠίϯ෇͖ϘλϯΛ࡞Δ(08) •ͦͷଞͷΞΠίϯ •http://twitter.github.com/bootstrap/base-css.html#icons
  11. ڞཱঁࢠେֶ8FC جૅ࣮श # ৘ใϝσΟΞ׆༻ԋश @ UBLBXPTIVOTVLF 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 جૅ࣮श # ৘ใϝσΟΞ׆༻ԋश @ UBLBXPTIVOTVLF 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 جૅ࣮श # ৘ใϝσΟΞ׆༻ԋश @ UBLBXPTIVOTVLF UBLBXP!DFOLIPSPSH #10 WebαΠτاըॻʹ͍ͭͯ اըॻͷ֬ೝ

    •αΠτͷςʔϚ •λʔήοτ (ͲͷΑ͏ͳਓΛର৅ʹ͍ͯ͠Δ͔) •αΠτͷ֊૚ߏ଄ (࠷௿10ϖʔδ) •τοϓϖʔδͷϫΠϠʔϑϨʔϜ •ϓϦϯτΞ΢τͯ͠ఏग़͍ͯͩ͘͠͞ɻ