Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSSフレームワークを使う-2 Twitter Bootstrapのカスタマイズ

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Atsushi Tadokoro Atsushi Tadokoro
June 04, 2014
Technology
530
0

CSSフレームワークを使う-2 Twitter Bootstrapのカスタマイズ

Avatar for Atsushi Tadokoro

Atsushi Tadokoro

June 04, 2014

More Decks by Atsushi Tadokoro

See All by Atsushi Tadokoro
デザイン言語総合講座 - クリエイティブ・コーディング
Avatar for Atsushi Tadokoro tado
0
2.8k
Tumblrを使う4 - Webサイトを構成する、固定ページとタグ
Avatar for Atsushi Tadokoro tado
0
1.8k
Tumblrを使う３ - カスタムHTMLテーマの作成
Avatar for Atsushi Tadokoro tado
0
460
Processing.jsによるデータの可視化と生成的表現
Avatar for Atsushi Tadokoro tado
1
1.9k
Tumblrを使う2 - テーマをカスタマイズする
Avatar for Atsushi Tadokoro tado
0
380
Touchéの仕組みを理解 - ProcessingとArduinoの連携
Avatar for Atsushi Tadokoro tado
0
2.4k
Github Pagesで作品を公開、Automatic Page Generatorでサイトを生成
Avatar for Atsushi Tadokoro tado
0
1.6k
TumblrでWebサイトを作成
Avatar for Atsushi Tadokoro tado
0
720
bmaw14 第2回: Touchéセンサーを使う1 Touchéセンサーを作成する
Avatar for Atsushi Tadokoro tado
0
2.2k

Other Decks in Technology

See All in Technology
Platform engineering for developers, architects & the rest of us (AI agents)
Avatar for danielbryantuk danielbryantuk
0
180
LLMと共に進化するプロセスを目指して
Avatar for y_matsuwitter ymatsuwitter
12
3.2k
Oracle AI Database@Google Cloud：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
6
1.5k
探して_入れて_作って_使う_Agent_Skills___LT.pdf
Avatar for 松尾淳平 peintangos
2
160
製造業のクラウド活用最適解〜AI，DXを加速するデータ基盤の作り方〜
Avatar for 濱田孝治 hamadakoji
0
390
AI と創る新たな世界 / A New World Created with AI
Avatar for Kenji Saito ks91
PRO
0
110
AWSシリコン最前線 〜AI時代のチップ選択を読み解く〜
Avatar for Hiroshi Tokoyo htokoyo
1
100
Cloud Run のアップデート 触ってみる＆紹介
Avatar for Gre212 gre212
0
320
JJUG CCC 2026 Spring　AI時代の開発こそ標準化を武器に！ ― 方式・プロセス・プラットフォームの標準化
Avatar for WatanabeShun s27watanabe
2
720
地元にいないローカルオーガナイザーの立ち回り
Avatar for uvb_76 uvb_76
1
480
AI フレンドリーなエラー監視を TypeScript で実現する
Avatar for Shinobu Hayashi shinyaigeek
2
260
Oracle AI Database@AWS：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
4
2.8k

Featured

See All Featured
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
16
2k
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
Avatar for Liv Day livdayseo
0
130
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
3.1k
Neural Spatial Audio Processing for Sound Field Analysis and Control
Avatar for NII S. Koyama's Lab skoyamalab
0
320
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
2
320
Impact Scores and Hybrid Strategies: The future of link building
Avatar for Tamara Novitovic tamaranovitovic
0
300
Reality Check: Gamification 10 Years Later
Avatar for Sebastian Deterding codingconduct
0
2.2k
Efficient Content Optimization with Google Search Console & Apps Script
Avatar for Katarina Dahlin katarinadahlin
PRO
1
600
Discover your Explorer Soul
Avatar for Emna emna__ayadi
2
1.1k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
860
B2B Lead Gen: Tactics, Traps & Triumph
Avatar for Sophie Logan marketingsoph
0
140
Exploring anti-patterns in Rails
Avatar for Elle Meredith aemeredith
3
390

