Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Bootstrap

13,506 views

Published on

201409 ゼロから始めるWordPress勉強会
「Sass+Bootstrap+_sでテーマを作ろう」の中で使用したBootstrapについてのスライドです。

http://zerokarawp.com/
http://coedo-wordpress.doorkeeper.jp/events/14849

Published in: Design
  • Be the first to comment

Bootstrap

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

×