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
210
世界一わかりやすいBootstrap
CSSフレームワークの1つ「Bootstrap」をわかりやすく解説しています。
Designsprint
June 11, 2016
Tweet
Share
More Decks by Designsprint
See All by Designsprint
spj-01book2019_.pdf
designsprint
0
120
ExOスプリント
designsprint
0
250
designsprint デザインスプリントのすすめ
designsprint
0
120
DESIGN SPRINT lecture and Workshop Strategic IT Management in Yahoo! LODGE
designsprint
1
96
Exponential Transformation - ExO SPRINT
designsprint
3
390
ExO SPRINT 説明会
designsprint
0
68
デザインスプリント1日説明会+ワークショップ
designsprint
0
140
Designsprint-Massive-Transformative-Purpose01.pdf
designsprint
0
200
designsprint-Jobs-To-Be-Done01
designsprint
0
82
Other Decks in Design
See All in Design
ダークテーマとアクセシビリティ の融合したカラートークンの設計
degudegu2510
0
370
0-1に挑むデザイナーが 知っておきたい2つの前提
swaaan
3
850
デザイナーの帽子をかぶったわたしが、プロダクト開発するうえでスクラムチームに提供したいこと / what I want to provide to Scrum teams when developing products
hiromitsuuuuu
14
5.4k
Fooocus(Stable DiffusionXL)で アニメ画像生成の仕方
otanet
0
1.4k
MiKS inc. Company PR en_202404
zakkerooni
1
770
プロダクトデザインは子育て/Product design is parenting
medley
0
510
非デザイナーのフロントエンドエンジニアがOOUIを考える
yud0uhu
8
4.3k
最速で価値を届けるUXリサーチ
degudegu2510
4
1k
ホワイト化するこの世界の片隅に
hisayosky
0
190
デザインプリンシプルのつくりかた(freee技術の日)
magi1125
3
2.7k
他人事じゃないWebアクセシビリティ入門
arihiro17
0
370
Amebaデザインシステム Spindleの開発 / The Development of Spindle
spindle
5
920
Featured
See All Featured
Scaling GitHub
holman
458
140k
How to Think Like a Performance Engineer
csswizardry
4
590
StorybookのUI Testing Handbookを読んだ
zakiyama
15
4.9k
The MySQL Ecosystem @ GitHub 2015
samlambert
248
12k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
36
9.1k
WebSockets: Embracing the real-time Web
robhawkes
59
7.2k
The Cult of Friendly URLs
andyhume
75
5.9k
What's in a price? How to price your products and services
michaelherold
239
11k
A Modern Web Designer's Workflow
chriscoyier
689
190k
Adopting Sorbet at Scale
ufuk
71
8.8k
The Brand Is Dead. Long Live the Brand.
mthomps
52
36k
Fireside Chat
paigeccino
25
2.8k
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