201409 ゼロから始めるWordPress勉強会 「Sass+Bootstrap+_sでテーマを作ろう」の中で使用したBootstrapについてのスライドです。 http://zerokarawp.com/ http://coedo-wordpress.doorkeeper.jp/events/14849

1. 第14回ゼロから始めるWordPress勉強会
「Sass+Bootstrap+_sでテーマを作ろう」
Bootstrap
2014.9.17
よつばデザイン 後藤賢司

2. 後藤賢司
よつばデザイン代表。東京と大分の2拠点で活動中。
Webサイトの企画・設計・デザイン。
メディアサイトやBGM販売サイトなどを運営。
CPIエバンジェリスト。
「プロが選ぶ WordPress優良プラグイン事典 」
「現場でかならず使われているWordPressデザインのメソッド 」

3. Bootstrap
フロントエンドフレームワーク（HTML、CSS、javascript ）
http://getbootstrap.com/

4. Bootstrap
2011年08月
Twitter Bootstrapとしてスタート。
2.0からレスポンシブデザインに対応。
現在バージョンは3.2。

5. Bootstrapの特徴
マルチデバイスに対応。様々なデバイスを想定した設計。
安定して表示してくれるのでオレオレでCSS書くより安全。
グリッド機能やコンポーネントを理解するととても便利。
共通言語として使えるので、チーム間や外部との連携も取りやすいし、
リニューアルの際などの構造も把握しやすい（かもしれない）。

6. 使えるものを使って
スピード感のある構築が可能。

7. Bootstrapへの誤解

8. Bootstrapのサイト

9. 「Bootstrapで作ったら
全部一緒に見えるよね」

10. 「Bootstrapで作ったら
全部一緒に見えるよね」×

11. かつてはそう思っていましたが、
そんな事はありません。

12. Bootstrap事例サイト
http://expo.getbootstrap.com/
http://lovebootstrap.com/

13. Delicious
https://delicious.com/

14. Dole
!
http://www.dole.com/

15. intel.co.uk
!
http://www.intel.co.uk/content/
www/uk/en/homepage.html

16. Newsweek
!
http://www.newsweek.com/

17. たくさんあるので
あとは調べてみてください。

18. Bootstrapの主な機能

19. ドキュメントに掲載
【重要】ドキュメント読めば理解できる。

20. Dash
様々なドキュメント参照ツール。
Bootstrapのドキュメントを
読む機会は多いので導入を
オススメします。
有料版は起動時タイムラグが無い。
http://kapeli.com/dash

21. マルチデバイス対応

22. マルチデバイス対応

23. ディスプレイサイズに応じて4種類
～768px col-xs-*
768px～ col-sm-*
992px～ col-md-*
1200px～ col-lg-*
※lgは省略する事もある。

24. グリッド

25. rowとcontainer
containerはコンテンツ幅で中央に配置する
rowは横幅いっぱい。

26. rowとcontainer
グリッドを格納するclass
row
container
PCの場合
1170px
PCの場合
1140px
15px 15px

27. rowとconatinerはここで理解
http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-
3-grid-works

28. Gridの仕組み（良く見る図）
col-md-1
col-md-2
col-md-3
col-md-4
col-md-7
col-md-10
col-md-12

29. 12分の「？」で考える
グリッドは12分のいくつを使うかで考えるだけ。
例：メインを12分の8にして、サイドバーを12分の4にしよう。
<div class=“col-md-8”></div>
<div class=“col-md-4”></div>

30. グリッドと余白
グリッドの余白を把握する
15px
30px

31. カラム数を画面サイズ毎に切り替える
Gridを使うと、PCの場合、タブレットの場合、スマホの場合、小さいス
マホの場合と分けられる。
下記の場合はタブレット以上のサイズのディスプレイでの指定
1カラム分5カラム分
col-md-1 col-md-5

32. CSSの記述
タブレットサイズ以上は4カラム、スマホより小さいサイズは6カラム、
一番小さいサイズは12カラム（全幅）
<div class=“col-md-4 col-sm-6 col-xs-12”>コンテンツ</
div>
PC、タブレットスマホ小画面
col-md-4 col-sm-6 col-xs-12

33. ドキュメントに掲載
コラム間のマージンは表示されてないので注意。

34. offsetを覚える

