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

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

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
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
ClaudeCodeでセキュリティ監視業務を半自動化_1年の運用でわかったAIに任せる設計の5つのポイント
Avatar for KintoTech_Dev kintotechdev
4
1k
Does an AI Watermark Survive Translation?
Avatar for Es C machinetranslation
0
510
「ミスを許さない手順書」を作ってみた 〜 個人的にはこれ以上できることはあまりなさそう/20260827-ssmjp-operation-procedure-update
Avatar for opelab opelab
17
17k
顧客の要望は2次情報である 〜アンテナを張るFDEの構造論〜
Avatar for Noriaki Oji noriakioji
5
1.1k
Microsoft MVP プログラムを紹介するから目指す人増えてくれ
Avatar for Yuta Matsumura tsubakimoto_s
0
160
どんな手を使っても絶対間に合わせるスケジューラ
Avatar for asari asari194617
0
1.5k
Genie Code ワークショップ 応用編 / Genie-Code-Workshop-advanced
Avatar for Databricks Japan databricksjapan
PRO
0
200
【５分でわかる】セーフィー エンジニア向け会社紹介
Avatar for Safie safie_recruit
0
54k
EUDIWの枠組みを出発点に民間エコシステムの在り方を考える（OAuth/OIDC Numa (Immersion) Workshop 2026）
Avatar for OpenID Foundation Japan oidfj
PRO
0
420
Data Hubグループ 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
3.2k
[RSJ26] Flow as Flow: Modeling Robot Velocity Fields as Probability Velocity Fields
Avatar for Semantic Machine Intelligence Lab., Keio Univ. keio_smilab
PRO
0
170
bet_ai_day_2026_session02
Avatar for 株式会社AgenticSec agenticsec
0
200

Featured

See All Featured
Collaborative Software Design: How to facilitate domain modelling decisions
Avatar for Kenny Baas-Schwegler baasie
1
300
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
26k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
287
14k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.8k
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
Avatar for Tech SEO Connect techseoconnect
PRO
0
400
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
230k
Leo the Paperboy
Avatar for Maya Tellez mayatellez
8
2.2k
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
9
1.1k
What’s in a name? Adding method to the madness
Avatar for The Alliance productmarketing
PRO
24
4.1k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
59
6.9k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
191
12k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
35
2.6k

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Λ࢖ͬͯΈΔ ‣ ࠓ೔͸͜͜·Ͱ ‣ ࣍ճ͸σβΠϯΛΧελϚΠζͯ͠ɺΑΓચ࿅͞ΕͨσβΠϯʹ͍͖ͯ͠·͢