Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

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

Avatar for Atsushi Tadokoro Atsushi Tadokoro
June 04, 2014
Technology
540
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
470
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.7k
TumblrでWebサイトを作成
Avatar for Atsushi Tadokoro tado
0
730
bmaw14 第2回: Touchéセンサーを使う1 Touchéセンサーを作成する
Avatar for Atsushi Tadokoro tado
0
2.3k

Other Decks in Technology

See All in Technology
品質と信頼性を地続きにする
Avatar for gr1m0h grimoh
2
900
What the customer really needed
Avatar for Yasunobu Kawaguchi kawaguti
PRO
3
220
現場で役立つ技術負債の効果的な返済方法
Avatar for 増田 亨 masuda220
PRO
9
5k
負債のメタファと2026年 / Debt Metaphor in Agentic Engineering Age 202609 Edition
Avatar for Takuto WADA twada
PRO
10
4.8k
AIエージェントの自己改善をどう設計するか / How to Design Self-Improvement for AI Agents
Avatar for 223 22mi
25
17k
.NET WebAssemblyで実現するクライアントサイドAI推論：NuGetからViteまで、2つのエコシステムを繋ぐビルド戦略
Avatar for Yusuke Yamada yamachu
0
420
登壇の自信を奪う3匹のオバケ / 3 Ghosts That Rob You of Your Confidence in Public Speaking
Avatar for Pauli pauli
9
1.1k
Azure Serverless 2026：Production-ready な AI エージェント基盤 / Azure Serverless 2026: Production-Ready AI Agent Platform
Avatar for miyake miyake
2
490
Making AI Agents Safe and Fast- Jev, Obsidian, and the Meta-Harness
Avatar for Daisuke Masuda x5gtrn
PRO
0
110
絵ではじめるKubernetesセキュリティ
Avatar for Aoi Takahashi aoi1
4
690
Deployment の 先にある AI Agent 基盤 - kagent vNext、Agent Substrate、Hermes から読み解く Agent Runtime の現在地 / k8s-matsuri-2-ai-agent-platform-amsy810
Avatar for Masaya Aoyama (@amsy810) masayaaoyama
4
700
新機種発売前に見直そう！端末移行で再ログインが要るアプリ・要らないアプリは何が違うのか 〜シームレスに再開できる設計と実装〜
Avatar for ZOZO Developers zozotech
PRO
0
220

Featured

See All Featured
sira's awesome portfolio website redesign presentation
Avatar for ElsiraPls elsirapls
0
420
The SEO identity crisis: Don't let AI make you average
Avatar for Varn varn
0
560
Game over? The fight for quality and originality in the time of robots
Avatar for Wayne Barker wayneb77
1
290
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.8k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
8k
End of SEO as We Know It (SMX Advanced Version)
Avatar for Michael King ipullrank
3
4.4k
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
3.2k
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
Avatar for AKADEMIYA2063 akademiya2063
PRO
1
360
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
254
22k
[SF Ruby Conf 2025] Rails X
Avatar for Vladimir Dementyev palkan
3
1.4k
SEO for Brand Visibility & Recognition
Avatar for Aleyda Solis aleyda
0
4.7k

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 ‣ ΧελϚΠζͯ͠ɺࣗ෼ͷϖʔδʹ