朝から晩までサービス開発してるお前に贈る

Twitter Bootstrap 入門

ダエサンいジ　　　　ニア　は

今日覚えることお前のデザインはダサいCSSフレームワークは便利デザインはデザイナーに任せろ

1 お前のデザインはダサいあります

エンジニアが作るフォームや

サイトデザインは徹底的にダサい！

プログラミングでのお前ら

デザインでのお前ら

エンジニア「見た目とかどうでもいいでしょ」

エンジニア「見た目とかどうでもいいでしょ」

こコなだｌらわドるのなイ　ン　デ　ン　ト　も

ということで、Twitter Bootstrap使いましょうね

2CSSフレームワークは便利

聞け

Q. Twitter Bootstrapって何ですか？(都内 エンジニア 36歳)

A. CSSフレームワークです

CSSフレームワークとは

link要素で読み込むだけで、主要な要素や汎用クラスの

デザインが適用される便利CSS

導入前 導入後

Twitter Bootstrap以外にもいろいろ

多すぎて話にならんので省略 以下参考http://devsnippets.com/article/complete-guide-to-css-frameworks.html

Normalize Layout Rich

大体以下の3種で区分できます

reset.css的なブラウザ間の差異を減らす

タイプ

Gridレイアウトやカラムデザインなんかを提供するタイプ

インポートした瞬間からタブやらナビゲーションやら使えるようになるタイプ

JQueryなんかのプラグインがついてくることもある

bootstrapはこのタイプ

ようするに

ようするに

実際の使い方を私は詳細に解説することができるがここには余白が足りない

使い方は公式サイトのサンプルを見ながら少しづつ覚えていけばよいです

3デザインはデザイナーに任せろ任せてください

Twitter Bootstrap 流行ってます

= どこもかしこも似たようなデザイン

TwitterBootstrapの流行に梨花ちゃまもご満悦！

Bootstrap使っただけじゃ陳腐な時代デザインはちゃんとデザイナーさんに依頼しよう！でもその結合前やプロトタイプを手早くするために

CSSフレームワークを活用しよう！

TwitterBootstrapを使うとデザイナーさんはこれが嬉しい

３つのポイント

TwitterBootstrapを使うとデザイナーさんはこれが嬉しい

３つのポイント

TwitterBootstrapを使うとデザイナーさんはこれが嬉しい

３つのポイント

まだです

TwBsにあわせて書かれたHTMLはCSSが書き足しやすい

ちょっとvalidじゃないくらいでゴタゴタ抜かすな！

ボタンや要素の意味がclass名でわかる

やたら難解なクラス名にはもう突っ込む気も起きないし

挙句の果てには長すぎてスペルミスとか(笑)

とりあえず適当に使っておけばそこそこなデザインになる

デザインしないのにユーザービリティとか

笑わすな

デザイナーさんも大喜び！

TwitterBootstrapを使ったことでにこやかに依頼を受けてくれるデザイナーさんの図

デザイナーさんも大喜び！

TwitterBootstrapを使ったことでにこやかに依頼を受けてくれるデザイナーさんの図

まとめ

TwitterBootstrapで楽々Prototypingプロダクションのデザインはデザイナーさんへ

画像レスは楽しい

Enjoy Prototyping!

http://twitter.github.com/bootstrap

Twitter Bootstrap 入門Sho Kusano <@rosylilly>

巻末付録

スライド内で使われているレス画像はこのへんのものですhttp://simapantu.blog130.fc2.com/blog-entry-140.htmlhttp://matome.naver.jp/odai/2128376158890741601http://mudainodqnment.blog35.fc2.com/blog-entry-1342.html