35. offsetを覚える
col-md-offset-4で
4カラム分空ける

36. offsetを覚える
col-md-offset-4で
4カラム分空ける
col-md-offset-3で
3カラム分空ける
col-md-offset-3で
3カラム分空ける
col-md-offset-3で
3カラム分空ける

37. offset使用例
<div class="
col-md-8 col-md-offset-2">
赤い点線が
containerサイズ

38. pushとpull
位置の入れ替えが可能

39. 特定の画面サイズで表示・非表示

40. visible-*-block
xsサイズの時に
clearfixのブロックを
イキにする

41. xsサイズの時に
clearfixのブロックを
イキにする

42. 画像の装飾
Classを付けるだけ。四角い画像を
img-circleで
丸く見せてる例

43. その他豊富な機能
カルーセル、アコーディオン、モーダル、ツールチップ、アコーディ
オン、ボタン…。ドキュメント参照して好きに使いましょう。

44. CSSは結構用意されている

45. テキスト寄せ
.text-center text-align : center; 中央合わせ
.text-left text-align : left; 左寄せ
.text-right text-align : right; 右寄せ

46. フロート
.pull-left ＝ float : left ;
.pull-right = float : right ;

47. ヘッダー

48. レスポンシブなtable
classあてるだけでスマホ時は横スクロール型に。

49. ドキュメントに掲載
【重要】ドキュメント読めば理解できる。

50. ドキュメント大事

51. 関連書籍
「UIまで手の回らないプログラマのためのBootstrap 3実用ガイド」
様々な機能について詳しく解説されてます。
電子書籍版もあり。

52. 自分用にカスタマイズ

53. 追記するCSSとか

54. モバイル時だけ配置変更
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;}
}

55. 要素がはみだすのを防ぐ
*{
@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;
}

56. 要素がはみだすのを防ぐ
img {
max-width: 100% !important;
height: auto;
}
embed, iframe, canvas, video, svg, input, text area ,button ,select {
max-width: 100%;
}

57. アイコンの種類が
もう少し欲しい

58. FontAwesome
種類が多く使いやすい。
http://
fortawesome.github.io/
Font-Awesome/

59. 1600+ iOS7 Vector Icons
ラインの細いアイコンフォント。シャープなイメージが欲しい時やス
マホサイト用に。$69～
http://www.streamlineicons.com/

60. デフォルトの装飾
もう少しアレンジしたい

61. 装飾要素をカスタマイズ
ズルいシリーズがとても参考になります（Sassの活用）
https://speakerdeck.com/ken_c_lo

62. カラム数増やしたい

63. Sassでカラム数を24に変更する
bootstrap/_variables.scss
http://yotsuba-d.com/blog/post-6131/

64. Sassで余白の幅を変更する
bootstrap/_variables.scss
http://yotsuba-d.com/blog/post-6131/
余白はここ

65. ナビゲーション変えたい

66. オフキャンバスメニュー
横からしゅっと出るメニュー、たくさんあるのでお好きなものを。
http://www.berriart.com/sidr/

67. 動きつけたい

68. Animate.css
CSSアニメーションのセット。
http://daneden.github.io/animate.css/

69. 良い感じの写真欲しい

70. The Stocks
著作権フリーの写真サイト
UNSPLASH・LITTLE VISUALS
NEW OLD STOCK・SUPER FAMOUS
GRATISOGRAPHY・GETREFE
JAY MANTRI・MAGDELINE
BREAKING PIC・TRAVEL COFFEE
http://thestocks.im/

71. 設計のお話

72. アプリやサービスを利用して
土台をさっと作る

73. Blocks
コンポーネント単位でページを作
成。
http://www.mightydeals.com/
deal/blocks.html?
fid=77e283db
http://demo.bootstraptor.com/
blocks.html

74. Briqs
BootstrapベースでHTMLを作成。
これをベースにして
作り込んでいくのもアリ。

75. コンポーネント（かたまり）で
構成していくイメージ。

76. まとめ
Bootstrapで完結する必要はない。
ベースとして使う事で制作スピード
と安定性を手に入れる。

77. ありがとうございました
FacebookページやWebサイトもぜひご覧ください。
ゼロから始めるWordPress勉強会（Facebookページ）
ゼロから始めるWordPress勉強会（Webサイト）
よつばデザイン（ブログ）