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

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

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

Other Decks in Technology

See All in Technology
[しろおび夏祭り2026] チャットするAIから、作業するAIへ - 使われ方の変化と、その裏側で起きていること
Avatar for kk0n kk0n
0
1.7k
Forza Horizon 6 のテレメトリ機能で 自動運転に使えそうな学習データを集める話
Avatar for henjin0 henjin0
0
150
Issue設計から始める仕様駆動開発 / 20260731 Mizuki Hirata
Avatar for SHIFT EVOLVE shift_evolve
PRO
1
150
メルカリのグローバルアプリで挑んだ AlloyDB 運用と課題解決の実践記
Avatar for hatappi hatappi
0
240
20260807_第6回_関東kaggler会LT_claw系bot xangiと始める、"寂しくない" kaggle
Avatar for suguuuuuすぐー sugupoko
0
220
LLM・AIエージェントシステムベストプラクティス
Avatar for shibuiwilliam shibuiwilliam
2
580
名刺メーカーDevグループ 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
1.2k
【５分でわかる】セーフィー エンジニア向け会社紹介
Avatar for Safie safie_recruit
0
53k
AI ネイティブな組織に Gemini Enterprise Agent Platform がなぜ必要なのか
Avatar for Asei Sugiyama asei
1
190
Digitization部 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
2
7.7k
侵入は突然に 〜 IoTマルウェアと悪用される家庭の機器 ～ / When Intrusion Strikes: IoT Malware and the Abuse of Home Devices
Avatar for NTT docomo Business nttcom
0
1.6k
AIコーディングの次。コードレビューと理解負荷を解消して組織の開発生産性を高める
Avatar for Atsushi Nakatsugawa moongift
PRO
2
2.3k

Featured

See All Featured
B2B Lead Gen: Tactics, Traps & Triumph
Avatar for Sophie Logan marketingsoph
0
200
Designing for Timeless Needs
Avatar for Cassini Nazir cassininazir
1
430
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.7k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
2.9k
The Curse of the Amulet
Avatar for Matthew Lei leimatthew05
2
14k
Heart Work Chapter 1 - Part 1
Avatar for Lake Fama lfama
PRO
8
36k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.8k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
1.4k
Building a A Zero-Code AI SEO Workflow
Avatar for Ian Lurie portentint
PRO
0
660
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
Technical Leadership for Architectural Decision Making
Avatar for Kenny Baas-Schwegler baasie
3
470
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
66
8.5k

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