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
330
designsprint デザインスプリントのすすめ
designsprint
0
160
DESIGN SPRINT lecture and Workshop Strategic IT Management in Yahoo! LODGE
designsprint
1
130
Exponential Transformation - ExO SPRINT
designsprint
3
530
ExO SPRINT 説明会
designsprint
0
94
デザインスプリント1日説明会+ワークショップ
designsprint
0
190
Designsprint-Massive-Transformative-Purpose01.pdf
designsprint
0
270
designsprint-Jobs-To-Be-Done01
designsprint
0
130
Other Decks in Design
See All in Design
Memory Man v3 (WIP)
storybychad
PRO
0
2.7k
Spectrum Tokyo_ デザイナーが事業責任者になってみた
shin_2
0
150
高卒公務員から Webデザイナーになるまで
kinomidesign
0
100
【最新】マズロー安達の弟子実績(1期-4期の26人分)
maslow_akkun
0
2.9k
見過ごさない誠実さ_アクティブバイスタンダーとIntegrityが支えるアジャイル文化 / integrity-and-active-bystander
spring_aki
1
120
【MIXI MEETUP!ー TECH & DESIGN DAYー】【工数98%削減】Xでモンストを話題にせよ!生成AIの活用で日本トレンド6位を獲得した企画の設計&デザイン術
mixi_design
PRO
0
130
mento Design Team Portfolio
mento0fficial
1
880
組織で取り組むアクセシビリティのはじめ方
masakiohsumi
0
190
役立つシステムを作るためのAI活用
kanzaki
0
110
SAMSUL KAMAR ABDUL RAHMAN
samsulrahman32
0
170
ユーザー像を「みてね」らしく可視化する 家族アルバムみてねUXリサーチチームの取り組み
mixi_design
PRO
1
210
保育AIプロダクトの UXデザインで考えてきたこと / hoiku-ai-ux-design
hiro93n
0
170
Featured
See All Featured
RailsConf 2023
tenderlove
30
1.2k
Balancing Empowerment & Direction
lara
4
690
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
114
20k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
How GitHub (no longer) Works
holman
315
140k
GitHub's CSS Performance
jonrohan
1032
470k
The Cult of Friendly URLs
andyhume
79
6.6k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
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