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
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
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
Claude Code公式skillで 自分の仕事を少しずつ手放そう!(Claude Code開発ノウハウ大公開スペシャル by クラスメソッド)
kaym
1
500
AI時代のPlaywright活用(システムテストを自動化する ー 実行エンジンにPla ywrightを選んだ理由)
ynisqa1988
1
600
アップデートで何が変わった?デモで学んで使いこなすIBM Bob2.0
muehara
0
170
AICoEでAIネイティブ組織への進化
yukiogawa
0
200
Amplify Gen2でbackend.tsにCDKを定義する/しない事によるCDKの挙動の違いとユースケース
smt7174
1
430
Terraform共通モジュールをチーム横断で“変えられる”運用へ ― リリースと適用の分離
kekke_n
1
3.4k
生成AI×AWS CDK×AWS FISで"振り返れる"ミニGameDayをつくろう
yoshimi0227
1
420
非定型なドキュメントを効率よくリファクタする 〜えぇ!?仕様書27本の移行が1日で終わったって!?〜
subroh0508
2
570
End-to-Endで考える信頼性 —LINEアプリにおけるクライアント開発×SRE連携の実践
maruloop
4
4.7k
シンガポールで登壇してきます
yama3133
0
250
大量データに対しても、生成AIを用いてリーズナブルにデータ加工をしたい!Databricksのai_queryについて調べてみた
kamoshika
1
220
壊して学ぶAWS CDK: そのcdk deployで消えるもの、残るもの
k_adachi_01
1
420
Featured
See All Featured
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
inesmontani
PRO
3
3.6k
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
aleyda
2
11k
Building Experiences: Design Systems, User Experience, and Full Site Editing
marktimemedia
0
550
Joys of Absence: A Defence of Solitary Play
codingconduct
1
410
It's Worth the Effort
3n
188
29k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
659
62k
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
baasie
0
450
The Spectacular Lies of Maps
axbom
PRO
1
860
Code Reviewing Like a Champion
maltzj
528
40k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.7k
What the history of the web can teach us about the future of AI
inesmontani
PRO
1
630
4 Signs Your Business is Dying
shpigford
187
22k
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 ‣ ΧελϚΠζͯ͠ɺࣗͷϖʔδʹ