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
Project Lab Squirrel #2
Search
Mu-An Chiou
May 25, 2014
Technology
1
610
Project Lab Squirrel #2
Location: My home
Time: 25 May 2014 (Sun)
Mu-An Chiou
May 25, 2014
Tweet
Share
More Decks by Mu-An Chiou
See All by Mu-An Chiou
Details on <details>
muan
0
330
Publishing and Hosting on GitHub pages
muan
4
140
Having no patience(Japanese)
muan
1
370
JSDC
muan
2
550
Design with Code
muan
5
540
Having no patience
muan
1
290
Design in GitHub
muan
5
370
Project Lab Squirrel #1
muan
8
840
A girl with no patience
muan
18
1.9k
Other Decks in Technology
See All in Technology
【CEDEC2025】大規模言語モデルを活用したゲーム内会話パートのスクリプト作成支援への取り組み
cygames
PRO
1
500
モバイルゲームの開発を支える基盤の歩み ~再現性のある開発ラインを量産する秘訣~
qualiarts
0
880
メモ整理が苦手な者による頑張らないObsidian活用術
optim
1
160
スプリントレビューを効果的にするために
miholovesq
9
1.7k
alecthomas/kong はいいぞ
fujiwara3
6
1.2k
Perlアプリケーションで トレースを実装するまでの 工夫と苦労話
masayoshi
0
160
私とAWSとの関わりの歩み~意志あるところに道は開けるかも?~
nagisa53
1
140
TypeScript 上達の道
ysknsid25
23
4.9k
ML Pipelineの開発と運用を OpenTelemetryで繋ぐ @ OpenTelemetry Meetup 2025-07
getty708
0
320
大規模組織にAIエージェントを迅速に導入するためのセキュリティの勘所 / AI agents for large-scale organizations
i35_267
6
350
AI によるドキュメント処理を加速するためのOCR 結果の永続化と再利用戦略
tomoaki25
0
210
VLMサービスを用いた請求書データ化検証 / SaaSxML_Session_1
sansan_randd
0
140
Featured
See All Featured
Being A Developer After 40
akosma
90
590k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
720
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
A Tale of Four Properties
chriscoyier
160
23k
Done Done
chrislema
185
16k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Rails Girls Zürich Keynote
gr2m
95
14k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Bash Introduction
62gerente
613
210k
Thoughts on Productivity
jonyablonski
69
4.8k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Transcript
ḱᙿᖳᔚᩲᤍ Project Lab Squirrel #2
layout
FROM IMAGE TO HTML ᷡṍኈ
<body> <div class="menu"> <div class="logo"><img src="/logo.png"></div> <a href="">LESSONS</a> <a href="/participants">PARTICIPANTS</a>
<a href="">ABOUT</a> </div> <div class="content"> ⼀一些內容在這裡頭。 </div> </body>
<body> <div class="menu"> <div class="logo"><img src="/logo.png"></div> <a href="">LESSONS</a> <a href="/participants">PARTICIPANTS</a>
<a href="">ABOUT</a> </div> <div class="content"> ⼀一些內容在這裡頭。 </div> </body>
<body> <div class="menu"> <div class="logo"><img src="/logo.png"></div> <a href="">LESSONS</a> <a href="/participants">PARTICIPANTS</a>
<a href="">ABOUT</a> </div> <div class="content"> ⼀一些內容在這裡頭。 </div> </body>
<body> <div class="menu"> <div class="logo"><img src="/logo.png"></div> <a href="">LESSONS</a> <a href="/participants">PARTICIPANTS</a>
<a href="">ABOUT</a> </div> <div class="content"> ⼀一些內容在這裡頭。 </div> </body>
<body> <div class="menu"> <div class="logo"><img src="/logo.png"></div> <a href="">LESSONS</a> <a href="">PARTICIPANTS</a>
<a href="">ABOUT</a> </div> <div class="content"> ⼀一些內容在這裡頭。 </div> </body>
<div class="content"> ... </div> .content { padding: 50px; height: 100%;
overflow: scroll; } <div class="menu"> ... </div> .menu { float: left; width: 20%; height: 100%; } TADA!
Wait, float?
JUST LIKE WRAPPING! WORD. Ⴐ᠏የ᠏Ⴐ᠏የ
CSS BOX MODEL ᷱᥘኦṞ
CSS BOX MODEL ᷱᥘኦṞ box-sizing: content-box CONTENT PADDING BORDER
MARGIN WIDTH
CSS BOX MODEL ᷱᥘኦṞ box-sizing: border-box CONTENT PADDING BORDER
MARGIN WIDTH
GIT
GITHUB FOR MAC/WINDOWS GIT ON THE COMMAND LINE
Git REPOSITORY ఔࣜࢿྉᇄ BRANCH ࢧฏߦੈք COMMIT ঝఏަ
DIFF ࠩҟ
ADD a BRANCH ᙮ᬓᵪḝᕴ
WOrking area STAGING AREA GIT DIRECTORY modified: index.html modified: style.css
WOrking area STAGING AREA GIT DIRECTORY modified: index.html modified: style.css
WOrking area STAGING AREA GIT DIRECTORY modified: index.html modified: style.css
git add css/style.css ਗЪ ᏦࣩЗѧ
WOrking area STAGING AREA GIT DIRECTORY modified: index.html modified: style.css
WOrking area STAGING AREA GIT DIRECTORY modified: index.html modified: style.css
WOrking area STAGING AREA GIT DIRECTORY modified: index.html git checkout
style.css ਗЪ ᏦࣩЗѧ modified: style.css
WOrking area STAGING AREA GIT DIRECTORY modified: index.html modified: style.css
WOrking area STAGING AREA GIT DIRECTORY modified: index.html modified: style.css
git add css/style.css ਗЪ ᏦࣩЗѧ
WOrking area STAGING AREA GIT DIRECTORY modified: index.html modified: style.css
WOrking area STAGING AREA GIT DIRECTORY modified: index.html git commit
-m “修改css” ਗЪ ܸ֛ৃࢹ modified: style.css ৃࢹ
WOrking area STAGING AREA GIT DIRECTORY modified: index.html modified: style.css
WOrking area STAGING AREA GIT DIRECTORY modified: index.html 83ca17b style.css
commit sha
PUBLISH BRANCH ᓓ᧵ᵪḝᕴ
PULL REQUEST
PULL REQUEST
TADA!
᷀ᮈ Project Lab Squirrel #2