Enviar búsqueda
Cargar
Boot strap3 勉強会
•
Descargar como PPTX, PDF
•
2 recomendaciones
•
831 vistas
Daisuke Onoe
Seguir
Boostrap勉強会
Leer menos
Leer más
Tecnología
Denunciar
Compartir
Denunciar
Compartir
1 de 56
Descargar ahora
Recomendados
Django pgroonga
Django pgroonga
Atsuo Ishimoto
フレームワークビギナー勉強会
フレームワークビギナー勉強会
サトウハルミ
Bootstrapで蔵書管理システムUIを作る
Bootstrapで蔵書管理システムUIを作る
Nakaya Makoto
スマートフォン戦略から始まる新たなコミュニケーションデザイン
スマートフォン戦略から始まる新たなコミュニケーションデザイン
Yasuhisa Hasegawa
未来へ繋ぐWeb系デザイン思考
未来へ繋ぐWeb系デザイン思考
Yasuhisa Hasegawa
120225 bootstrap
120225 bootstrap
TechGardenSchool
2479
2479
schoowebcampus
芸術情報演習デザイン(Web) 第8回: CSSフレームワークを使う
芸術情報演習デザイン(Web) 第8回: CSSフレームワークを使う
Atsushi Tadokoro
Recomendados
Django pgroonga
Django pgroonga
Atsuo Ishimoto
フレームワークビギナー勉強会
フレームワークビギナー勉強会
サトウハルミ
Bootstrapで蔵書管理システムUIを作る
Bootstrapで蔵書管理システムUIを作る
Nakaya Makoto
スマートフォン戦略から始まる新たなコミュニケーションデザイン
スマートフォン戦略から始まる新たなコミュニケーションデザイン
Yasuhisa Hasegawa
未来へ繋ぐWeb系デザイン思考
未来へ繋ぐWeb系デザイン思考
Yasuhisa Hasegawa
120225 bootstrap
120225 bootstrap
TechGardenSchool
2479
2479
schoowebcampus
芸術情報演習デザイン(Web) 第8回: CSSフレームワークを使う
芸術情報演習デザイン(Web) 第8回: CSSフレームワークを使う
Atsushi Tadokoro
Dreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディング
Dreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディング
Mori Kazue
Blazor0.6.0を用いたスクリプトレスWebアプリ開発の可能性
Blazor0.6.0を用いたスクリプトレスWebアプリ開発の可能性
Yamamoto Reki
Bootstrapを使ってみよう
Bootstrapを使ってみよう
Kawaji Masaki
ASP.NET MVC で Bootstrap
ASP.NET MVC で Bootstrap
Yoshitaka Seo
Dioxy : How To Presentation [HTML/CSSワークショップ #1 / パンくずリストを作ろう]
Dioxy : How To Presentation [HTML/CSSワークショップ #1 / パンくずリストを作ろう]
dioxy
Bootstrap
Bootstrap
Jun Chiba
芸術情報演習デザイン(Web) 第8回: CSSフレームワークを使う Twitter Bootstrap
芸術情報演習デザイン(Web) 第8回: CSSフレームワークを使う Twitter Bootstrap
Atsushi Tadokoro
Janog31 bof-pattern-sasaki-01
Janog31 bof-pattern-sasaki-01
Ken SASAKI
あるマークアップエンジニアの初期制作時のテンプレ事情
あるマークアップエンジニアの初期制作時のテンプレ事情
Shingo Iwahori
Bootstrapを使用した画面設計 〜Bootstrapの基本(グリッドシステム・ブレークポイント)〜
Bootstrapを使用した画面設計 〜Bootstrapの基本(グリッドシステム・ブレークポイント)〜
iPride Co., Ltd.
続・Twitter bootstrap入門 #html5j
続・Twitter bootstrap入門 #html5j
Toshiaki Maki
HTML で自己紹介ページをつくる
HTML で自己紹介ページをつくる
Shuhei Iitsuka
情報編集(Web) 第8回: CSSフレームワークを使う Twitter Bootstrap
情報編集(Web) 第8回: CSSフレームワークを使う Twitter Bootstrap
Atsushi Tadokoro
Let's make quickly mock up by bootstrap.
Let's make quickly mock up by bootstrap.
matsuohideaki
Bootstrap s1
Bootstrap s1
Jun Chiba
フレームワークの良さを教えてやろう SAStruts + S2JDBC
フレームワークの良さを教えてやろう SAStruts + S2JDBC
Kazuma Kimura
Azure Machine Learningによるレコメンデーションの設計&実装を公開!~朝日カルチャーセンターの事例から~
Azure Machine Learningによるレコメンデーションの設計&実装を公開!~朝日カルチャーセンターの事例から~
貴志 上坂
Tableauのつまづきポイント
Tableauのつまづきポイント
Shinji Tamura
100614 構造方程式モデリング基本の「き」
100614 構造方程式モデリング基本の「き」
Shinohara Masahiro
Cranberries interval library 開発の話
Cranberries interval library 開発の話
Wada Yuki
Más contenido relacionado
Similar a Boot strap3 勉強会
Dreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディング
Dreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディング
Mori Kazue
Blazor0.6.0を用いたスクリプトレスWebアプリ開発の可能性
Blazor0.6.0を用いたスクリプトレスWebアプリ開発の可能性
Yamamoto Reki
Bootstrapを使ってみよう
Bootstrapを使ってみよう
Kawaji Masaki
ASP.NET MVC で Bootstrap
ASP.NET MVC で Bootstrap
Yoshitaka Seo
Dioxy : How To Presentation [HTML/CSSワークショップ #1 / パンくずリストを作ろう]
Dioxy : How To Presentation [HTML/CSSワークショップ #1 / パンくずリストを作ろう]
dioxy
Bootstrap
Bootstrap
Jun Chiba
芸術情報演習デザイン(Web) 第8回: CSSフレームワークを使う Twitter Bootstrap
芸術情報演習デザイン(Web) 第8回: CSSフレームワークを使う Twitter Bootstrap
Atsushi Tadokoro
Janog31 bof-pattern-sasaki-01
Janog31 bof-pattern-sasaki-01
Ken SASAKI
あるマークアップエンジニアの初期制作時のテンプレ事情
あるマークアップエンジニアの初期制作時のテンプレ事情
Shingo Iwahori
Bootstrapを使用した画面設計 〜Bootstrapの基本(グリッドシステム・ブレークポイント)〜
Bootstrapを使用した画面設計 〜Bootstrapの基本(グリッドシステム・ブレークポイント)〜
iPride Co., Ltd.
続・Twitter bootstrap入門 #html5j
続・Twitter bootstrap入門 #html5j
Toshiaki Maki
HTML で自己紹介ページをつくる
HTML で自己紹介ページをつくる
Shuhei Iitsuka
情報編集(Web) 第8回: CSSフレームワークを使う Twitter Bootstrap
情報編集(Web) 第8回: CSSフレームワークを使う Twitter Bootstrap
Atsushi Tadokoro
Let's make quickly mock up by bootstrap.
Let's make quickly mock up by bootstrap.
matsuohideaki
Bootstrap s1
Bootstrap s1
Jun Chiba
フレームワークの良さを教えてやろう SAStruts + S2JDBC
フレームワークの良さを教えてやろう SAStruts + S2JDBC
Kazuma Kimura
Azure Machine Learningによるレコメンデーションの設計&実装を公開!~朝日カルチャーセンターの事例から~
Azure Machine Learningによるレコメンデーションの設計&実装を公開!~朝日カルチャーセンターの事例から~
貴志 上坂
Tableauのつまづきポイント
Tableauのつまづきポイント
Shinji Tamura
100614 構造方程式モデリング基本の「き」
100614 構造方程式モデリング基本の「き」
Shinohara Masahiro
Cranberries interval library 開発の話
Cranberries interval library 開発の話
Wada Yuki
Similar a Boot strap3 勉強会
(20)
Dreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディング
Dreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディング
Blazor0.6.0を用いたスクリプトレスWebアプリ開発の可能性
Blazor0.6.0を用いたスクリプトレスWebアプリ開発の可能性
Bootstrapを使ってみよう
Bootstrapを使ってみよう
ASP.NET MVC で Bootstrap
ASP.NET MVC で Bootstrap
Dioxy : How To Presentation [HTML/CSSワークショップ #1 / パンくずリストを作ろう]
Dioxy : How To Presentation [HTML/CSSワークショップ #1 / パンくずリストを作ろう]
Bootstrap
Bootstrap
芸術情報演習デザイン(Web) 第8回: CSSフレームワークを使う Twitter Bootstrap
芸術情報演習デザイン(Web) 第8回: CSSフレームワークを使う Twitter Bootstrap
Janog31 bof-pattern-sasaki-01
Janog31 bof-pattern-sasaki-01
あるマークアップエンジニアの初期制作時のテンプレ事情
あるマークアップエンジニアの初期制作時のテンプレ事情
Bootstrapを使用した画面設計 〜Bootstrapの基本(グリッドシステム・ブレークポイント)〜
Bootstrapを使用した画面設計 〜Bootstrapの基本(グリッドシステム・ブレークポイント)〜
続・Twitter bootstrap入門 #html5j
続・Twitter bootstrap入門 #html5j
HTML で自己紹介ページをつくる
HTML で自己紹介ページをつくる
情報編集(Web) 第8回: CSSフレームワークを使う Twitter Bootstrap
情報編集(Web) 第8回: CSSフレームワークを使う Twitter Bootstrap
Let's make quickly mock up by bootstrap.
Let's make quickly mock up by bootstrap.
Bootstrap s1
Bootstrap s1
フレームワークの良さを教えてやろう SAStruts + S2JDBC
フレームワークの良さを教えてやろう SAStruts + S2JDBC
Azure Machine Learningによるレコメンデーションの設計&実装を公開!~朝日カルチャーセンターの事例から~
Azure Machine Learningによるレコメンデーションの設計&実装を公開!~朝日カルチャーセンターの事例から~
Tableauのつまづきポイント
Tableauのつまづきポイント
100614 構造方程式モデリング基本の「き」
100614 構造方程式モデリング基本の「き」
Cranberries interval library 開発の話
Cranberries interval library 開発の話
Boot strap3 勉強会
1.
BootStrap3 勉強会 1
2.
はじめに 2
3.
BootStrapとは Twitter社製CSSフレームワーク 3
4.
4 CSSフレームワークって そもそも何よ?
5.
つまり 5
6.
こういうのとか 6
7.
こういうのとか 7
8.
こういうのとか 8
9.
9 楽できる要素が たくさん入っている ツール郡
10.
10 素敵!
11.
11 ただし
12.
12
13.
正しく使わないと・・・ 13
14.
前 提 Bootstrap3を使うことを 前提とします 14
15.
15 Bootstrapの基本 Bootstrap3の特徴 対応ブラウザについて 事例紹介 Bootstrapの始め方と注意点 インストール方法 基本テンプレート 基本的な使い方 Class名の命名規則について Bootstrapの機能 グリッドシステム アイコンフォント font-awesomeの使い方 基本コンポーネント説明 BootstrapのQA 質疑応答
16.
16 Bootstrapの基本 Bootstrap3の特徴 対応ブラウザについて 事例紹介 Bootstrapの始め方と注意点 インストール方法 基本テンプレート 基本的な使い方 Class名の命名規則について Bootstrapの機能 グリッドシステム アイコンフォント font-awesomeの使い方 基本コンポーネント説明 BootstrapのQA 質疑応答
17.
BootStrapの基本 17
18.
Bootstrap3の特徴 18 ・モバイルファースト ・レスポンシブルWebデザイン全面採用 ・フラットデザイン
19.
モバイルファースト(カルーセル) 19
20.
モバイルファースト(Form) 20
21.
Bootstrap3の特徴 21 ・モバイルファースト ・レスポンシブルWebデザイン全面採用 ・フラットデザイン ・アイコンフォント採用
22.
フラットデザイン 22
23.
Bootstrap3の特徴 23 ・モバイルファースト ・レスポンシブルWebデザイン全面採用 ・フラットデザイン ・アイコンフォント採用
24.
アイコンフォント採用 24 →Font Awesomeを使えば、更に拡張可能!
25.
対応ブラウザ 25 IE7・Firefox3.6非対応! ※IE8に対応する場合はRespond.jsとhtml5shiv. jsが必要(HTML5、CSS3 Media
QueriesをIE8で有効にできる)
26.
事例紹介 26 http://online.actus-interior.com/ http://www.newsweek.com/ その他多数…
27.
27 Bootstrapの基本 Bootstrap3の特徴 対応ブラウザについて 事例紹介 Bootstrapの始め方と注意点 インストール方法 基本テンプレート 基本的な使い方 Class名の命名規則について Bootstrapの機能 グリッドシステム アイコンフォント font-awesomeの使い方 基本コンポーネント説明 BootstrapのQA 質疑応答
28.
Bootstrapの始め方と注意点 28
29.
インストール方法 29 http://getbootstrap.com/
30.
インストール方法 30
31.
インストール方法 31 Bootstrap CSS本体(非圧縮) Bootstrap CSS本体(圧縮) Bootstrap
CSSテーマ本体(非圧縮) Bootstrap CSSテーマ本体(圧縮) Bootstrap JS本体(非圧縮) Bootstrap JS本体(圧縮) フォントアイコン集
32.
インストール方法 32 Bootstrap CSS本体(非圧縮) Bootstrap CSS本体(圧縮) Bootstrap
CSSテーマ本体(非圧縮) Bootstrap CSSテーマ本体(圧縮) Bootstrap JS本体(非圧縮) Bootstrap JS本体(圧縮) フォントアイコン集
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.
Bootstrapの基本テンプレート 34 別画面にて
35.
基本的な使い方 35 ・各機能単位のclassがある ・そのclassを付与することでデザインを実現する ・機能のclassは複数付与することが可能
36.
Class名の命名規則について 36 ・Bootstrapの命名規則は「OOCSS」が基本 ・ワードの区切りは「-」で統一 ・複数のclassで機能を作り上げる →OOCSSとは「Object Oriented CSS」の略
37.
CSSの基本構造 37 例)<p class=“btn btn-primary”>ボタン</p> .btn
{ ~ボタンの共通CSS~ } .btn-primary { color: #fff; background-color: #337ab7; border-color: #2e6da4 }
38.
38 Bootstrapの基本 Bootstrap3の特徴 対応ブラウザについて 事例紹介 Bootstrapの始め方と注意点 インストール方法 基本テンプレート 基本的な使い方 Class名の命名規則について Bootstrapの機能 グリッドシステム アイコンフォント font-awesomeの使い方 基本コンポーネント説明 BootstrapのQA 質疑応答
39.
Bootstrapの機能 39
40.
こういうのとか 40
41.
こういうのとか 41
42.
こういうのとか 42
43.
グリッドシステム(基本) ・ページ全体を12分割する ・12列に足りない場合は、空白ができる ・12列を超える場合は、下に行に落ちる ・container/container-fluid > row
> col-**-*の仕組みでコーディングしないといけない ・固定幅はcontainer、可動幅はcontainer-fluidを使う ・グリッドの入れ子もできる ・containerの幅は940px 43
44.
グリッドシステム(基本) 44
45.
グリッドシステム(基本) 45
46.
46 とりあえずやってみよう
47.
グリッドシステム(応用) ・ブロックの左右ずらしをすることも可能 ・ブロックの順番を入れ替えることもできる(レスポンシブル対応) 47
48.
48 やってみよう
49.
グリッドシステム(レスポンシブル) ・画面幅サイズ毎に設定を変えることができる ・画面幅に応じて表示・非表示を切り分けることができる ・col-xs~は最終的に適用されるclassなので、記載しておいた方がよい 49
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.
グリッドシステム(印刷) ・印刷時に要素を消すことができる(hidden-print) ・bootstrap標準では背景が消されている ・印刷時のみ、ブロック要素・インライン要素を切り替えるclassがある 51
52.
アイコンフォントの使い方 ・標準で入っているアイコンは以下の通り http://getbootstrap.com/components/ ・空タグにclassを設定するだけ ・スクリーンリーダー向けに「aria-hidden=“true”」を入れておく 52
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.
基本コンポーネント ここ見たらだいたい分かる http://www.wivern.com/bootstrap/components.html 54
55.
今後の展望的な話 ・レスポンシブ対応が増えるのは間違いないので、グリッド システムだけでも導入するべきではないか ・CSS設計概念としてはキレイので、bootstrapのthemeを作成 することでコーディングをするのは不可能か ・BootstrapからSassやLessなどのタスクランナー導入を進め ることはできないか 55
56.
56 質疑応答
Descargar ahora