Your SlideShare is downloading. ×
0
RWDのためのBootstrap Tips
全国にHTML5の楽しさを
● ACE01 / SmartRelease プロダクトマネージャー
● CPI エバンジェリスト 統括
● KDDIウェブ 公認 CPI スタッフブログ 編集長
● Drupal(g.d.o Japan)日本コミュニティー
●日本ディレクショ...
https://sumacoco.com
VENTURE
Since
1998
Hosting
Web
Service
取り扱っていません
取り扱っていません
本日はBootstrapを使い
RWD構築の話をします。
Twitter社が提供するRWD構築の
ためのフレームワーク
とは
MITライセンス、商用利用も可能
が注目される理由
その1
スマートデバイスの急速な普及
2011年スマートフォン出荷台数
参照元:http://www.canalys.com/newsroom/smart-phones-overtake-client-pcs-2011
4億 8千万台
Smart Phones
2億 3千万台
No...
2011年スマートフォン出荷台数
参照元:http://www.canalys.com/newsroom/smart-phones-overtake-client-pcs-2011
4億 8千万台
Smart Phones
2億 3千万台
No...
2013年タブレット出荷台数
参照元:http://www.canalys.com/newsroom/tablets-make-50-pc-market-2014
2013年タブレット出荷台数
参照元:http://www.canalys.com/newsroom/tablets-make-50-pc-market-2014
2017年には3億9600万台
Notebook、Desktopと比較して60....
ITが手元にある時代に
情報:NBC NEWS
http://photoblog.nbcnews.com/_news/2013/03/14/17312316-witnessing-papal-history-changes-
2005年
情報:NBC NEWS
http://photoblog.nbcnews.com/_news/2013/03/14/17312316-witnessing-papal-history-changes-
2013年
to C サイトでは50%を越える
CPIサイトの場合(2014年3月)
PC : 75.3%
mobile : 22%
tablet : 2.7%
今後の制作は手元のITを強く意識して
制作をしなくてはいけない
スマートデバイス向けサイトが必要
11,868
2013年6月のデータ
RWDサイトが必要
その2
● さくっと構築できる
● なんとなくお洒落になる
● 情報量が多い
番外編
● オレオレで構築し丸投げ・・・
● え、なんか崩れ (ry
● 検証したのかよ
このようなことが軽減できる
え?検証したの?
まーたぶんしてないよね・・・
使い方
1. Bootstrap ダウンロード
2. CSS、JS のパス通す
3. コピペと微調整の繰り返し
https://github.com/abechiyo/Bootstrap-tips
デモ使用したソースコードを公開しています
1. 「http://getbootstrap.com/getting-started/」
Bootstrap ダウンロード
2. 圧縮フォルダを解凍する
3. [js]、[css]、[fonts]フォルダを主に使用する
パスを通す
1. Basic templateから、ソースをコピー
2. 数カ所変更する
<html lang="en">
↓↓↓
<html lang="ja">
<link href="../../dist/css/bootstrap.mi...
Tips
Grid System
Grid System
xs (phones)
sm (tablets)
md (desktops)
lg (larger desktops)
Grid System Push and Pull
<div class="row">
<h3>push and pull</h3>
<div class="col-md-9 col-md-push-3 c1”>最初のカラム</div>
<di...
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...
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 co...
Container width and Row width
xs (phones) : Container:auto row:-15px
sm (tablets): Container:750px row:765px(-15px)
md (de...
Navbar
Navbar on Mouse Hover
@media only screen and (min-width : 768px) {
/* Make Navigation Toggle on Desktop Hover */
.dropdown...
Navbar
なんか、ださい・・・
http://shared-blog.kddi-web.com/test/bootstrap/navbar-test.html
Navbar Centering
.navbar .navbar-inner {padding: 0;}
.navbar .nav { margin: 0; display: table; width: 100%; }
.navbar .nav...
/* Extra Small Devices, Phones */
@media only screen and (max-width : 767px) { … }
/* Small Devices, Tablets */
@media onl...
画像と文字を分離することで、
どの画面サイズでも文字を読みやすくしている
Image Class
Retina Image
.imgretina{ background-image: url(./abe-1x.png); }
@media
only screen and (-webkit-min-device-pixel-ratio: 2)...
画面幅いっぱいに画像
参考サイト:http://www.thinslices.com
画面幅いっぱいに画像
参照:http://shared-blog.kddi-web.com/activity/202
さいごに
ビジネスの本質に注力できる
Webで設けてなんぼ
工数が減ると
● BootstrapはRWDのフレームワーク
● 工数を削減、メンテがラク
Bootstrap以外にも
工数を削減するプロダクトがある
今後の制作者は
SVG
Canvas
Web Storage
Geolocation
Web Workers
Node.js
今後の制作者は
SVG
Canvas
Web Storage
Geolocation
Web Workers
Node.js
全てを使える必要は無いが
どんなことができるかは知っておく必要がある
さまざまなプロダクトを知り
新しい価値の創造や、Webの本質に
このようなサイトをチェックしていると良いかも
ご清聴ありがとうございました
ID:chiyo.abe
阿部 正幸
Html5 fun@Tokyo Bootstrap Tips
Html5 fun@Tokyo Bootstrap Tips
Html5 fun@Tokyo Bootstrap Tips
Html5 fun@Tokyo Bootstrap Tips
Html5 fun@Tokyo Bootstrap Tips
Html5 fun@Tokyo Bootstrap Tips
Upcoming SlideShare
Loading in...5
×

Html5 fun@Tokyo Bootstrap Tips

1,812

Published on

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

Published in: Design
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,812
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
13
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Transcript of "Html5 fun@Tokyo Bootstrap Tips"

  1. 1. RWDのためのBootstrap Tips 全国にHTML5の楽しさを
  2. 2. ● ACE01 / SmartRelease プロダクトマネージャー ● CPI エバンジェリスト 統括 ● KDDIウェブ 公認 CPI スタッフブログ 編集長 ● Drupal(g.d.o Japan)日本コミュニティー ●日本ディレクション協会 講演部 ● HTML5 Fun 理事 OSSを広げる活動、Web制作に関する情報発信を行う 神戸生まれ、横浜育ち 阿部 正幸(あべ まさゆき) ディレクタープログラマー プ ロ マ ネ Evangelist
  3. 3. https://sumacoco.com
  4. 4. VENTURE Since 1998 Hosting Web Service 取り扱っていません 取り扱っていません
  5. 5. 本日はBootstrapを使い RWD構築の話をします。
  6. 6. Twitter社が提供するRWD構築の ためのフレームワーク とは MITライセンス、商用利用も可能
  7. 7. が注目される理由
  8. 8. その1 スマートデバイスの急速な普及
  9. 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. 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. 11. 2013年タブレット出荷台数 参照元:http://www.canalys.com/newsroom/tablets-make-50-pc-market-2014
  12. 12. 2013年タブレット出荷台数 参照元:http://www.canalys.com/newsroom/tablets-make-50-pc-market-2014 2017年には3億9600万台 Notebook、Desktopと比較して60.5%
  13. 13. ITが手元にある時代に
  14. 14. 情報:NBC NEWS http://photoblog.nbcnews.com/_news/2013/03/14/17312316-witnessing-papal-history-changes- 2005年
  15. 15. 情報:NBC NEWS http://photoblog.nbcnews.com/_news/2013/03/14/17312316-witnessing-papal-history-changes- 2013年
  16. 16. to C サイトでは50%を越える CPIサイトの場合(2014年3月) PC : 75.3% mobile : 22% tablet : 2.7%
  17. 17. 今後の制作は手元のITを強く意識して 制作をしなくてはいけない
  18. 18. スマートデバイス向けサイトが必要
  19. 19. 11,868 2013年6月のデータ
  20. 20. RWDサイトが必要
  21. 21. その2 ● さくっと構築できる ● なんとなくお洒落になる ● 情報量が多い
  22. 22. 番外編 ● オレオレで構築し丸投げ・・・ ● え、なんか崩れ (ry ● 検証したのかよ このようなことが軽減できる
  23. 23. え?検証したの? まーたぶんしてないよね・・・
  24. 24. 使い方 1. Bootstrap ダウンロード 2. CSS、JS のパス通す 3. コピペと微調整の繰り返し
  25. 25. https://github.com/abechiyo/Bootstrap-tips デモ使用したソースコードを公開しています
  26. 26. 1. 「http://getbootstrap.com/getting-started/」 Bootstrap ダウンロード 2. 圧縮フォルダを解凍する 3. [js]、[css]、[fonts]フォルダを主に使用する
  27. 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. 28. Tips
  29. 29. Grid System
  30. 30. Grid System xs (phones) sm (tablets) md (desktops) lg (larger desktops)
  31. 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. 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. 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. 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. 35. Navbar
  36. 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. 37. Navbar なんか、ださい・・・
  38. 38. http://shared-blog.kddi-web.com/test/bootstrap/navbar-test.html
  39. 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. 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. 41. 画像と文字を分離することで、 どの画面サイズでも文字を読みやすくしている
  42. 42. Image Class
  43. 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. 44. 画面幅いっぱいに画像 参考サイト:http://www.thinslices.com
  45. 45. 画面幅いっぱいに画像
  46. 46. 参照:http://shared-blog.kddi-web.com/activity/202
  47. 47. さいごに
  48. 48. ビジネスの本質に注力できる Webで設けてなんぼ 工数が減ると ● BootstrapはRWDのフレームワーク ● 工数を削減、メンテがラク
  49. 49. Bootstrap以外にも 工数を削減するプロダクトがある
  50. 50. 今後の制作者は SVG Canvas Web Storage Geolocation Web Workers Node.js
  51. 51. 今後の制作者は SVG Canvas Web Storage Geolocation Web Workers Node.js 全てを使える必要は無いが どんなことができるかは知っておく必要がある
  52. 52. さまざまなプロダクトを知り 新しい価値の創造や、Webの本質に
  53. 53. このようなサイトをチェックしていると良いかも
  54. 54. ご清聴ありがとうございました ID:chiyo.abe 阿部 正幸
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×