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

3,045 views

Published on

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

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,045
On SlideShare
0
From Embeds
0
Number of Embeds
539
Actions
Shares
0
Downloads
9
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • 変数は @ 演算のサンプル 後々修正するときに便利ではないか?
  • モダンでオサレなwebサイト

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

    ×