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

Webフレームワークを使う - Twitter Boostrap

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Atsushi Tadokoro Atsushi Tadokoro
May 28, 2014
Technology
370
1

Webフレームワークを使う - Twitter Boostrap

Avatar for Atsushi Tadokoro

Atsushi Tadokoro

May 28, 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
Oracle AI Database@AWS：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
4
2.8k
2026.06.13_AI時代に事業会社が「SIer出身エンジニア」を求める理由 / Why Businesses Seek Engineers with a System Integrator Background in the AI ​​Era
Avatar for jumpei_ikegami jumtech
0
520
Mastering Ruby Box
Avatar for Satoshi Tagomori tagomoris
3
150
AI-DLCを活用した高品質・安全なAI駆動開発実践 / AI Driven Development with AI-DLC
Avatar for 吉田真吾 yoshidashingo
0
140
Diagnosing performance problems without the guesswork
Avatar for Elena Tanasoiu elenatanasoiu
0
170
トークン数だけでは測れない — Claude Code 組織展開の効果検証から学んだこと
Avatar for Masaki Kubota makikub
0
130
AI と創る新たな世界 / A New World Created with AI
Avatar for Kenji Saito ks91
PRO
0
110
ChatworkとBPaaS 異なる特性で学んだAI機能開発の ベストプラクティス
Avatar for kubell kubell_hr
2
2.8k
Chart.js が簡単に使えるようになっていたので OGP 画像生成に使った話
Avatar for すずとも kamekyame
0
160
「速く作る」から「正しく作る」へ ─ 生成AI時代の開発フロー改革の ロードマップと実行 ─
Avatar for starfish719 starfish719
0
7.9k
データ基盤をDataformで整えた話 〜 開発環境を添えて 〜
Avatar for Takanobu Nozawa takapy
0
110
イベントストーミングとKiroの仕様駆動開発で実現する要件の認識合わせプロセス
Avatar for syobochim syobochim
7
1.2k

Featured

See All Featured
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4.3k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
8.2k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3.2k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
247
13k
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
2
690
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
32
2.9k
Agile Actions for Facilitating Distributed Teams - ADO2019
Avatar for Mark Kilby mkilby
0
200
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
231
23k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
9.1k
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
Avatar for Aleyda Solis aleyda
1
1.3k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
163
24k
Money Talks: Using Revenue to Get Sh*t Done
Avatar for Nikki Halliwell nikkihalliwell
0
240

