Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
世界一わかりやすいBootstrap
Search
Designsprint
June 11, 2016
Design
0
220
世界一わかりやすいBootstrap
CSSフレームワークの1つ「Bootstrap」をわかりやすく解説しています。
Designsprint
June 11, 2016
Tweet
Share
More Decks by Designsprint
See All by Designsprint
spj-01book2019_.pdf
designsprint
0
140
ExOスプリント
designsprint
0
310
designsprint デザインスプリントのすすめ
designsprint
0
150
DESIGN SPRINT lecture and Workshop Strategic IT Management in Yahoo! LODGE
designsprint
1
120
Exponential Transformation - ExO SPRINT
designsprint
3
510
ExO SPRINT 説明会
designsprint
0
85
デザインスプリント1日説明会+ワークショップ
designsprint
0
180
Designsprint-Massive-Transformative-Purpose01.pdf
designsprint
0
260
designsprint-Jobs-To-Be-Done01
designsprint
0
120
Other Decks in Design
See All in Design
Light My Fire/ハートに火をつけるコミュニティ
kgsi
1
140
The Spectacular Lies of Maps
axbom
PRO
0
110
Hybrid NW Infra Design Review: Classic Pattern including Outposts & Route 53 Profile
ichichi
2
680
FigmaのFigmaファイルから学ぶTips & Tricks
hilokifigma
0
490
オリジナルのデザイン地図を作ってみた!〜OpenMapTilesとMaputnikを活用した地図スタイル〜
hjmkth
1
580
Карта процесса-опыта — как визуализировать сервис просто, понятно и подробно
ashapiro
0
110
AI時代に淘汰されないデザインのしごと
akinen
1
140
How to get a Tiger to Tulsa
mcduckyart
0
110
Haley's adventure chase
ivettetwin
0
240
Goodpatch Tour💙 / We are hiring!
goodpatch
31
860k
ビジネスアナリシスはビジネス”分析”じゃないよ!~システム人材が価値を生むための基盤スキルとしてのビジネスアナリシス~
bpstudy
0
560
【Firefly Image 4対応版】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
0
1.4k
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
695
190k
4 Signs Your Business is Dying
shpigford
184
22k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
How to Ace a Technical Interview
jacobian
278
23k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Designing for Performance
lara
610
69k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Visualization
eitanlees
146
16k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
740
Transcript
Bootstrap Bootstrapの使い方
Boostrapの基礎
3 Bootstrapとは? Web制作を補助してくれるCSS の書式指定を集めたライブラリ 集です。 CSSフレームワークといい、自 分でゼロからCSSを記述しなく ても、ブロックを組み合わせる ようにレイアウトのブロック、 ボタンやフォームなどのパーツ
をHTMLでレイアウトすること で、画面を作成できます。 また、そのパーツのデザインも 予め施されているので、カラー 設計を詳細に⾏わなくてもカ ラー統制ができます。
4 Bootstrapの位置感 HTML5 言語 フレームワーク 考え・概念 製品名・サービス名 bootstrap
5 Bootstrapのメリット こんなにある利⽤のメリット 短時間である程度⾒た目のよいWebサイトを構築するこ とができます。 昨今では、制作のスピードが求められる案件が多いので、 使い方さえ覚えれば、短期間である程度の画面を完成さ せられるので、利⽤ニーズが上がっています。
6 Bootstrapの事例1 国内でも利⽤ケースが多くなってきています。
7 Bootstrapの事例2 国内でも利⽤ケースが多くなってきています。
8 Bootstrapの事例3 国内でも利⽤ケースが多くなってきています。
9 Bootstrapの事例4 国内でも利⽤ケースが多くなってきています。
10 Bootstrapの特徴 なぜ、多くの支持を集めているのか? 1 グリッドシステムがある 3 パーツの網羅性 2 レスポンシブWebデザインの完備 4
JSのライブラリー集とプラグインの豊富さ 5 カスタマイズザー、テンプレートが豊富
11 Bootstrapでできること テンプレートを利⽤してレイアウトする
12 Bootstrapでできること テンプレートを利⽤してレイアウトする
13 Bootstrapでできること テンプレートを利⽤してレイアウトする
14 Bootstrapでできること グリッドシステムを活⽤してレイアウトできる
15 Bootstrapでできること ナビゲーションカンタンに作成できる
16 Bootstrapでできること ナビゲーションカンタンに作成できる
17 Bootstrapでできること ナビゲーションカンタンに作成できる
18 Bootstrapでできること カバーテンプレートを利⽤し、トップページを作成できる
19 Bootstrapでできること カバーテンプレートを利⽤し、トップページを作成できる
20 Bootstrapでできること カバーテンプレートを利⽤し、トップページを作成できる
21 Bootstrapでできること 200種類のアイコンを利⽤できる
22 テンプレートーリストー 1 グリッドシステムがある 3 パーツの網羅性 2 レスポンシブWebデザインの完備 4 JSのライブラリー集がある
5 カスタマイズザー、テンプレートが豊富
基本ファイルの確認
24 基本ファイルのファイル構成 24
25 基本セットのファイル構成 25
26 基本セットのファイル構成 26
27 基本セットのファイル構成 27
28 基本セットのファイル構成 28
29 基本セットのファイル構成 29
グリッドを利⽤した ページレイアウト実習
31 レイアウト例1 31
32 レイアウト例2 32
33 レイアウト例3 33
34 レイアウト例4 34