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.

Twitter bootstrap intro

17,637 views

Published on

introduction twitter bootstrap

Published in: Technology

Twitter bootstrap intro

  1. 1. 朝から晩までサービス開発してるお前に贈るTwitter Bootstrap 入門 ダエ サン いジ   ニ ア  は
  2. 2. お前のデザインはダサい今日覚えること CSSフレームワークは便利 デザインはデザイナーに任せろ
  3. 3. 1 お前のデザインはダサい あります
  4. 4. エンサイ ジニ トデ アが ザイ 作る ンは フォ 徹底 ーム 的 にダ や サい !
  5. 5. プログラミングでの デザインでの お前ら お前ら
  6. 6. エンジニア「見た目とかどうでもいいでしょ」
  7. 7. エンジニア「見た目とかどうでもいいでしょ」
  8. 8. こコなだlらわドるのなイ ン デ ン ト も
  9. 9. ということで、Twitter Bootstrap使いましょうね
  10. 10. 2 CSSフレームワークは便利 聞け
  11. 11. Q. Twitter Bootstrapって何ですか? (都内 エンジニア 36歳)
  12. 12. A. CSSフレームワークです
  13. 13. CSSフレームワークとは link要素で読み込むだけで、 主要な要素や汎用クラスの デザインが適用される便利CSS 導入前 導入後
  14. 14. Twitter Bootstrap以外にもいろいろ 多すぎて話にならんので省略 以下参考 http://devsnippets.com/article/complete-guide-to-css-frameworks.html
  15. 15. 大体以下の3種で区分できます bootstrapはこのタイプ Normalize Layout Rich reset.css的な Gridレイアウトや インポートした瞬間からブラウザ間の差異を減らす カラムデザインなんかを タブやらナビゲーションやら タイプ 提供するタイプ 使えるようになるタイプ JQueryなんかのプラグインが ついてくることもある
  16. 16. ようするに
  17. 17. ようするに
  18. 18. 実際の使い方を私は詳細に解説すること ができるがここには余白が足りない
  19. 19. 使い方は公式サイトのサンプルを見ながら 少しづつ覚えていけばよいです
  20. 20. 3デザインはデザイナーに任せろ 任せてください
  21. 21. Twitter Bootstrap 流行ってます
  22. 22. = どこもかしこも似たようなデザイン TwitterBootstrapの流行に梨花ちゃまもご満悦!
  23. 23. Bootstrap使っただけじゃ陳腐な時代デザインはちゃんとデザイナーさんに依頼しよう!でもその結合前やプロトタイプを手早くするために CSSフレームワークを活用しよう!
  24. 24. TwitterBootstrapを使うとデザイナーさんはこれが嬉しい 3つのポイント
  25. 25. TwitterBootstrapを使うとデザイナーさんはこれが嬉しい 3つのポイント
  26. 26. TwitterBootstrapを使うとデザイナーさんはこれが嬉しい 3つのポイント まだです
  27. 27. TwBsにあわせて書かれたHTMLはCSSが書き足しやすいちょっとvalidじゃないくらいで ゴタゴタ抜かすな!
  28. 28. ボタンや要素の意味がclass名でわかる やたら難解なクラス名には もう突っ込む気も起きないし挙句の果てには長すぎてスペルミスとか(笑)
  29. 29. とりあえず適当に使っておけば そこそこなデザインになる デザインしないのにユーザービリティとか 笑わすな
  30. 30. デザイナーさんも大喜び!TwitterBootstrapを使ったことでにこやかに依頼を受けてくれるデザイナーさんの図
  31. 31. デザイナーさんも大喜び!TwitterBootstrapを使ったことでにこやかに依頼を受けてくれるデザイナーさんの図
  32. 32. まとめ
  33. 33. TwitterBootstrapで楽々Prototypingプロダクションのデザインはデザイナーさんへ 画像レスは楽しい
  34. 34. Enjoy Prototyping!http://twitter.github.com/bootstrap
  35. 35. Twitter Bootstrap 入門Sho Kusano <@rosylilly>
  36. 36. 巻末付録 スライド内で使われているレス画像はこのへんのものです http://simapantu.blog130.fc2.com/blog-entry-140.html http://matome.naver.jp/odai/2128376158890741601 http://mudainodqnment.blog35.fc2.com/blog-entry-1342.html

×