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
Web Design Turorial - Cafe Website
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Naoki Kanazawa
January 21, 2014
Design
1
180
Web Design Turorial - Cafe Website
Slides for schoo WEB-campus
http://schoo.jp/class/251
Naoki Kanazawa
January 21, 2014
Tweet
Share
More Decks by Naoki Kanazawa
See All by Naoki Kanazawa
Design Door - Be Startup
designless
0
80
Design MOCKUP
designless
3
370
Design 4 Hack
designless
2
280
DESIGN FOR EVERYONE
designless
10
560
Document Design by Adobe Illustrator - 1
designless
2
230
Document Design by Adobe Illustrator - 2
designless
0
100
Document Design by Adobe Illustrator - 3
designless
0
100
Prototyping by Adobe Photoshop
designless
1
140
Prototyping by Adobe Illustrator
designless
1
130
Other Decks in Design
See All in Design
「稼ぐ」だけでなく 「還す」ためのデザイン / Designship2025
culumu
1
570
OSO2025-マサカリと太陽:伝え方の情報デザイン
majimasachi
0
680
Vibe Coding デザインシステム
poteboy
3
1.6k
Treasure_Hunting
solmetts
0
240
アイデアを加速させる!Firefly ボードで発想の幅を広げよう
connecre
1
300
Connpass-Xperia_Camera_App_by_HCD.pdf
sony
0
480
“ことば”が苦手なデザイナーへの処方箋 「なんとなく」から「意図」へ、 デザインを動かす言葉の力
mixi_design
PRO
1
190
Goodpatch Tour💙 / We are hiring!
goodpatch
31
1M
ユーザー体験は細部に宿る -ウィジェットQAの挑戦と気づき- / UX is in the details: Challenges and Learnings from Widget QA
bitkey
PRO
0
140
2026年、デザイナーはなにに賭ける?
0b1tk
0
480
組織はみんなでつくる。デザイナーが仕掛ける急拡大する組織のカルチャーづくり
mkasumi
0
1.1k
結びながら、ひらく - にじむ境界のデザイン
hilokifigma
3
1.3k
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
97
6.5k
The World Runs on Bad Software
bkeepers
PRO
72
12k
Why Our Code Smells
bkeepers
PRO
340
58k
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
katarinadahlin
PRO
0
3.4k
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
auna
0
53
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.6k
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
sarafernandez
1
1.3k
For a Future-Friendly Web
brad_frost
182
10k
The Limits of Empathy - UXLibs8
cassininazir
1
210
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
uxyall
0
360
How to Ace a Technical Interview
jacobian
281
24k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
tammyeverts
2
190
Transcript
݄ TDIPP8&#DBNQVT ۚᖒؽ カ フ ェ のWebサイ ト を作 っ
て 8FCσβ Π ϯ ͱ جૅ ٕज़ΛֶͿ ͷ
ۚᖒؽ Naoki Kanazawa http://designless.net
8FCΛθϩ͔Β ࡞ͬͨ ͜ ͱ͕͋Γ ·͔͢ ʁ
8FCΛθϩ͔Β ࡞Δ ͜ ͱͷҙຯͱ ʁ
खࣄ
ಡΉ ༡Ϳ ࡞Δ ֶͿ Reading Playing
Making Studying
ಡΉ
IUUQKVTUJOKBDLTPODBXPSET@KBQBOIUNM ͜Ε Σ ϒϖʔδͰ͢
ઃܭਤʹਤ
HUMAN WEB COMPUTER
SERVER CLIENT
)5.- $44 +"7"4$3*15 "%0#& 803%13& 1)1 4,*--61
4,*--61
༡Ϳ
IUUQEFTJHOMFTTOFUFEJUPS 8FCσβΠ ϯͷ࠭
<λά>Hello World!<λά> HTML html, h1, h2, h3 h4, h5, h6,
p, ul, li, a, img, div, span, em, strong...
<html> <head> ϝλใ </head> <body> <h1>࠷ॳʹ͍͑ͨ͜ͱ</h1> <p>આ໌ͳͲͷจষ</p> <h2>࣍ʹ͍͑ͨ͜ͱ</h2> <p>આ໌ͳͲͷจষ</p> <ul>
<li>άϧʔϓ</li> <li>άϧʔϓ</li> <li>άϧʔϓ</li> </ul> </body> </html> HTML ίϯϐϡ ʔλʹ͑ Δ ͱ ͍͏ ͜ ͱ
CSS ηϨΫλ { ϓϩύςΟ : ;} color, background, font-size,
text-align width, height, margin, padding, border float, clear, position...
ਓʹ͞ ͍͠০ͱ Ϩ Π Ξ τ CSS
JavaScript Π ϯ λϥΫγ ϣ ϯͳԋग़ͱ֦ு
jQuery ˈ(ηϨΫλ) .ϝιου(ύϥϝʔλ) click, hover addClass, removeClass fade, toggle, animate
H T M L C S S J S ༰
০ ԋग़
IMAGE
index.html style.css flower.jpg CSS images
PATH σΟϨΫτϦߏ ϑΥϧμ/ϑΝΠϧ ໊.֦ு ࢠ ../ϑΥϧμ/ϑΝΠϧ ໊.֦ு ࢠ
࡞Δ
TOOL ϒϥβ ʴ ΤσΟλ Google Chrome Mozilla Firefox CotEditor terapad
IUUQEFTJHOMFTTOFUEBUBTDIPP[JQ ૉࡐͷμ ϯϩʔ υ
ϖϦΧϯΧϑΣ _resource _design _www
ͳͥɺ Χϑ Σͷ8FCαΠ τ ͳͷ͔ ʁ
Ԥ ੨ࢁ Pelican Cafe www.pelican-cafe.com
BUSINESS VISUAL CODE CONCEPT
HTML = ใߏ λάͷೖΕࢠ 1
ଐੑ 2 src, href, class, id
ϘοΫεϞσϧ 3 reset.css
jQuer yϓϥάΠϯ 4 bxslider, colorbox
jQuer y ֻ͚ 5 fade, scroll,
Google Map API 6
ϨεϙϯγϒɾΣϒσ βΠϯ 7 media queries, fluid
ֶͿ
ࢼߦࡨޡ
SANDBOX 8FCσβΠ ϯͷ࠭
ANNTENA Π ϯϓ ο τͷΈ
8FCαΠ τ Ͳ Μͳϝ σ Ο Ξ ʁ Ϩϙʔ τ՝