Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
CSSフレームワークを使う-2 Twitter Bootstrapのカスタマイズ
Search
Atsushi Tadokoro
June 04, 2014
Technology
530
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
CSSフレームワークを使う-2 Twitter Bootstrapのカスタマイズ
Atsushi Tadokoro
June 04, 2014
More Decks by Atsushi Tadokoro
See All by Atsushi Tadokoro
デザイン言語総合講座 - クリエイティブ・コーディング
tado
0
2.8k
Tumblrを使う4 - Webサイトを構成する、固定ページとタグ
tado
0
1.8k
Tumblrを使う3- カスタムHTMLテーマの作成
tado
0
470
Processing.jsによるデータの可視化と生成的表現
tado
1
1.9k
Tumblrを使う2 - テーマをカスタマイズする
tado
0
380
Touchéの仕組みを理解 - ProcessingとArduinoの連携
tado
0
2.4k
Github Pagesで作品を公開、Automatic Page Generatorでサイトを生成
tado
0
1.6k
TumblrでWebサイトを作成
tado
0
730
bmaw14 第2回: Touchéセンサーを使う1 Touchéセンサーを作成する
tado
0
2.3k
Other Decks in Technology
See All in Technology
AIコーディングの次。コードレビューと理解負荷を解消して組織の開発生産性を高める
moongift
PRO
2
2.5k
Webアクセシビリティ入門 2026
recruitengineers
PRO
3
550
Sansan Engineering Unit 紹介資料
sansan33
PRO
1
4.9k
[しろおび夏祭り2026] チャットするAIから、作業するAIへ - 使われ方の変化と、その裏側で起きていること
kk0n
0
1.7k
サイバー捜査員研修(前半)
nomizone
1
2k
グローバル基準のSREは、運用現場でどう機能したか:成熟度アセスメントの実践 / SRE NEXT 2026
sorawatanabe
0
210
【CEDEC2026】コードレビュー支援ツール開発から学ぶ:LLMを用いた業務システムの実践的な運用設計と誤出力対策
cygames
PRO
0
680
つくって納得、つかって実感! 大規模言語モデルことはじめ ver2.0
recruitengineers
PRO
4
1.6k
Forza Horizon 6 のテレメトリ機能で 自動運転に使えそうな学習データを集める話
henjin0
0
170
メルカリのグローバルアプリで挑んだ AlloyDB 運用と課題解決の実践記
hatappi
0
250
LanceDB入門
mocobeta
7
420
関東Kaggler会発表資料
takoi
1
220
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
28
2.7k
Side Projects
sachag
455
43k
Rails Girls Zürich Keynote
gr2m
96
14k
Product Roadmaps are Hard
iamctodd
55
12k
Facilitating Awesome Meetings
lara
57
7.1k
KATA
mclloyd
PRO
35
15k
Redefining SEO in the New Era of Traffic Generation
szymonslowik
1
380
Fireside Chat
paigeccino
42
4k
How to train your dragon (web standard)
notwaldorf
97
6.7k
Conquering PDFs: document understanding beyond plain text
inesmontani
PRO
4
2.9k
The Cult of Friendly URLs
andyhume
79
7k
Making Projects Easy
brettharned
120
6.7k
Transcript
ܳज़ใԋशσβΠϯ 8FC $44ϑϨʔϜϫʔΫΛ͏ 5XJUUFS#PPUTUSBQͷΧελϚΠζ ݄ ౦ژज़େֶܳज़ใηϯλʔ ".$ ୲ɿాॴ३
લճͷ෮श
5XJUUFS#PPUTUSBQͱ ‣IUUQHFUCPPUTUSBQDPN
5XJUUFS#PPUTUSBQͱ ‣ 5XJUUFS#PPUTUSBQɿ ‣ 5XJUUFS͕ࣾ։ൃʗఏڙ͢ΔΦʔϓϯιʔεͳʮ$44ϑϨʔϜϫʔΫʯ ‣ ؆୯ʹߴͳ8FCσβΠϯΛ͢Δ͜ͱ͕Մೳ ‣ ݄ݱࡏͷόʔδϣϯɺ7FSTJPO
5XJUUFS#PPUTUSBQͱ ‣ #PPUTUSBQΛ༻ͨ͠αΠτ ‣ http://expo.getbootstrap.com/ Ͱଟհ
5XJUUFS#PPUTUSBQΛͬͯΈΔ ‣ ·ͣɺ#PPUTUSBQΛμϯϩʔυ ‣ http://getbootstrap.com/ ! ‣ %PXOMPBE#PPUTUSBQϘλϯ͔Β
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
5XJUUFS#PPUTUSBQΛͬͯΈΔ ‣ 5XJUUFS#PPUTUSBQʹ͓͚ΔάϦουɺίϥϜ͕جຊ ‣ ͷׂ͔Βɺ༷ʑͳ߹͕ͤੜ·ΕΔ ! ! ! ! !
! ! ! ! ! ‣ ͜ͷγεςϜΛར༻ͯ͠ϨΠΞτ͍ͯ͘͠
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>
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>
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> ...
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> ...
5XJUUFS#PPUTUSBQΛͬͯΈΔ ‣ ஈͷϨΠΞτ͕؆୯ʹ࣮ݱ
5XJUUFS#PPUTUSBQΛͬͯΈΔ ‣ ͨ͠ϖʔδͷαϯϓϧ
5XJUUFS#PPUTUSBQΛͬͯΈΔ ‣ ஈͷͨ͠αϯϓϧΛҎԼ͔Βμϯϩʔυ ‣ ࣮ࡍʹίʔυΛΈͳ͕Β෮श͠·͢ http://goo.gl/iQGCra
5XJUUFS#PPUTUSBQ ϖʔδαϯϓϧΛղੳ͢Δ
ϖʔδαϯϓϧΛղੳ͢Δ ‣ ΦϑΟγϟϧϖʔδʹɺ࣮ࡍͷ׆༻ྫͷςϯϓϨʔτ͕ެ։͞Ε͍ͯΔ ‣ ͜ΕΛࢀߟʹ͢Δͱɺ࣮ࡍʹϖʔδͷΠϝʔδ͕௫Έ͍͢
ϖʔδαϯϓϧΛղੳ͢Δ ‣ 4UBSUFSUFNQMBUF
ϖʔδαϯϓϧΛղੳ͢Δ ‣ #BTJDNBSLFUJOHTJUF
ϖʔδαϯϓϧΛղੳ͢Δ ‣ 'MVJEMBZPVU !
ϖʔδαϯϓϧΛղੳ͢Δ ‣ 'MVJEMBZPVU
ϖʔδαϯϓϧΛղੳ͢Δ ‣ 4UJDLZGPPUFS
ϖʔδαϯϓϧΛղੳ͢Δ ‣ $BSPVTFMKVNCPUSPO
5XJUUFS#PPUTUSBQ σβΠϯΛΧελϚΠζ
σβΠϯΛΧελϚΠζ ‣ #PPUTUSBQͷ$44͔ͳΓෳࡶ ‣ ฤू͢Δͷͪΐͬͱେมʜ
σβΠϯΛΧελϚΠζ ‣ #PPUTUSBQͷϖʔδʹΧελϚΠζ༻ϝχϡʔ͕͋Δ ‣ ΈʹԠͯ͡มߋͯ͠ɺ$44μϯϩʔυͯ͠ೖΕସ͑Δ
σβΠϯΛΧελϚΠζ ‣ ྫ͑ɺഎܠͱจࣈͷ৭Λมߋ
σβΠϯΛΧελϚΠζ ‣ 5XJUUFSͷΦϑΟγϟϧͱผʹɺ༷ʑͳΧελϚΠζ༻ςϯϓϨʔτ͕ଘࡏ͢Δ ‣ ༗ྉͷͷ͋Δ͕ɺϑϦʔͷͷ ‣ ޮՌతʹར༻ͯ͠ΈΔ
#MBDL5JF ‣ IUUQXXXCMBDLUJFDP ‣ ϙʔτϑΥϦΦʹ͓εεϝͷςʔϚΛूΊͨαΠτ
#MBDL5JF ‣ #MBDL5JF͔Β͓ؾʹ͍ΓͷςʔϚΛμϯϩʔυ ‣ ςΩετɺࣸਅɺը૾ɺϑΥϯτͳͲΛมߋͯࣗ͠ͷΈͷσβΠϯʹ
#MBDL5JF ‣ ྫ͑ɺ4UVEJPςϯϓϨʔτΛμϯϩʔυ
#MBDL5JF ‣ ΧελϚΠζͯ͠ɺࣗͷϖʔδʹ