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
CSSフレームワークを使う-2 Twitter Bootstrapのカスタマイズ
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Atsushi Tadokoro
June 04, 2014
Technology
530
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
460
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.6k
TumblrでWebサイトを作成
tado
0
720
bmaw14 第2回: Touchéセンサーを使う1 Touchéセンサーを作成する
tado
0
2.2k
Other Decks in Technology
See All in Technology
感情と身体を置き去りにしない、エンジニアの生きのこり方 ──いまから、ここから「自分の状態」を扱うという選択
saorimurooka
0
380
Deep Data Security 機能解説
oracle4engineer
PRO
2
230
アラート調査向けAIエージェントの本番導入とその後/AI Agents for Alert Investigation: Production Deployment and After
taddy_919
1
250
10年間のブログ発信を振り返って見えたWebアプリケーションエンジニアとしての軌跡
stefafafan
0
190
「軸足」は 固定しなくていい - 熱量と強みで描く、しなやかなキャリアの形
kakehashi
PRO
1
290
IaC コードを資産へ:AWS CDK 社内ライブラリと横断展開 / aws-summit-japan-2026
gotok365
10
1.6k
テスト設計の本質を改めて考えてみる~生成AIを活用する時代だからこそ、作ったテストの説明性を高めよう~
yamasaki696
1
150
技術・能力を向上する原理原則 #きのこセッションa #きのこ2026
bash0c7
0
170
Why is RC4 still being used?
tamaiyutaro
0
170
AWS Summit の片隅で、体育座りしながらコミュニティがにぎわう理由を考えた
k_adachi_01
2
280
水を運ぶ人としてのリーダーシップ
izumii19
4
1.1k
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
11k
Featured
See All Featured
How to build a perfect <img>
jonoalderson
1
5.7k
The World Runs on Bad Software
bkeepers
PRO
72
12k
B2B Lead Gen: Tactics, Traps & Triumph
marketingsoph
0
160
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
szymonslowik
1
1.1k
The Art of Programming - Codeland 2020
erikaheidi
57
14k
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
aleyda
1
2k
Practical Orchestrator
shlominoach
191
11k
Highjacked: Video Game Concept Design
rkendrick25
PRO
1
400
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
28
3.5k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
10k
New Earth Scene 8
popppiees
3
2.4k
Lightning talk: Run Django tests with GitHub Actions
sabderemane
0
200
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 ‣ ΧελϚΠζͯ͠ɺࣗͷϖʔδʹ