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
620
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
340
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
550
Having no patience
muan
1
290
Design in GitHub
muan
5
370
Project Lab Squirrel #1
muan
8
850
A girl with no patience
muan
18
1.9k
Other Decks in Technology
See All in Technology
今改めてServiceクラスについて考える 〜あるRails開発者の10年〜
joker1007
20
9.1k
Optuna DashboardにおけるPLaMo2連携機能の紹介 / PFN LLM セミナー
pfn
PRO
1
710
BtoBプロダクト開発の深層
16bitidol
0
140
バイブコーディングと継続的デプロイメント
nwiizo
2
350
入門 FormObject / An Introduction to FormObject #kaigionrails
expajp
2
1.4k
業務自動化プラットフォーム Google Agentspace に入門してみる #devio2025
maroon1st
0
170
そのグラフに「魂」は宿っているか? ~生成AI全盛期におけるデータ可視化手法とライブラリ比較~
negi111111
2
840
2重リクエスト完全攻略HANDBOOK / Double Request Handbook
shoheimitani
5
7.2k
SOC2取得の全体像
shonansurvivors
1
340
[2025-09-30] Databricks Genie を利用した分析基盤とデータモデリングの IVRy の現在地
wxyzzz
0
400
pprof vs runtime/trace (FlightRecorder)
task4233
0
140
自作LLM Native GORM Pluginで実現する AI Agentバックテスト基盤構築
po3rin
2
210
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
32
2.2k
The World Runs on Bad Software
bkeepers
PRO
71
11k
Side Projects
sachag
455
43k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.2k
Into the Great Unknown - MozCon
thekraken
40
2.1k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Balancing Empowerment & Direction
lara
4
660
Code Review Best Practice
trishagee
72
19k
GraphQLとの向き合い方2022年版
quramy
49
14k
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