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>  <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 阿部正幸