Transcript

  1. ܳज़৘ใԋशσβΠϯ 8FC  $44ϑϨʔϜϫʔΫΛ࢖͏ 5XJUUFS#PPUTUSBQͷΧελϚΠζ ೥݄೔ ౦ژ᥁ज़େֶܳज़৘ใηϯλʔ ".$  ୲౰ɿాॴ३

  2. લճͷ෮श

  3. 5XJUUFS#PPUTUSBQͱ͸ ‣IUUQHFUCPPUTUSBQDPN

  4. 5XJUUFS#PPUTUSBQͱ͸ ‣ 5XJUUFS#PPUTUSBQɿ ‣ 5XJUUFS͕ࣾ։ൃʗఏڙ͢ΔΦʔϓϯιʔεͳʮ$44ϑϨʔϜϫʔΫʯ ‣ ؆୯ʹߴ౓ͳ8FCσβΠϯΛ͢Δ͜ͱ͕Մೳ ‣ ೥݄ݱࡏͷόʔδϣϯ͸ɺ7FSTJPO

  5. 5XJUUFS#PPUTUSBQͱ͸ ‣ #PPUTUSBQΛ࢖༻ͨ͠αΠτ ‣ http://expo.getbootstrap.com/ Ͱଟ਺঺հ

  6. 5XJUUFS#PPUTUSBQΛ࢖ͬͯΈΔ ‣ ·ͣ͸ɺ#PPUTUSBQΛμ΢ϯϩʔυ ‣ http://getbootstrap.com/ ! ‣ %PXOMPBE#PPUTUSBQϘλϯ͔Β

  7. 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

  8. 5XJUUFS#PPUTUSBQΛ࢖ͬͯΈΔ ‣ 5XJUUFS#PPUTUSBQʹ͓͚ΔάϦου͸ɺίϥϜ͕جຊ ‣ ͷ෼ׂ͔Βɺ༷ʑͳ૊߹͕ͤੜ·ΕΔ ! ! ! ! !

    ! ! ! ! ! ‣ ͜ͷγεςϜΛར༻ͯ͠ϨΠΞ΢τ͍ͯ͘͠

  9. 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>

  10. 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>

  11. 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> ...

  12. 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> ...

  13. 5XJUUFS#PPUTUSBQΛ࢖ͬͯΈΔ ‣ ஈ૊ͷϨΠΞ΢τ͕؆୯ʹ࣮ݱ

  14. 5XJUUFS#PPUTUSBQΛ࢖ͬͯΈΔ ‣ ׬੒ͨ͠ϖʔδͷαϯϓϧ

  15. 5XJUUFS#PPUTUSBQΛ࢖ͬͯΈΔ ‣ ஈ૊ͷ׬੒ͨ͠αϯϓϧΛҎԼ͔Βμ΢ϯϩʔυ ‣ ࣮ࡍʹίʔυΛΈͳ͕Β෮श͠·͢ http://goo.gl/iQGCra

  16. 5XJUUFS#PPUTUSBQ ϖʔδαϯϓϧΛղੳ͢Δ

  17. ϖʔδαϯϓϧΛղੳ͢Δ ‣ ΦϑΟγϟϧϖʔδʹɺ࣮ࡍͷ׆༻ྫͷςϯϓϨʔτ͕ެ։͞Ε͍ͯΔ ‣ ͜ΕΛࢀߟʹ͢Δͱɺ࣮ࡍʹϖʔδͷΠϝʔδ͕௫Έ΍͍͢

  18. ϖʔδαϯϓϧΛղੳ͢Δ ‣ 4UBSUFSUFNQMBUF

  19. ϖʔδαϯϓϧΛղੳ͢Δ ‣ #BTJDNBSLFUJOHTJUF

  20. ϖʔδαϯϓϧΛղੳ͢Δ ‣ 'MVJEMBZPVU !

  21. ϖʔδαϯϓϧΛղੳ͢Δ ‣ 'MVJEMBZPVU

  22. ϖʔδαϯϓϧΛղੳ͢Δ ‣ 4UJDLZGPPUFS

  23. ϖʔδαϯϓϧΛղੳ͢Δ ‣ $BSPVTFMKVNCPUSPO

  24. 5XJUUFS#PPUTUSBQ σβΠϯΛΧελϚΠζ

  25. σβΠϯΛΧελϚΠζ ‣ #PPUTUSBQͷ$44͸͔ͳΓෳࡶ ‣ ௚઀ฤू͢Δͷ͸ͪΐͬͱେมʜ

  26. σβΠϯΛΧελϚΠζ ‣ #PPUTUSBQͷϖʔδʹΧελϚΠζ༻ϝχϡʔ͕͋Δ ‣ ޷ΈʹԠͯ͡มߋͯ͠ɺ$44μ΢ϯϩʔυͯ͠ೖΕସ͑Δ

  27. σβΠϯΛΧελϚΠζ ‣ ྫ͑͹ɺഎܠͱจࣈͷ৭Λมߋ

  28. σβΠϯΛΧελϚΠζ ‣ 5XJUUFSͷΦϑΟγϟϧͱ͸ผʹɺ༷ʑͳΧελϚΠζ༻ςϯϓϨʔτ͕ଘࡏ͢Δ ‣ ༗ྉͷ΋ͷ΋͋Δ͕ɺϑϦʔͷ΋ͷ΋ ‣ ޮՌతʹར༻ͯ͠ΈΔ

  29. #MBDL5JF ‣ IUUQXXXCMBDLUJFDP ‣ ϙʔτϑΥϦΦʹ͓εεϝͷςʔϚΛूΊͨαΠτ

  30. #MBDL5JF ‣ #MBDL5JF͔Β͓ؾʹ͍ΓͷςʔϚΛμ΢ϯϩʔυ ‣ ςΩετɺࣸਅɺը૾ɺϑΥϯτͳͲΛมߋͯࣗ͠෼ͷ޷ΈͷσβΠϯʹ

  31. #MBDL5JF ‣ ྫ͑͹ɺ4UVEJPςϯϓϨʔτΛμ΢ϯϩʔυ

  32. #MBDL5JF ‣ ΧελϚΠζͯ͠ɺࣗ෼ͷϖʔδʹ