Submit Search
Upload
Bootstrapではじめる、 Webサイト設計のモダンアプローチ
•
9 likes
•
3,809 views
masaaki komori
Follow
「Webサイト設計・UI実装・アクセシビリティのモダンアプローチ」イベント資料
Read less
Read more
Design
Report
Share
Report
Share
1 of 22
Download now
Download to read offline
Recommended
Movable Typeセミナー8月9日@大久保 アイデアマンズ
Movable Typeセミナー8月9日@大久保 アイデアマンズ
Kunihiko Miyanaga
MTセミナー2011/2/21 アイデアマンズ株式会社
MTセミナー2011/2/21 アイデアマンズ株式会社
Kunihiko Miyanaga
レスポンシブEメールを作ろう
レスポンシブEメールを作ろう
masaaki komori
プロトタイピングツール戦国時代
プロトタイピングツール戦国時代
masaaki komori
2015年のWebサイトの作り方 at 67ws
2015年のWebサイトの作り方 at 67ws
masaaki komori
Bootstrapはこう使う
Bootstrapはこう使う
masaaki komori
Framerで始めるプロトタイプコーディング
Framerで始めるプロトタイプコーディング
masaaki komori
Prototyping with Sketch
Prototyping with Sketch
masaaki komori
Recommended
Movable Typeセミナー8月9日@大久保 アイデアマンズ
Movable Typeセミナー8月9日@大久保 アイデアマンズ
Kunihiko Miyanaga
MTセミナー2011/2/21 アイデアマンズ株式会社
MTセミナー2011/2/21 アイデアマンズ株式会社
Kunihiko Miyanaga
レスポンシブEメールを作ろう
レスポンシブEメールを作ろう
masaaki komori
プロトタイピングツール戦国時代
プロトタイピングツール戦国時代
masaaki komori
2015年のWebサイトの作り方 at 67ws
2015年のWebサイトの作り方 at 67ws
masaaki komori
Bootstrapはこう使う
Bootstrapはこう使う
masaaki komori
Framerで始めるプロトタイプコーディング
Framerで始めるプロトタイプコーディング
masaaki komori
Prototyping with Sketch
Prototyping with Sketch
masaaki komori
デバイス多様化の時代のWeb制作
デバイス多様化の時代のWeb制作
masaaki komori
Dreamweaver CS6で作るレスポンシブWebデザイン
Dreamweaver CS6で作るレスポンシブWebデザイン
yoshikawa_t
Quick tips for porting your iOS designs to Android
Quick tips for porting your iOS designs to Android
Hervé Mischler
Sketch 3 Basics at kkmsz
Sketch 3 Basics at kkmsz
masaaki komori
groundwork-pasona-tech
groundwork-pasona-tech
masaaki komori
Framerで動くモックアップを簡単作成
Framerで動くモックアップを簡単作成
masaaki komori
Webデザインと開発の未来
Webデザインと開発の未来
masaaki komori
レスポンシブWebデザインの実践ワークフロー(WDS)
レスポンシブWebデザインの実践ワークフロー(WDS)
Hiroyuki Ogawa
[concept] Maquette site web de la bibliothèque universitaire Rennes 2
[concept] Maquette site web de la bibliothèque universitaire Rennes 2
Julien Sicot
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
Junko Nukaga
レスポンシブ・ウェブデザイン基礎
レスポンシブ・ウェブデザイン基礎
masaaki komori
レスポンシブWebデザインの基礎
レスポンシブWebデザインの基礎
Hiroyuki Ogawa
3 Methods to Master Agile UX Testing | UserZoom Webinar
3 Methods to Master Agile UX Testing | UserZoom Webinar
UserZoom
Ouverture des bibliothèques de section 2011 2012
Ouverture des bibliothèques de section 2011 2012
BELVEZE Damien
ReValTIC 2.0
ReValTIC 2.0
ReValTIC
Día especial de alex
Día especial de alex
manmenpino
Déjeuner du GATE - Mai 2011 - Présentation E.M.S.
Déjeuner du GATE - Mai 2011 - Présentation E.M.S.
Sherbrooke Innopole
Frantext mode d'emploi rapide
Frantext mode d'emploi rapide
BELVEZE Damien
Presentation abourjeily-fsedu-original
Presentation abourjeily-fsedu-original
Université Saint Joseph de Beyrouth
10 trucs pour les newbies de l’ergonomie
10 trucs pour les newbies de l’ergonomie
MatchFWD
コアなエンジニアじゃなくてもできるよ #JP_Stripes Vol.3
コアなエンジニアじゃなくてもできるよ #JP_Stripes Vol.3
masaaki komori
InstaVR使ってみた
InstaVR使ってみた
masaaki komori
More Related Content
Viewers also liked
デバイス多様化の時代のWeb制作
デバイス多様化の時代のWeb制作
masaaki komori
Dreamweaver CS6で作るレスポンシブWebデザイン
Dreamweaver CS6で作るレスポンシブWebデザイン
yoshikawa_t
Quick tips for porting your iOS designs to Android
Quick tips for porting your iOS designs to Android
Hervé Mischler
Sketch 3 Basics at kkmsz
Sketch 3 Basics at kkmsz
masaaki komori
groundwork-pasona-tech
groundwork-pasona-tech
masaaki komori
Framerで動くモックアップを簡単作成
Framerで動くモックアップを簡単作成
masaaki komori
Webデザインと開発の未来
Webデザインと開発の未来
masaaki komori
レスポンシブWebデザインの実践ワークフロー(WDS)
レスポンシブWebデザインの実践ワークフロー(WDS)
Hiroyuki Ogawa
[concept] Maquette site web de la bibliothèque universitaire Rennes 2
[concept] Maquette site web de la bibliothèque universitaire Rennes 2
Julien Sicot
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
Junko Nukaga
レスポンシブ・ウェブデザイン基礎
レスポンシブ・ウェブデザイン基礎
masaaki komori
レスポンシブWebデザインの基礎
レスポンシブWebデザインの基礎
Hiroyuki Ogawa
3 Methods to Master Agile UX Testing | UserZoom Webinar
3 Methods to Master Agile UX Testing | UserZoom Webinar
UserZoom
Ouverture des bibliothèques de section 2011 2012
Ouverture des bibliothèques de section 2011 2012
BELVEZE Damien
ReValTIC 2.0
ReValTIC 2.0
ReValTIC
Día especial de alex
Día especial de alex
manmenpino
Déjeuner du GATE - Mai 2011 - Présentation E.M.S.
Déjeuner du GATE - Mai 2011 - Présentation E.M.S.
Sherbrooke Innopole
Frantext mode d'emploi rapide
Frantext mode d'emploi rapide
BELVEZE Damien
Presentation abourjeily-fsedu-original
Presentation abourjeily-fsedu-original
Université Saint Joseph de Beyrouth
10 trucs pour les newbies de l’ergonomie
10 trucs pour les newbies de l’ergonomie
MatchFWD
Viewers also liked
(20)
デバイス多様化の時代のWeb制作
デバイス多様化の時代のWeb制作
Dreamweaver CS6で作るレスポンシブWebデザイン
Dreamweaver CS6で作るレスポンシブWebデザイン
Quick tips for porting your iOS designs to Android
Quick tips for porting your iOS designs to Android
Sketch 3 Basics at kkmsz
Sketch 3 Basics at kkmsz
groundwork-pasona-tech
groundwork-pasona-tech
Framerで動くモックアップを簡単作成
Framerで動くモックアップを簡単作成
Webデザインと開発の未来
Webデザインと開発の未来
レスポンシブWebデザインの実践ワークフロー(WDS)
レスポンシブWebデザインの実践ワークフロー(WDS)
[concept] Maquette site web de la bibliothèque universitaire Rennes 2
[concept] Maquette site web de la bibliothèque universitaire Rennes 2
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
レスポンシブ・ウェブデザイン基礎
レスポンシブ・ウェブデザイン基礎
レスポンシブWebデザインの基礎
レスポンシブWebデザインの基礎
3 Methods to Master Agile UX Testing | UserZoom Webinar
3 Methods to Master Agile UX Testing | UserZoom Webinar
Ouverture des bibliothèques de section 2011 2012
Ouverture des bibliothèques de section 2011 2012
ReValTIC 2.0
ReValTIC 2.0
Día especial de alex
Día especial de alex
Déjeuner du GATE - Mai 2011 - Présentation E.M.S.
Déjeuner du GATE - Mai 2011 - Présentation E.M.S.
Frantext mode d'emploi rapide
Frantext mode d'emploi rapide
Presentation abourjeily-fsedu-original
Presentation abourjeily-fsedu-original
10 trucs pour les newbies de l’ergonomie
10 trucs pour les newbies de l’ergonomie
More from masaaki komori
コアなエンジニアじゃなくてもできるよ #JP_Stripes Vol.3
コアなエンジニアじゃなくてもできるよ #JP_Stripes Vol.3
masaaki komori
InstaVR使ってみた
InstaVR使ってみた
masaaki komori
Re:Cre Vol.14 | Web design process for the future
Re:Cre Vol.14 | Web design process for the future
masaaki komori
Web Design Process for The Future
Web Design Process for The Future
masaaki komori
Web Design Process for The Future
Web Design Process for The Future
masaaki komori
インブラウザ勉強会 Vol.1
インブラウザ勉強会 Vol.1
masaaki komori
設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化
masaaki komori
Sublime Text 2 Basics
Sublime Text 2 Basics
masaaki komori
Web制作者は変化についていけるか? 変化についていくべきか?
Web制作者は変化についていけるか? 変化についていくべきか?
masaaki komori
Mastering Sublime Text 2
Mastering Sublime Text 2
masaaki komori
Getting Started with Sublime Text 2
Getting Started with Sublime Text 2
masaaki komori
HTML5 Web Design Workflow
HTML5 Web Design Workflow
masaaki komori
Web Site Optimization for Beginners
Web Site Optimization for Beginners
masaaki komori
Amazon S3 and CloudFront, Route 53
Amazon S3 and CloudFront, Route 53
masaaki komori
WordPress 高速化 Pro Tips: フロントエンドの最適化
WordPress 高速化 Pro Tips: フロントエンドの最適化
masaaki komori
HTML5時代のWebデザイン
HTML5時代のWebデザイン
masaaki komori
これからはじめるCoda2とSublime Text 2
これからはじめるCoda2とSublime Text 2
masaaki komori
WordBench Saitama vol.6
WordBench Saitama vol.6
masaaki komori
More from masaaki komori
(18)
コアなエンジニアじゃなくてもできるよ #JP_Stripes Vol.3
コアなエンジニアじゃなくてもできるよ #JP_Stripes Vol.3
InstaVR使ってみた
InstaVR使ってみた
Re:Cre Vol.14 | Web design process for the future
Re:Cre Vol.14 | Web design process for the future
Web Design Process for The Future
Web Design Process for The Future
Web Design Process for The Future
Web Design Process for The Future
インブラウザ勉強会 Vol.1
インブラウザ勉強会 Vol.1
設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化
Sublime Text 2 Basics
Sublime Text 2 Basics
Web制作者は変化についていけるか? 変化についていくべきか?
Web制作者は変化についていけるか? 変化についていくべきか?
Mastering Sublime Text 2
Mastering Sublime Text 2
Getting Started with Sublime Text 2
Getting Started with Sublime Text 2
HTML5 Web Design Workflow
HTML5 Web Design Workflow
Web Site Optimization for Beginners
Web Site Optimization for Beginners
Amazon S3 and CloudFront, Route 53
Amazon S3 and CloudFront, Route 53
WordPress 高速化 Pro Tips: フロントエンドの最適化
WordPress 高速化 Pro Tips: フロントエンドの最適化
HTML5時代のWebデザイン
HTML5時代のWebデザイン
これからはじめるCoda2とSublime Text 2
これからはじめるCoda2とSublime Text 2
WordBench Saitama vol.6
WordBench Saitama vol.6
Bootstrapではじめる、 Webサイト設計のモダンアプローチ
1.
2.
Agenda
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
less/ ├── .csscomb.json ├── .csslintrc ├──
alerts.less ├── badges.less ├── bootstrap.less ├── breadcrumbs.less ├── button-groups.less ├── buttons.less ├── carousel.less ├── close.less ├── code.less ├── component-animations.less ├── dropdowns.less ├── forms.less ├── glyphicons.less ├── grid.less ├── input-groups.less ├── labels.less ├── list-group.less ├── media.less ├── mixins/ ├── mixins.less ├── modals.less ├── navbar.less ├── navs.less ├── normalize.less ├── pager.less ├── pagination.less ├── panels.less ├── popovers.less ├── print.less ├── progress-bars.less ├── responsive-embed.less ├── responsive-utilities.less ├── scaffolding.less ├── tables.less ├── theme.less ├── thumbnails.less ├── tooltip.less ├── type.less ├── utilities.less ├── variables.less └── wells.less
16.
17.
まとめ
18.
フレームワークがもたらしてくれるもの
19.
設計 ルール Components
20.
「中間成果物」にもフレームワークを活用 Sketch Wireframe Mockup Review Visual Prototype Develop Concept
21.
フレームワーク + コンポーネント で Webサイトはより"健康"になれる
22.
これからのWebサイト設計の新しい教科書 CSSフレームワークでつくるマルチデバイス対応 サイトの考え方と実装 好評発売中3/23 RELEASE
Download now