Transcript

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

  2. ࠓ೔ͷ಺༰ ‣ ΑΓຊ֨తͳ8FCσβΠϯϔ ‣ ʮ$44ϑϨʔϜϫʔΫʯΛ͔ͭͬͯΈΔ ‣ ࠓճ͸ɺ5XJUUFS#PPUTUSBQΛ୊ࡐʹ

  3. 5XJUUFS#PPUTUSBQͱ͸

  4. 5XJUUFS#PPUTUSBQͱ͸ ‣http://getbootstrap.com/

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

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

  7. 5XJUUFS#PPUTUSBQΛ࢖ͬͯΈΔ

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

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

  10. 5XJUUFS#PPUTUSBQΛ࢖ͬͯΈΔ ‣ ಋೖ͸؆୯ɺԼهͷϦϯΫΛೖΕΔ͚ͩ <link href="css/bootstrap.min.css" rel="stylesheet">

  11. 5XJUUFS#PPUTUSBQΛ࢖ͬͯΈΔ ‣ Ͱ͸ૣ଎ɺ#PPUTUSBQΛೖΕͨ)5.-ͷϕʔεΛ࡞੒ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap

    Template</title> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> ! </body> </html>

  12. 5XJUUFS#PPUTUSBQΛ࢖ͬͯΈΔ ‣ ࣍ʹɺ#PPUTUSBQͷίϯςϯτશମΛɺDMBTTDPOUBJOFSͷEJWཁૉͰғΉ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap

    Template</title> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="container"> </div> </body> </html>

  13. 5XJUUFS#PPUTUSBQΛ࢖ͬͯΈΔ ‣ )Ͱݟग़͠Λͭͬͯ͘ΈΔ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap

    Template</title> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="container"> <h1>Twitter Bootstrapͷςετ</h1> </div> </body> </html>

  14. 5XJUUFS#PPUTUSBQΛ࢖ͬͯΈΔ ‣ 5XJUUFS#PPUTUSBQͰͷϨΠΞ΢τ͸ʮάϦουγεςϜʯ͕جຊͱͳ͍ͬͯΔ ‣ Grid Systems in Graphic Design/Raster Systeme

    Fur Die Visuele Gestaltung

  15. 5XJUUFS#PPUTUSBQΛ࢖ͬͯΈΔ ‣ ը໘্ʹՍۭͷॎԣઢΛΨΠυϥΠϯͱͯ͠Ҿ͖ɺͦͷϒϩοΫ͝ͱʹจࣈ΍ਤ൛Λ ഑ஔ͢Δ

  16. 5XJUUFS#PPUTUSBQΛ࢖ͬͯΈΔ ‣ άϦουγεςϜ ‣ ΤσΟτϦΞϧ ग़൛ σβΠϯͷ෼໺Ͱ͸ɺϨΠΞ΢τͷجຊͱͳ͍ͬͯΔ ‣ 8FCσβΠϯʹ͓͍ͯ΋ɺάϦουγεςϜ͸σβΠϯ΍ϨΠΞ΢τͷجຊ

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

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

  18. 5XJUUFS#PPUTUSBQΛ࢖ͬͯΈΔ ‣ ͨͱ͑͹ɺ  ͷίϥϜΛ૊ΜͰΈΔ ‣ ·ͣίϥϜͷઌ಄ΛEJWDMBTTSPXͰғΉ <!DOCTYPE html> <html>

    <head> <meta charset="utf-8"> <title>Bootstrap Template</title> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="container"> <h1>Twitter Bootstrapͷςετ</h1> <div class="row"> </div> </div> </body> </html>

  19. 5XJUUFS#PPUTUSBQΛ࢖ͬͯΈΔ ‣ EJWDMBTTSPXͷதʹ ‣ ͭͷEJWDMBTTTQBOΛೖΕΔ ... ! <div class="row"> <div

    class="span4"> </div> <div class="span4"> </div> <div class="span4"> </div> </div> ! ...

  20. 5XJUUFS#PPUTUSBQΛ࢖ͬͯΈΔ ‣ ͦΕͧΕͷEJWDMBTTTQBOͷதʹɺ಺༰Λهड़ ... ! <div class="row"> <div class="span4"> <h2>Span

    4</h2> <p> ͜ͷίϥϜ͸ɺ4ͭͷεύϯ... </p> </div> <div class="span4"> <h2>Span 4</h2> <p> ͜ͷίϥϜ͸ɺ4ͭͷεύϯ... </p> </div> <div class="span4"> <h2>Span 4</h2> <p> ͜ͷίϥϜ͸ɺ4ͭͷεύϯ... </p> </div> </div> ! ...

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

  22. 5XJUUFS#PPUTUSBQΛ࢖ͬͯΈΔ ‣ ͍Ζ͍Ζͳύλʔϯͷஈ૊ʹ௅ઓͯ͠ΈΔ

  23. 5XJUUFS#PPUTUSBQΛ࢖ͬͯΈΔ ‣ ๯಄ͷ)ΛΑΓϔομʔΒ͘͠ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap

    Template</title> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="container"> <div class="hero-unit"> <h1>Hello Twitter Bootstrap!!</h1> <p>͜ͷϖʔδ͸ɺTwitter BootstrapΛར༻ͯ͠࡞੒ͨ͠ϖʔδͷαϯϓϧͰ͢ɻ</p> <p><a class="btn btn-primary btn-large">΋ͬͱৄ͘͠</a></p> </div> ...

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

  25. 5XJUUFS#PPUTUSBQΛ࢖ͬͯΈΔ ‣ ࠓ೔͸͜͜·Ͱ ‣ ࣍ճ͸σβΠϯΛΧελϚΠζͯ͠ɺΑΓચ࿅͞ΕͨσβΠϯʹ͍͖ͯ͠·͢