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
320
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
93
デザインスプリント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
Yumika Yamada Portfolio
yumii
0
1.7k
CursorでAI活用のナレッジベースを構築する
kanzaki
0
740
不確実性の時代にみんなで試したFigma × MCP × Cursor ハンズオン
techtekt
PRO
7
870
The Spectacular Lies of Maps
axbom
PRO
1
300
UXデザインはなぜ定着しないのか?
designstudiopartners
0
1k
文字コントラストを改めて考える / Reevaluating Text Contrast
lycorptech_jp
PRO
0
550
SAMSUL KAMAR ABDUL RAHMAN
samsulrahman32
0
160
Findyのプロデチームの 歩みとこれから
satty9556
0
290
mento Design Team Portfolio
mento0fficial
1
850
地理院地図をもっと楽しく!れきちず新機能のご紹介
hjmkth
1
150
Portfolio 齋藤明敏 Hiroyuki Saito
crearedesign
0
110
街・都市という眼差し。まちづくりにおける規範と実践
sakamon
0
150
Featured
See All Featured
Fireside Chat
paigeccino
40
3.7k
Gamification - CAS2011
davidbonilla
81
5.5k
Six Lessons from altMBA
skipperchong
28
4k
Unsuck your backbone
ammeep
671
58k
A Modern Web Designer's Workflow
chriscoyier
697
190k
A designer walks into a library…
pauljervisheath
209
24k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
A better future with KSS
kneath
239
17k
For a Future-Friendly Web
brad_frost
180
9.9k
Agile that works and the tools we love
rasmusluckow
331
21k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
9
570
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