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
Kazunori-Kimura
January 17, 2017
Technology
0
230
Bootstrapの簡単カスタマイズ
Bootstrap-sassをnode-sassを使用して簡単にカスタマイズする方法について
Kazunori-Kimura
January 17, 2017
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
日経のデータベース事業とElasticsearch
hinatades
PRO
0
240
php-conference-nagoya-2025
fuwasegu
0
150
システム・ML活用を広げるdbtのデータモデリング / Expanding System & ML Use with dbt Modeling
i125
1
320
クラウド食堂とは?
hiyanger
0
120
技術スタックだけじゃない、業務ドメイン知識のオンボーディングも同じくらいの量が必要な話
niftycorp
PRO
0
110
実は強い 非ViTな画像認識モデル
tattaka
3
1.3k
RayでPHPのデバッグをちょっと快適にする
muno92
PRO
0
190
Cracking the Coding Interview 6th Edition
gdplabs
14
28k
クラウド関連のインシデントケースを収集して見えてきたもの
lhazy
8
1.2k
わたしがEMとして入社した「最初の100日」の過ごし方 / EMConfJp2025
daiksy
14
5.1k
Oracle Database Technology Night #87-1 : Exadata Database Service on Exascale Infrastructure(ExaDB-XS)サービス詳細
oracle4engineer
PRO
1
180
RemoveだらけのPHPUnit 12に備えよう
cocoeyes02
0
300
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
229
18k
RailsConf 2023
tenderlove
29
1k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Making Projects Easy
brettharned
116
6k
Large-scale JavaScript Application Architecture
addyosmani
511
110k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
Faster Mobile Websites
deanohume
306
31k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
BBQ
matthewcrist
87
9.5k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
260
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.6k
Transcript
Bootstrapͷ ؆୯ΧελϚΠζ ଜ ݑن
ࣗݾհ • ଜ ݑن (͖ΉΒ ͔ͣͷΓ) • ϑϦʔϥϯε5 • ۀΞϓϦ։ൃ
• JavaScript, C#, Java, Objective-C, PHP
Bootstrapͱʁ • Twitter͕ެ։͍ͯ͠ΔCSSϑϨʔϜϫʔΫ • HTMLͰదʹclassࢦఆ͢Δ͜ͱͰWebσβ Πϯͷࣝͳ͠ʹιϨφϦͷݟͨʹͳΔ • http://getbootstrap.com/
ͳΜͰΧελϚΠζ͢Δͷʁ • ૉͷ··Ͱ༻͢ΔͱΈΜͳಉ͡ݟͨʹ
bootstrap-sass • ར༻ऀ͕ΧελϚΠζͰ͖ΔΑ͏ʹɺ.scss ϑΝΠϧΛؚΊͨϓϩδΣΫτ • https://github.com/twbs/bootstrap-sass
Sassͱ • CSSϝλݴޠͷͻͱͭ • http://sass-lang.com/
CSSϝλݴޠͱʁ • ίʔσΟϯάޮΛߴΊΔͨΊɺ௨ৗͷCSS ʹҎԼͷΑ͏ͳػೳΛՃͨ͠ݴޠͷ͜ͱ ม ηϨΫλͷωετ ϑΝΠϧͷׂ ϞδϡʔϧԽJNQPSUػೳ NJYJO ؔͷΑ͏ͳػೳ
࢛ଇԋࢉ ੍ޚߏจ
දతͳCSSϝλݴޠ • Sass (SCSS) • less • Stylus • PostCSS
ΧελϚΠζͷखॱ • Node.jsڥ͕͍ͬͯΕ؆୯
node-sassΛ༻ 1. bootstrap-sassΛμϯϩʔυ npm install bootstrap-sass 2. node-sassΛμϯϩʔυ npm install
-g node-sass 3. scssϑΝΠϧΛϓϦίϯύΠϧ node-sass node_modules/bootstrap-sass/assets/stylesheets/ _bootstrap.scss dist/css/bootstrap.min.css --output-style compressed --source-map dist/css/bootstrap.min.css.map
ΧελϚΠζ༻ϓϩδΣΫτ • https://github.com/Kazunori-Kimura/bootstrap- customize-base 1. ϓϩδΣΫτΛμϯϩʔυ git clone
[email protected]
:Kazunori-Kimura/ bootstrap-customize-base.git
2. ࣮ߦ͢Δ͚ͩ npm start
͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ 2017ΑΖ͓͘͠ئ͍͍ͨ͠·͢