Upcoming SlideShare
Html5 fun@Tokyo Bootstrap Tips
- 1. RWDのためのBootstrap Tips 全国にHTML5の楽しさを
- 2. ● ACE01 / SmartRelease プロダクトマネージャー ● CPI エバンジェリスト 統括 ● KDDIウェブ 公認 CPI スタッフブログ 編集長 ● Drupal(g.d.o Japan)日本コミュニティー ●日本ディレクション協会 講演部 ● HTML5 Fun 理事 OSSを広げる活動、Web制作に関する情報発信を行う 神戸生まれ、横浜育ち 阿部 正幸（あべ まさゆき） ディレクタープログラマー プ ロ マ ネ Evangelist
- 3. https://sumacoco.com
- 4. VENTURE Since 1998 Hosting Web Service 取り扱っていません 取り扱っていません
- 5. 本日はBootstrapを使い RWD構築の話をします。
- 6. Twitter社が提供するRWD構築の ためのフレームワーク とは MITライセンス、商用利用も可能
- 7. が注目される理由
- 8. その１ スマートデバイスの急速な普及
- 9. 2011年スマートフォン出荷台数 参照元：http://www.canalys.com/newsroom/smart-phones-overtake-client-pcs-2011 4億 8千万台 Smart Phones 2億 3千万台 Note Books Desktops 1億 1千万台 Pads 6千万台
- 10. 2011年スマートフォン出荷台数 参照元：http://www.canalys.com/newsroom/smart-phones-overtake-client-pcs-2011 4億 8千万台 Smart Phones 2億 3千万台 Note Books Desktops 1億 1千万台 Pads 6千万台 Smart Phoneが、パソコンとタブレットの 出荷台数を上回った
- 11. 2013年タブレット出荷台数 参照元：http://www.canalys.com/newsroom/tablets-make-50-pc-market-2014
- 12. 2013年タブレット出荷台数 参照元：http://www.canalys.com/newsroom/tablets-make-50-pc-market-2014 2017年には3億9600万台 Notebook、Desktopと比較して60.5％
- 13. ITが手元にある時代に
- 14. 情報：NBC NEWS http://photoblog.nbcnews.com/_news/2013/03/14/17312316-witnessing-papal-history-changes- 2005年
- 15. 情報：NBC NEWS http://photoblog.nbcnews.com/_news/2013/03/14/17312316-witnessing-papal-history-changes- 2013年
- 16. to C サイトでは50%を越える CPIサイトの場合(2014年3月) PC : 75.3% mobile : 22% tablet : 2.7%
- 17. 今後の制作は手元のITを強く意識して 制作をしなくてはいけない
- 18. スマートデバイス向けサイトが必要
- 19. 11,868 2013年6月のデータ
- 20. RWDサイトが必要
- 21. その２ ● さくっと構築できる ● なんとなくお洒落になる ● 情報量が多い
- 22. 番外編 ● オレオレで構築し丸投げ・・・ ● え、なんか崩れ (ry ● 検証したのかよ このようなことが軽減できる
- 23. え？検証したの？ まーたぶんしてないよね・・・
- 24. 使い方 1. Bootstrap ダウンロード 2. CSS、JS のパス通す 3. コピペと微調整の繰り返し
- 25. https://github.com/abechiyo/Bootstrap-tips デモ使用したソースコードを公開しています
- 26. 1. 「http://getbootstrap.com/getting-started/」 Bootstrap ダウンロード 2. 圧縮フォルダを解凍する 3. [js]、[css]、[fonts]フォルダを主に使用する
- 27. パスを通す 1. Basic templateから、ソースをコピー 2. 数カ所変更する <html lang="en"> ↓↓↓ <html lang="ja"> <link href="../../dist/css/bootstrap.min.css" rel="stylesheet"> ↓↓↓ <link href="./css/bootstrap.min.css" rel="stylesheet"> <script src="../../dist/js/bootstrap.min.js"></script> ↓↓↓ <script src="./js/bootstrap.min.js"></script>
- 28. Tips
- 29. Grid System
- 30. Grid System xs (phones) sm (tablets) md (desktops) lg (larger desktops)
- 31. Grid System Push and Pull <div class="row"> <h3>push and pull</h3> <div class="col-md-9 col-md-push-3 c1”>最初のカラム</div> <div class="col-md-3 col-md-pull-9 c2”>2番目のカラム</div> </div> ( push )右に移動
- 32. Grid System clearing <div class="row"> <div class="col-xs-6 col-sm-3">1 Column <br /> </div> <div class="col-xs-6 col-sm-3">2 Column</div> <!-- Add the extra clearfix for only the required viewport--> <div class="clearfix visible-xs"></div> <div class="col-xs-6 col-sm-3"> 3 Column</div> <div class="col-xs-6 col-sm-3”>4 Column</div> </div>
- 33. Grid System Offset <div class="row"> <div class="col-sm-5 col-md-6">1 Column</div> <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">2 Column</div> </div>
- 34. Container width and Row width xs (phones) ： Container：auto row：-15px sm (tablets)： Container：750px row：765px(-15px) md (desktops)：Container：970px row：985px(-15px) lg (larger desktops)：1170px row：1185px(-15px)
- 35. Navbar
- 36. Navbar on Mouse Hover @media only screen and (min-width : 768px) { /* Make Navigation Toggle on Desktop Hover */ .dropdown:hover .dropdown-menu { display: block; } } $('.dropdown-toggle').click(function() { var location = $(this).attr('href'); window.location.href = location; return false; });
- 37. Navbar なんか、ださい・・・
- 38. http://shared-blog.kddi-web.com/test/bootstrap/navbar-test.html
- 39. Navbar Centering .navbar .navbar-inner {padding: 0;} .navbar .nav { margin: 0; display: table; width: 100%; } .navbar .nav li { display: table-cell; float: none; } .navbar .nav li a { text-align: center; border-left: 1px solid rgba(255, 255, 255, .75); border-right: 1px solid rgba(0, 0, 0, .1);} .navbar .nav li:last-child a { border-right: 0; border-radius: 0 3px 3px 0; }
- 40. /* Extra Small Devices, Phones */ @media only screen and (max-width : 767px) { … } /* Small Devices, Tablets */ @media only screen and (min-width : 768px) { … } /* Medium Devices, Desktops */ @media only screen and (min-width : 992px) { … } /* Large Devices, Wide Screens */ @media only screen and (min-width : 1200px) { … } 細かい微調整
- 41. 画像と文字を分離することで、 どの画面サイズでも文字を読みやすくしている
- 42. Image Class
- 43. Retina Image .imgretina{ background-image: url(./abe-1x.png); } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( min--moz-device-pixel-ratio: 2), only screen and ( -o-min-device-pixel-ratio: 2/1), only screen and ( min-device-pixel-ratio: 2), only screen and ( min-resolution: 192dpi), only screen and ( min-resolution: 2dppx) { .imgretina{ background-image: url(./abe-2x.png); background-size: 100px 100px; } }}
- 44. 画面幅いっぱいに画像 参考サイト：http://www.thinslices.com
- 45. 画面幅いっぱいに画像
- 46. 参照：http://shared-blog.kddi-web.com/activity/202
- 47. さいごに
- 48. ビジネスの本質に注力できる Webで設けてなんぼ 工数が減ると ● BootstrapはRWDのフレームワーク ● 工数を削減、メンテがラク
- 49. Bootstrap以外にも 工数を削減するプロダクトがある
- 50. 今後の制作者は SVG Canvas Web Storage Geolocation Web Workers Node.js
- 51. 今後の制作者は SVG Canvas Web Storage Geolocation Web Workers Node.js 全てを使える必要は無いが どんなことができるかは知っておく必要がある
- 52. さまざまなプロダクトを知り 新しい価値の創造や、Webの本質に
- 53. このようなサイトをチェックしていると良いかも
- 54. ご清聴ありがとうございました ID：chiyo.abe 阿部 正幸
Be the first to comment