bootstrap
DESCRIPTION
201409 ゼロから始めるWordPress勉強会 「Sass+Bootstrap+_sでテーマを作ろう」の中で使用したBootstrapについてのスライドです。 http://zerokarawp.com/ http://coedo-wordpress.doorkeeper.jp/events/14849TRANSCRIPT
第14回ゼロから始めるWordPress勉強会 「Sass+Bootstrap+_sでテーマを作ろう」
Bootstrap
2014.9.17 よつばデザイン 後藤賢司
後藤賢司よつばデザイン代表。東京と大分の2拠点で活動中。
Webサイトの企画・設計・デザイン。
メディアサイトやBGM販売サイトなどを運営。
CPIエバンジェリスト。
「プロが選ぶ WordPress優良プラグイン事典 」
「現場でかならず使われているWordPressデザインのメソッド 」
Bootstrap
2011年08月 Twitter Bootstrapとしてスタート。 2.0からレスポンシブデザインに対応。 現在バージョンは3.2。
Bootstrapの特徴マルチデバイスに対応。様々なデバイスを想定した設計。
安定して表示してくれるのでオレオレでCSS書くより安全。
グリッド機能やコンポーネントを理解するととても便利。
共通言語として使えるので、チーム間や外部との連携も取りやすいし、
リニューアルの際などの構造も把握しやすい（かもしれない）。
使えるものを使って
スピード感のある構築が可能。
Bootstrapへの誤解
Bootstrapのサイト
「Bootstrapで作ったら
全部一緒に見えるよね」
「Bootstrapで作ったら
全部一緒に見えるよね」×
かつてはそう思っていましたが、
そんな事はありません。
Bootstrap事例サイトhttp://expo.getbootstrap.com/
http://lovebootstrap.com/
intel.co.uk!
http://www.intel.co.uk/content/
www/uk/en/homepage.html
たくさんあるので
あとは調べてみてください。
Bootstrapの主な機能
ドキュメントに掲載【重要】ドキュメント読めば理解できる。
Dash様々なドキュメント参照ツール。
Bootstrapのドキュメントを
読む機会は多いので導入を
オススメします。
有料版は起動時タイムラグが無い。
http://kapeli.com/dash
マルチデバイス対応
マルチデバイス対応
ディスプレイサイズに応じて4種類～768px col-xs-*
768px～ col-sm-*
992px～ col-md-*
1200px～ col-lg-*
※lgは省略する事もある。
グリッド
rowとcontainercontainerはコンテンツ幅で中央に配置する
rowは横幅いっぱい。
rowとcontainerグリッドを格納するclass
row
container
PCの場合 1170px
PCの場合 1140px
15px 15px
rowとconatinerはここで理解http://www.helloerik.com/the-subtle-magic-behind-why-the-
bootstrap-3-grid-works
Gridの仕組み（良く見る図）col-md-1
col-md-2
col-md-3
col-md-4
col-md-7
col-md-10
col-md-12
12分の「？」で考えるグリッドは12分のいくつを使うかで考えるだけ。
例：メインを12分の8にして、サイドバーを12分の4にしよう。
<div class=“col-md-8”></div>
<div class=“col-md-4”></div>
グリッドと余白グリッドの余白を把握する
15px
30px
カラム数を画面サイズ毎に切り替えるGridを使うと、PCの場合、タブレットの場合、スマホの場合、小さいスマホの場合と分けられる。 下記の場合はタブレット以上のサイズのディスプレイでの指定
col-md-1 col-md-5
5カラム分1カラム分
CSSの記述タブレットサイズ以上は4カラム、スマホより小さいサイズは6カラム、
一番小さいサイズは12カラム（全幅）
<div class=“col-md-4 col-sm-6 col-xs-12”>コンテンツ</
div>
col-md-4 col-sm-6 col-xs-12
PC、タブレット スマホ 小画面
ドキュメントに掲載コラム間のマージンは表示されてないので注意。
offsetを覚える
offsetを覚えるcol-md-offset-4で 4カラム分空ける
offsetを覚えるcol-md-offset-4で 4カラム分空ける
col-md-offset-3で 3カラム分空ける
col-md-offset-3で 3カラム分空けるcol-md-offset-3で 3カラム分空ける
<div class="
col-md-8 col-md-offset-2">
offset使用例
赤い点線が containerサイズ
pushとpull位置の入れ替えが可能
特定の画面サイズで表示・非表示
visible-*-block
xsサイズの時に clearfixのブロックを
イキにする
xsサイズの時に clearfixのブロックを
イキにする
画像の装飾Classを付けるだけ。 四角い画像を
img-circleで丸く見せてる例
その他豊富な機能カルーセル、アコーディオン、モーダル、ツールチップ、アコーディ
オン、ボタン…。ドキュメント参照して好きに使いましょう。
CSSは結構用意されている
テキスト寄せ.text-center text-align : center; 中央合わせ
.text-left text-align : left; 左寄せ
.text-right text-align : right; 右寄せ
フロート.pull-left ＝ float : left ;
.pull-right = float : right ;
ヘッダー
レスポンシブなtableclassあてるだけでスマホ時は横スクロール型に。
ドキュメントに掲載【重要】ドキュメント読めば理解できる。
ドキュメント大事
関連書籍「UIまで手の回らないプログラマのためのBootstrap 3実用ガイド」
様々な機能について詳しく解説されてます。
電子書籍版もあり。
自分用にカスタマイズ
追記するCSSとか
モバイル時だけ配置変更PC画面などでセンター合わせのテキストとかを使った場合、モバイルのみ左よせにするなど。
@media only screen and (max-width: 768px){
.mob-text-center {text-align: center !important;}
.mob-text-left {text-align: left !important;}
.mob-text-right {text-align: right !important;}
}
要素がはみだすのを防ぐ*{
@include box-sizing(border-box);
}
※上記はcompass用、compass使ってない人は下記を使用してください。
*{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
}
要素がはみだすのを防ぐimg {
max-width: 100% !important;
height: auto;
}
embed, iframe, canvas, video, svg, input, text area ,button ,select {
max-width: 100%;
}
アイコンの種類が
もう少し欲しい
FontAwesome種類が多く使いやすい。
http://
fortawesome.github.io/
Font-Awesome/
1600+ iOS7 Vector Iconsラインの細いアイコンフォント。シャープなイメージが欲しい時やス
マホサイト用に。$69～
http://www.streamlineicons.com/
デフォルトの装飾
もう少しアレンジしたい
装飾要素をカスタマイズズルいシリーズがとても参考になります（Sassの活用）
https://speakerdeck.com/ken_c_lo
カラム数増やしたい
Sassでカラム数を24に変更するbootstrap/_variables.scss
http://yotsuba-d.com/blog/post-6131/
Sassで余白の幅を変更するbootstrap/_variables.scss
http://yotsuba-d.com/blog/post-6131/
余白はここ
ナビゲーション変えたい
オフキャンバスメニュー横からしゅっと出るメニュー、たくさんあるのでお好きなものを。
http://www.berriart.com/sidr/
動きつけたい
Animate.cssCSSアニメーションのセット。
http://daneden.github.io/animate.css/
良い感じの写真欲しい
The Stocks著作権フリーの写真サイトUNSPLASH・LITTLE VISUALS
NEW OLD STOCK・SUPER FAMOUS
GRATISOGRAPHY・GETREFE
JAY MANTRI・MAGDELINE
BREAKING PIC・TRAVEL COFFEE
http://thestocks.im/
設計のお話
アプリやサービスを利用して
土台をさっと作る
Blocksコンポーネント単位でページを作
成。
http://www.mightydeals.com/
deal/blocks.html?
fid=77e283db
http://demo.bootstraptor.com/
blocks.html
BriqsBootstrapベースでHTMLを作成。
これをベースにして
作り込んでいくのもアリ。
コンポーネント（かたまり）で
構成していくイメージ。
まとめ
Bootstrapで完結する必要はない。
ベースとして使う事で制作スピード
と安定性を手に入れる。
ありがとうございましたFacebookページやWebサイトもぜひご覧ください。
ゼロから始めるWordPress勉強会（Facebookページ）
ゼロから始めるWordPress勉強会（Webサイト）
よつばデザイン（ブログ）