Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
CSSフレームワークを使う-2 Twitter Bootstrapのカスタマイズ
Search
Atsushi Tadokoro
June 04, 2014
Technology
540
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
CSSフレームワークを使う-2 Twitter Bootstrapのカスタマイズ
Atsushi Tadokoro
June 04, 2014
More Decks by Atsushi Tadokoro
See All by Atsushi Tadokoro
デザイン言語総合講座 - クリエイティブ・コーディング
tado
0
2.8k
Tumblrを使う4 - Webサイトを構成する、固定ページとタグ
tado
0
1.8k
Tumblrを使う3- カスタムHTMLテーマの作成
tado
0
470
Processing.jsによるデータの可視化と生成的表現
tado
1
1.9k
Tumblrを使う2 - テーマをカスタマイズする
tado
0
380
Touchéの仕組みを理解 - ProcessingとArduinoの連携
tado
0
2.4k
Github Pagesで作品を公開、Automatic Page Generatorでサイトを生成
tado
0
1.7k
TumblrでWebサイトを作成
tado
0
730
bmaw14 第2回: Touchéセンサーを使う1 Touchéセンサーを作成する
tado
0
2.3k
Other Decks in Technology
See All in Technology
現場で役立つ技術負債の効果的な返済方法
masuda220
PRO
9
4.7k
「どのログを見ればいい?」 から始めた サーバーレス障害解析
y_waka1
1
110
30座EKS, 180次升級淬煉的EKS Upgrade Skill 的歷程
eric8230
0
190
AI時代の「技術的負債」の変質ー概念の終焉と再解釈、エージェントと共に向かう先
nwiizo
1
2.9k
越境するなら専門用語を使うな高校校歌 / If you wanna cross border, you shouldn't use jargon
vtryo
0
150
品質と信頼性を地続きにする
grimoh
2
820
`t*(42&t>>10)`だけで音楽が鳴る、Swiftで実装するBytebeat / iOSDC Japan 2026
yutailang0119
0
120
山手線を徒歩で一周してわかった、 位置情報アプリは「足」が最強のデバッガー
hinakko
0
170
絵ではじめるKubernetesセキュリティ
aoi1
4
690
AI時代、データエンジニアが一番おもろい
genshun9
0
670
beyond jj: config & tools ecosystem
indirect
0
5.4k
おい、エージェントを使って終わらせろ
nwiizo
2
760
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
46
8.3k
How to Talk to Developers About Accessibility
jct
2
550
Into the Great Unknown - MozCon
thekraken
41
2.7k
What Being in a Rock Band Can Teach Us About Real World SEO
427marketing
0
1.1k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
techseoconnect
PRO
0
680
Art, The Web, and Tiny UX
lynnandtonic
304
22k
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
inesmontani
PRO
3
2.4k
AI Search: Where Are We & What Can We Do About It?
aleyda
0
8k
Exploring anti-patterns in Rails
aemeredith
4
510
The Illustrated Children's Guide to Kubernetes
chrisshort
51
53k
AI: The stuff that nobody shows you
jnunemaker
PRO
10
1k
Transcript
ܳज़ใԋशσβΠϯ 8FC $44ϑϨʔϜϫʔΫΛ͏ 5XJUUFS#PPUTUSBQͷΧελϚΠζ ݄ ౦ژज़େֶܳज़ใηϯλʔ ".$ ୲ɿాॴ३
લճͷ෮श
5XJUUFS#PPUTUSBQͱ ‣IUUQHFUCPPUTUSBQDPN
5XJUUFS#PPUTUSBQͱ ‣ 5XJUUFS#PPUTUSBQɿ ‣ 5XJUUFS͕ࣾ։ൃʗఏڙ͢ΔΦʔϓϯιʔεͳʮ$44ϑϨʔϜϫʔΫʯ ‣ ؆୯ʹߴͳ8FCσβΠϯΛ͢Δ͜ͱ͕Մೳ ‣ ݄ݱࡏͷόʔδϣϯɺ7FSTJPO
5XJUUFS#PPUTUSBQͱ ‣ #PPUTUSBQΛ༻ͨ͠αΠτ ‣ http://expo.getbootstrap.com/ Ͱଟհ
5XJUUFS#PPUTUSBQΛͬͯΈΔ ‣ ·ͣɺ#PPUTUSBQΛμϯϩʔυ ‣ http://getbootstrap.com/ ! ‣ %PXOMPBE#PPUTUSBQϘλϯ͔Β
5XJUUFS#PPUTUSBQΛͬͯΈΔ ‣ ;JQϑΝΠϧΛղౚ͢ΔͱɺҎԼͷΑ͏ͳ༰ʹͳ͍ͬͯΔ ‣ ͜ͷʮCPPUTUSBQʯϑΥϧμʹϖʔδΛ࡞͍ͯ͘͠ bootstrap/ ├── css/ │ ├──
bootstrap.css │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ └── bootstrap-theme.min.css ├── js/ │ ├── bootstrap.js │ └── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf └── glyphicons-halflings-regular.woff
5XJUUFS#PPUTUSBQΛͬͯΈΔ ‣ 5XJUUFS#PPUTUSBQʹ͓͚ΔάϦουɺίϥϜ͕جຊ ‣ ͷׂ͔Βɺ༷ʑͳ߹͕ͤੜ·ΕΔ ! ! ! ! !
! ! ! ! ! ‣ ͜ͷγεςϜΛར༻ͯ͠ϨΠΞτ͍ͯ͘͠
5XJUUFS#PPUTUSBQΛͬͯΈΔ ‣ ͨͱ͑ɺ ͷίϥϜΛΜͰΈΔ ‣ ·ͣίϯςϯπશମΛEJWDMBTTDPOUBJOFSͰғΉ <!DOCTYPE HTML> <html>
<head> <link rel="stylesheet" href="css/bootstrap.css" /> <meta charset="utf-8" /> <title>Bootstrapͷςετ</title> </head> <body> <div class="container"> ! </div> </body> </html>
5XJUUFS#PPUTUSBQΛͬͯΈΔ ‣ ࣍ʹɺίϥϜͷઌ಄ΛEJWDMBTTSPXͰғΉ <!DOCTYPE HTML> <html> <head> <link rel="stylesheet" href="css/bootstrap.css"
/> <meta charset="utf-8" /> <title>Bootstrapͷςετ</title> </head> <body> <div class="container"> <h1>Twitter Bootstrapͷςετ</h1> <div class="row"> </div> </div> </body> </html>
5XJUUFS#PPUTUSBQΛͬͯΈΔ ‣ EJWDMBTTlSPXͷதʹ ‣ ͭͷEJWDMBTTlDPMNEΛೖΕΔ ... <div class="container"> <h1>Twitter Bootstrapͷςετ</h1>
<div class="row"> <div class="col-md-4"> </div> <div class="col-md-4"> </div> <div class="col-md-4"> </div> </div> </div> ...
5XJUUFS#PPUTUSBQΛͬͯΈΔ ‣ ͦΕͧΕͷEJWDMBTTDPMNEͷதʹɺ༰Λهड़ ... <div class="row"> <div class="col-md-4"> <h2>ςετ</h2> <p>͋ͷΠʔϋτʔϰΥͷ͖͢ͱ͓ͬͨ෩...</p>
</div> <div class="col-md-4"> <h2>ςετ</h2> <p>͋ͷΠʔϋτʔϰΥͷ͖͢ͱ͓ͬͨ෩...</p> </div> <div class="col-md-4"> <h2>ςετ</h2> <p>͋ͷΠʔϋτʔϰΥͷ͖͢ͱ͓ͬͨ෩...</p> </div> </div> ...
5XJUUFS#PPUTUSBQΛͬͯΈΔ ‣ ஈͷϨΠΞτ͕؆୯ʹ࣮ݱ
5XJUUFS#PPUTUSBQΛͬͯΈΔ ‣ ͨ͠ϖʔδͷαϯϓϧ
5XJUUFS#PPUTUSBQΛͬͯΈΔ ‣ ஈͷͨ͠αϯϓϧΛҎԼ͔Βμϯϩʔυ ‣ ࣮ࡍʹίʔυΛΈͳ͕Β෮श͠·͢ http://goo.gl/iQGCra
5XJUUFS#PPUTUSBQ ϖʔδαϯϓϧΛղੳ͢Δ
ϖʔδαϯϓϧΛղੳ͢Δ ‣ ΦϑΟγϟϧϖʔδʹɺ࣮ࡍͷ׆༻ྫͷςϯϓϨʔτ͕ެ։͞Ε͍ͯΔ ‣ ͜ΕΛࢀߟʹ͢Δͱɺ࣮ࡍʹϖʔδͷΠϝʔδ͕௫Έ͍͢
ϖʔδαϯϓϧΛղੳ͢Δ ‣ 4UBSUFSUFNQMBUF
ϖʔδαϯϓϧΛղੳ͢Δ ‣ #BTJDNBSLFUJOHTJUF
ϖʔδαϯϓϧΛղੳ͢Δ ‣ 'MVJEMBZPVU !
ϖʔδαϯϓϧΛղੳ͢Δ ‣ 'MVJEMBZPVU
ϖʔδαϯϓϧΛղੳ͢Δ ‣ 4UJDLZGPPUFS
ϖʔδαϯϓϧΛղੳ͢Δ ‣ $BSPVTFMKVNCPUSPO
5XJUUFS#PPUTUSBQ σβΠϯΛΧελϚΠζ
σβΠϯΛΧελϚΠζ ‣ #PPUTUSBQͷ$44͔ͳΓෳࡶ ‣ ฤू͢Δͷͪΐͬͱେมʜ
σβΠϯΛΧελϚΠζ ‣ #PPUTUSBQͷϖʔδʹΧελϚΠζ༻ϝχϡʔ͕͋Δ ‣ ΈʹԠͯ͡มߋͯ͠ɺ$44μϯϩʔυͯ͠ೖΕସ͑Δ
σβΠϯΛΧελϚΠζ ‣ ྫ͑ɺഎܠͱจࣈͷ৭Λมߋ
σβΠϯΛΧελϚΠζ ‣ 5XJUUFSͷΦϑΟγϟϧͱผʹɺ༷ʑͳΧελϚΠζ༻ςϯϓϨʔτ͕ଘࡏ͢Δ ‣ ༗ྉͷͷ͋Δ͕ɺϑϦʔͷͷ ‣ ޮՌతʹར༻ͯ͠ΈΔ
#MBDL5JF ‣ IUUQXXXCMBDLUJFDP ‣ ϙʔτϑΥϦΦʹ͓εεϝͷςʔϚΛूΊͨαΠτ
#MBDL5JF ‣ #MBDL5JF͔Β͓ؾʹ͍ΓͷςʔϚΛμϯϩʔυ ‣ ςΩετɺࣸਅɺը૾ɺϑΥϯτͳͲΛมߋͯࣗ͠ͷΈͷσβΠϯʹ
#MBDL5JF ‣ ྫ͑ɺ4UVEJPςϯϓϨʔτΛμϯϩʔυ
#MBDL5JF ‣ ΧελϚΠζͯ͠ɺࣗͷϖʔδʹ