モダンでオサレなwebサイト
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

モダンでオサレなwebサイト

on

  • 2,864 views

webサービスのデザインをbootstrapを使って楽しようというお話です。

webサービスのデザインをbootstrapを使って楽しようというお話です。

Statistics

Views

Total Views
2,864
Views on SlideShare
2,400
Embed Views
464

Actions

Likes
2
Downloads
7
Comments
0

2 Embeds 464

http://perl.no-tubo.net 462
http://webcache.googleusercontent.com 2

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 変数は @ 演算のサンプル 後々修正するときに便利ではないか?

モダンでオサレなwebサイト Presentation Transcript

  • 1. モダンでオサレな web サイト @clicktx 2012.3.3 Gunma.web #8
  • 2. Profilo
    • Nome :すぎむら むねのり
    • Twitter: @clicktx
    • Lingua: Perl
    • Laboro: 普段は鉄を売ってます
  • 3. Web サイトのデザイン 今回のテーマ
  • 4. デザイナーの仕事だな ( ゚ Д ゚ )y-~~
  • 5. Web サービス 一人で全部作る
  • 6. 苦労すること
    • レイアウトがうまくいかない
    • 統一感がない
    • ボタンとかの画像作るのめんどい
    • IE めェ…
    • etc…
  • 7. 楽したい なんかいい方法ない?
  • 8. Bootstrap ブートストラップ Web アプリケーション開発のための CSS フレームワーク
  • 9.  
  • 10. Bootstrap, from Twitter
    • もともとは 社内利用を目的に開発していたもの
    • 2011 年 8 月に OSS として公開
    • 2012 年 1 月 2.0 にメジャーバージョンアップ
    • 現在のバージョンは 2.0.1
    • スマートフォン・タブレット対応
    • github で開発
    • ライセンスは Apache License 2.0
  • 11. 知ったキッカケ
    • Amon2 という Perl の WAF で使われていた。
    • デモの Hello World がインパクト大きかった
  • 12. ちなみに Amon2
    • http: //amon .64p.org/
  • 13. 肉食系 WAF です
  • 14. 使い方
  • 15. CSS を読み込む
    • <head> 内にスタイルシートのパスを書くだけ
    <link href= &quot;./css/bootstrap.css&quot; rel= &quot;stylesheet&quot; > <link href= &quot;./css/bootstrap-responsive.css&quot; rel= &quot;stylesheet&quot; >
  • 16. 主な機能
  • 17. ナビゲーション
  • 18. ボタン
  • 19. グリッドシステム
  • 20. グリッドシステム
    • 余白とか
    • 幅とか
    • バランスとか
    気にしないでレイアウト出来るよ!
  • 21. グリッドシステム
    • こんな感じ
  • 22. まじ感謝
  • 23. 他にもかゆいところに手が届くものがたくさん! Pagination Alerts Forms and mode…
  • 24. デフォルトの CSS だけでも いい感じに仕上がります。
  • 25. パッとしないデザイン -> おしゃれに
  • 26. Before -> After 参考: http: //blog . esuteru .com/archives/5677048.html
  • 27. リッチな UI
  • 28. JavaScript for Bootstrap
    • カスタム jQuery plugin のコンポーネントが豊富に用意されています。
    • クローズできるアラート、ツールチップ、スライドショー等リッチな UI を作りたい時に便利。
  • 29. モダンな CSS
  • 30. LESS with Bootstrap
    • JS で書かれた CSS メタ言語「 LESS 」を使うことができます。
    • CSS で変数、ミックスイン、入れ子ルール、名前空間、四則演算と関数などが使えるようになります。
    http: //lesscss .org/
  • 31. LESS The dynamic stylesheet language
  • 32. 欠点 似通ったデザインになってしまう
  • 33. でもいろいろな サービス あるよ
  • 34. 様々なテーマ
  • 35. カラースキーム
  • 36. Bootstrap on Rails
  • 37. Twitter Bootstarp Rails
    • http: //ppworks . hatenablog .jp/entry/2012/02/19/033644
  • 38. 注目!
  • 39. 職が見つかったり、彼女ができたり、背が伸びたり!!
  • 40. すごい効果
  • 41. 就活・婚活 に Bootstrap from Twitter を 使ってみて下さい!!
  • 42. まとめ
    • 簡単。 CSS 読み込むだけ。
    • グリッドシステム画期的。
    • デザイン諸々一通り揃ってる。
    • ドキュメント充実。
    • jQuery でよりリッチに。
    • LESS でよりモダンに。
    • リア充になれる。
  • 43. ご清聴ありがとうございました