Html5 fun@Tokyo Bootstrap Tips

  • 1,498 views
Uploaded on

HTML5 fun第1回目で使用したスライドになります。 …

HTML5 fun第1回目で使用したスライドになります。
Bootstrapのティップスをデモを元に紹介していいます。
デモで使用したソースは、Githubに公開しています(https://github.com/abechiyo/Bootstrap-tips)

More in: Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,498
On Slideshare
0
From Embeds
0
Number of Embeds
8

Actions

Shares
Downloads
7
Comments
0
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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. その1 スマートデバイスの急速な普及
  • 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. その2 ● さくっと構築できる ● なんとなくお洒落になる ● 情報量が多い
  • 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 />&nbsp;</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 阿部 正幸