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