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
Bootstrap4のカスタマイズ
Search
Kazunori-Kimura
March 17, 2018
Technology
0
210
Bootstrap4のカスタマイズ
Bootstrap4の紹介とCSS、JSのカスタマイズ方法について
Kazunori-Kimura
March 17, 2018
Tweet
Share
More Decks by Kazunori-Kimura
See All by Kazunori-Kimura
path-parser
kazunorikimura
0
350
objectのcloneを行う/How to clone of the object in js
kazunorikimura
0
360
クライアントサイドで大きなデータを扱うときのお話/Web Worker & IndexedDB
kazunorikimura
0
620
How freelance programmer works
kazunorikimura
0
100
moment.js
kazunorikimura
0
72
sequelize.pdf
kazunorikimura
0
540
Toward the world of "ready player one"
kazunorikimura
0
73
npmの便利なパッケージ: forever, winser
kazunorikimura
0
950
npmの便利なパッケージ: Jest
kazunorikimura
0
120
Other Decks in Technology
See All in Technology
ディスプレイ広告(Yahoo!広告・LINE広告)におけるバックエンド開発
lycorptech_jp
PRO
0
370
いまからでも遅くない!コンテナでWebアプリを動かしてみよう!コンテナハンズオン編
nomu
0
150
Amazon Q Developerの無料利用枠を使い倒してHello worldを表示させよう!
nrinetcom
PRO
2
120
Goで作って学ぶWebSocket
ryuichi1208
3
2.8k
生成AI “再”入門 2025年春@WIRED TUESDAY EDITOR'S LOUNGE
kajikent
0
120
ABWG2024採択者が語るエンジニアとしての自分自身の見つけ方〜発信して、つながって、世界を広げていく〜
maimyyym
1
180
ExaDB-XSで利用されているExadata Exascaleについて
oracle4engineer
PRO
3
260
AIエージェント時代のエンジニアになろう #jawsug #jawsdays2025 / 20250301 Agentic AI Engineering
yoshidashingo
8
3.7k
役員・マネージャー・著者・エンジニアそれぞれの立場から見たAWS認定資格
nrinetcom
PRO
3
6.1k
JavaにおけるNull非許容性
skrb
2
2.6k
脳波を用いた嗜好マッチングシステム
hokkey621
0
290
ウォンテッドリーのデータパイプラインを支える ETL のための analytics, rds-exporter / analytics, rds-exporter for ETL to support Wantedly's data pipeline
unblee
0
130
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Large-scale JavaScript Application Architecture
addyosmani
511
110k
Navigating Team Friction
lara
183
15k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
GitHub's CSS Performance
jonrohan
1030
460k
Done Done
chrislema
182
16k
A Tale of Four Properties
chriscoyier
158
23k
How GitHub (no longer) Works
holman
314
140k
Designing for Performance
lara
604
68k
Faster Mobile Websites
deanohume
306
31k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Transcript
Bootstrap4ͷΧελ ϚΠζ 2018-03-17 ଜ ݑن
#PPUTUSBQʹ͍ͭͯ $44ͷΧελϚΠζ +BWB4DSJQUͷΧελϚΠζ
#PPUTUSBQʹ͍ͭͯ $44ͷΧελϚΠζ +BWB4DSJQUͷΧελϚΠζ
2018-01-18ʹBootstrap4͕ϦϦʔε
લόʔδϣϯͱൺֱͯ͠ ΧελϚΠζ͕ඇৗʹΓ͘͢ͳͬͨ • Sassͷ࠾༻ • JSϑΝΠϧͷػೳ͝ͱͷׂ ʢ͜Εલ͔Βʁʣ
Πϯετʔϧํ๏ $ npm install --save-dev bootstrap
#PPUTUSBQʹ͍ͭͯ $44ͷΧελϚΠζ +BWB4DSJQUͷΧελϚΠζ
CSSͷΧελϚΠζ SassʹΑͬͯॻ͔Ε͍ͯΔ લόʔδϣϯlessͩͬͨͷͰΫη͕͋ͬͨ
Sassͱ http://sass-lang.com/ Sass is the most mature, stable, and powerful
professional grade CSS extension language in the world. ˠ$44֦ுݴޠ
SassͱSCSS 4BTT DTTͰසग़͢Δηϛίϩϯׅހ ͳͲΛলུ 4$44 DTTͷߏจͦͷ··ʹɺηϨΫλʔ ͷೖΕࢠมͳͲͷػೳΛՃ
SassͱSCSS 4BTT DTTͰසग़͢Δηϛίϩϯׅހ ͳͲΛলུ 4$44 DTTͷߏจͦͷ··ʹɺηϨΫλʔ ͷೖΕࢠมͳͲͷػೳΛՃ
Πϯετʔϧ Node.js൛Λ༻͢Δ $ npm install --save-dev node-sass
ϑΥϧμߏ
ΧελϚΠζͷྫ ༻͢Δ߲ͷΈΠϯϙʔτ src/custom.scss
SCSSΛCSSʹม SCSSϒϥβ͕ղऍͰ͖ͳ͍ͷͰCSSʹม $ npx node-sass src/custom.scss docs/bundle.css
αΠζൺֱ ϑΝΠϧαΠζ͕60KBݮ
#PPUTUSBQʹ͍ͭͯ $44ͷΧελϚΠζ +BWB4DSJQUͷΧελϚΠζ
JavaScriptͷΧελϚΠζ node_module/bootstrap/js/srcʹػೳ͝ͱʹ ׂͯ͠ଘࡏ ECMAScript2017Ͱهड़ jQuery, popper.jsʹґଘ ݁߹ͱτϥϯεύΠϧ͕ඞཁ
ϑΥϧμߏ
ΧελϚΠζྫ src/index.js ඞཁͳػೳͷΈimport
docs/bundle.jsੜͷྲྀΕ WebPackͰෳͷϑΝΠϧΛ݁߹ʢόϯυϧʣ babelͰ݁߹ͨ͠ϑΝΠϧΛτϥϯεύΠϧ
WebPackͷΠϯετʔϧ $ npm install --save-dev webpack webpack-cli
WebPackͷ࣮ߦ $ npx webpack src/index.js --output-path="./tmp" --output-filename="bundle.js" --mode=production tmp/bundle.js͕ੜ
babelͷΠϯετʔϧ $ npm install --save-dev babel-cli babel-preset- env babel-plugin-transform-object-rest-spread
babelͷઃఆ { "presets": ["env"], "plugins": ["transform-object-rest-spread"] } .babelrc
babelͷ࣮ߦ $ npx babel tmp/bundle.js -o docs/bundle.js docs/bundle.js͕ੜ
αΠζൺֱ ϑΝΠϧαΠζ͕86KBݮ
#PPUTUSBQʹ͍ͭͯ $44ͷΧελϚΠζ +BWB4DSJQUͷΧελϚΠζ