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
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
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.6k
TumblrでWebサイトを作成
tado
0
730
bmaw14 第2回: Touchéセンサーを使う1 Touchéセンサーを作成する
tado
0
2.2k
Other Decks in Technology
See All in Technology
AI Coding Agent時代のcdk-nagガードレール 〜組織ルールを強制CIで守り抜く設計の挑戦〜
mhrtech
3
440
AI、CDK と協働する Full TypeScript アプリケーション開発 / Full TypeScript Application with AI and CDK
geekplus_tech
2
410
非定型なドキュメントを効率よくリファクタする 〜えぇ!?仕様書27本の移行が1日で終わったって!?〜
subroh0508
2
570
変更し続けられるシステムをどう保つか — AI時代のSSoTという設計原則
kawauso
1
240
GoでCコンパイラを作った話
repunit
0
130
最適な自走を最小限の支援で — M&Aで拡大する組織で少人数SREが挑んだ1年 / SRE NEXT 2026
genda
0
1.5k
Network Firewallやっていき!
news_it_enj
0
170
Making sense of Google’s agentic dev tools
glaforge
1
290
ZOZOTOWNの進化と信頼性を両立する負荷試験
zozotech
PRO
2
280
Kaggleで成長するために意識したこと
prgckwb
2
420
Oracle Exadata Database Service on Cloud@Customer X11M (ExaDB-C@C) サービス概要
oracle4engineer
PRO
2
8.4k
そのドキュメント、自動化しませんか?
yuksew
1
310
Featured
See All Featured
Unlocking the hidden potential of vector embeddings in international SEO
frankvandijk
0
870
Navigating Team Friction
lara
192
16k
Deep Space Network (abreviated)
tonyrice
0
230
State of Search Keynote: SEO is Dead Long Live SEO
ryanjones
0
220
WENDY [Excerpt]
tessaabrams
11
38k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Evolving SEO for Evolving Search Engines
ryanjones
0
240
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
helenjbeal
1
260
The SEO identity crisis: Don't let AI make you average
varn
0
520
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
szymonslowik
1
1.2k
Believing is Seeing
oripsolob
1
170
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
sarafernandez
2
1.5k
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 ‣ ΧελϚΠζͯ͠ɺࣗͷϖʔδʹ