Html5 fun@Tokyo Bootstrap Tips
60
RWDのためのBootstrap Tips 全国にHTML5の楽しさを
-
Upload
masayuki-abe -
Category
Design
-
view
1.775 -
download
1
description
HTML5 fun第１回目で使用したスライドになります。 Bootstrapのティップスをデモを元に紹介していいます。 デモで使用したソースは、Githubに公開しています（https://github.com/abechiyo/Bootstrap-tips）
Transcript of Html5 fun@Tokyo Bootstrap Tips
RWDのためのBootstrap Tips
全国にHTML5の楽しさを
● ACE01 / SmartReleaseプロダクトマネージャー● CPI エバンジェリスト統括● KDDIウェブ公認 CPI スタッフブログ編集長● Drupal(g.d.o Japan)日本コミュニティー●日本ディレクション協会 講演部● HTML5 Fun 理事
OSSを広げる活動、Web制作に関する情報発信を行う
神戸生まれ、横浜育ち
阿部 正幸（あべ まさゆき）
ディレクタープログラマー プロマネ Evangelist
https://sumacoco.com
VENTURE
Since
1998
Hosting
Web
Service
取り扱っていません
取り扱っていません
本日はBootstrapを使い
RWD構築の話をします。
Twitter社が提供するRWD構築のためのフレームワーク
とは
MITライセンス、商用利用も可能
が注目される理由
その１
スマートデバイスの急速な普及
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千万台
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が、パソコンとタブレットの
出荷台数を上回った
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.5％
ITが手元にある時代に
情報：NBC NEWS
http://photoblog.nbcnews.com/_news/2013/03/14/17312316-witnessing-papal-history-changes-with
2005年
情報：NBC NEWS
http://photoblog.nbcnews.com/_news/2013/03/14/17312316-witnessing-papal-history-changes-with
2013年
to C サイトでは50%を越える
CPIサイトの場合(2014年3月)
PC : 75.3%
mobile : 22%
tablet : 2.7%
今後の制作は手元のITを強く意識して
制作をしなくてはいけない
スマートデバイス向けサイトが必要
11,868
2013年6月のデータ
RWDサイトが必要
その２
●さくっと構築できる
●なんとなくお洒落になる
●情報量が多い
番外編
●オレオレで構築し丸投げ・・・
●え、なんか崩れ (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.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>
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>
<div class="col-md-3 col-md-pull-9 c2”>2番目のカラム</div>
</div>
( push )右に移動
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>
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>
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)
Navbar
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;
});
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 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;
}
/* 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) { … }
細かい微調整
画像と文字を分離することで、どの画面サイズでも文字を読みやすくしている
Image Class
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; }
}}
画面幅いっぱいに画像
参考サイト：http://www.thinslices.com
画面幅いっぱいに画像
参照：http://shared-blog.kddi-web.com/activity/202
さいごに
ビジネスの本質に注力できる
Webで設けてなんぼ
工数が減ると
● BootstrapはRWDのフレームワーク
● 工数を削減、メンテがラク
Bootstrap以外にも
工数を削減するプロダクトがある
今後の制作者は
SVG
Canvas
Web Storage
GeolocationWeb Workers
Node.js
今後の制作者は
SVG
Canvas
Web Storage
GeolocationWeb Workers
Node.js
全てを使える必要は無いが
どんなことができるかは知っておく必要がある
さまざまなプロダクトを知り
新しい価値の創造や、Webの本質に
このようなサイトをチェックしていると良いかも
ご清聴ありがとうございました
ID：chiyo.abe
阿部 正幸
