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.

Boot strap3 勉強会

619 views

Published on

Boostrap勉強会

Published in: Technology
  • Be the first to comment

Boot strap3 勉強会

  1. 1. BootStrap3 勉強会 1
  2. 2. はじめに 2
  3. 3. BootStrapとは Twitter社製CSSフレームワーク 3
  4. 4. 4 CSSフレームワークって そもそも何よ?
  5. 5. つまり 5
  6. 6. こういうのとか 6
  7. 7. こういうのとか 7
  8. 8. こういうのとか 8
  9. 9. 9 楽できる要素が たくさん入っている ツール郡
  10. 10. 10 素敵!
  11. 11. 11 ただし
  12. 12. 12
  13. 13. 正しく使わないと・・・ 13
  14. 14. 前 提 Bootstrap3を使うことを 前提とします 14
  15. 15. 15 Bootstrapの基本 Bootstrap3の特徴 対応ブラウザについて 事例紹介 Bootstrapの始め方と注意点 インストール方法 基本テンプレート 基本的な使い方 Class名の命名規則について Bootstrapの機能 グリッドシステム アイコンフォント font-awesomeの使い方 基本コンポーネント説明 BootstrapのQA 質疑応答
  16. 16. 16 Bootstrapの基本 Bootstrap3の特徴 対応ブラウザについて 事例紹介 Bootstrapの始め方と注意点 インストール方法 基本テンプレート 基本的な使い方 Class名の命名規則について Bootstrapの機能 グリッドシステム アイコンフォント font-awesomeの使い方 基本コンポーネント説明 BootstrapのQA 質疑応答
  17. 17. BootStrapの基本 17
  18. 18. Bootstrap3の特徴 18 ・モバイルファースト ・レスポンシブルWebデザイン全面採用 ・フラットデザイン
  19. 19. モバイルファースト(カルーセル) 19
  20. 20. モバイルファースト(Form) 20
  21. 21. Bootstrap3の特徴 21 ・モバイルファースト ・レスポンシブルWebデザイン全面採用 ・フラットデザイン ・アイコンフォント採用
  22. 22. フラットデザイン 22
  23. 23. Bootstrap3の特徴 23 ・モバイルファースト ・レスポンシブルWebデザイン全面採用 ・フラットデザイン ・アイコンフォント採用
  24. 24. アイコンフォント採用 24 →Font Awesomeを使えば、更に拡張可能!
  25. 25. 対応ブラウザ 25 IE7・Firefox3.6非対応! ※IE8に対応する場合はRespond.jsとhtml5shiv. jsが必要(HTML5、CSS3 Media QueriesをIE8で有効にできる)
  26. 26. 事例紹介 26 http://online.actus-interior.com/ http://www.newsweek.com/ その他多数…
  27. 27. 27 Bootstrapの基本 Bootstrap3の特徴 対応ブラウザについて 事例紹介 Bootstrapの始め方と注意点 インストール方法 基本テンプレート 基本的な使い方 Class名の命名規則について Bootstrapの機能 グリッドシステム アイコンフォント font-awesomeの使い方 基本コンポーネント説明 BootstrapのQA 質疑応答
  28. 28. Bootstrapの始め方と注意点 28
  29. 29. インストール方法 29 http://getbootstrap.com/
  30. 30. インストール方法 30
  31. 31. インストール方法 31 Bootstrap CSS本体(非圧縮) Bootstrap CSS本体(圧縮) Bootstrap CSSテーマ本体(非圧縮) Bootstrap CSSテーマ本体(圧縮) Bootstrap JS本体(非圧縮) Bootstrap JS本体(圧縮) フォントアイコン集
  32. 32. インストール方法 32 Bootstrap CSS本体(非圧縮) Bootstrap CSS本体(圧縮) Bootstrap CSSテーマ本体(非圧縮) Bootstrap CSSテーマ本体(圧縮) Bootstrap JS本体(非圧縮) Bootstrap JS本体(圧縮) フォントアイコン集
  33. 33. インストール方法 33 <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> CDN使って導入することもできます
  34. 34. Bootstrapの基本テンプレート 34 別画面にて
  35. 35. 基本的な使い方 35 ・各機能単位のclassがある ・そのclassを付与することでデザインを実現する ・機能のclassは複数付与することが可能
  36. 36. Class名の命名規則について 36 ・Bootstrapの命名規則は「OOCSS」が基本 ・ワードの区切りは「-」で統一 ・複数のclassで機能を作り上げる →OOCSSとは「Object Oriented CSS」の略
  37. 37. CSSの基本構造 37 例)<p class=“btn btn-primary”>ボタン</p> .btn { ~ボタンの共通CSS~ } .btn-primary { color: #fff; background-color: #337ab7; border-color: #2e6da4 }
  38. 38. 38 Bootstrapの基本 Bootstrap3の特徴 対応ブラウザについて 事例紹介 Bootstrapの始め方と注意点 インストール方法 基本テンプレート 基本的な使い方 Class名の命名規則について Bootstrapの機能 グリッドシステム アイコンフォント font-awesomeの使い方 基本コンポーネント説明 BootstrapのQA 質疑応答
  39. 39. Bootstrapの機能 39
  40. 40. こういうのとか 40
  41. 41. こういうのとか 41
  42. 42. こういうのとか 42
  43. 43. グリッドシステム(基本) ・ページ全体を12分割する ・12列に足りない場合は、空白ができる ・12列を超える場合は、下に行に落ちる ・container/container-fluid > row > col-**-*の仕組みでコーディングしないといけない ・固定幅はcontainer、可動幅はcontainer-fluidを使う ・グリッドの入れ子もできる ・containerの幅は940px 43
  44. 44. グリッドシステム(基本) 44
  45. 45. グリッドシステム(基本) 45
  46. 46. 46 とりあえずやってみよう
  47. 47. グリッドシステム(応用) ・ブロックの左右ずらしをすることも可能 ・ブロックの順番を入れ替えることもできる(レスポンシブル対応) 47
  48. 48. 48 やってみよう
  49. 49. グリッドシステム(レスポンシブル) ・画面幅サイズ毎に設定を変えることができる ・画面幅に応じて表示・非表示を切り分けることができる ・col-xs~は最終的に適用されるclassなので、記載しておいた方がよい 49
  50. 50. グリッドシステムの優先度 50 画面幅 0px~768px 769px~991px 992px~1199px 1200px class col-lg-N - - - 1 col-md-N - - 1 2 col-sm-N - 1 2 3 col-xs-N 1 2 3 4
  51. 51. グリッドシステム(印刷) ・印刷時に要素を消すことができる(hidden-print) ・bootstrap標準では背景が消されている ・印刷時のみ、ブロック要素・インライン要素を切り替えるclassがある 51
  52. 52. アイコンフォントの使い方 ・標準で入っているアイコンは以下の通り http://getbootstrap.com/components/ ・空タグにclassを設定するだけ ・スクリーンリーダー向けに「aria-hidden=“true”」を入れておく 52
  53. 53. Font-Awesomeの使い方 CSSを読み込むだけ! <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font- awesome/4.3.0/css/font-awesome.min.css"> 53 書き方 <span class=“fa fa-twitter”></span>
  54. 54. 基本コンポーネント ここ見たらだいたい分かる http://www.wivern.com/bootstrap/components.html 54
  55. 55. 今後の展望的な話 ・レスポンシブ対応が増えるのは間違いないので、グリッド システムだけでも導入するべきではないか ・CSS設計概念としてはキレイので、bootstrapのthemeを作成 することでコーディングをするのは不可能か ・BootstrapからSassやLessなどのタスクランナー導入を進め ることはできないか 55
  56. 56. 56 質疑応答

×