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
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
79
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
【30人中30人が3ヶ月平均180万収入アップ】マズロー安達の弟子、成功事例集
maslow_akkun
0
120
#Dubois Challenge 2025: Economics
ajstarks
0
130
Cards | Storyboards
giofortuna_story
0
290
誰もがAIエージェントを"操作"したがる〜AIエージェントに求められるUX〜
ikeyatsu
2
1.8k
A brief & incomplete history of UX Design for the World Wide Web: 1989–2019
jct
1
210
Haley's adventure chase
ivettetwin
0
230
オリジナルのデザイン地図を作ってみた!〜OpenMapTilesとMaputnikを活用した地図スタイル〜
hjmkth
1
570
Crisp Code inc. ブランドガイドライン
so_kotani
1
190
Cyber Heart Online Book
hjnasby
0
120
オルタナUX | AIで高速化するのもいいけど品質も大事なんじゃない?というお話
iflection
3
910
パンくずリストかわいい(breadcrumb so cute)
ysuda
0
280
AI時代に、僕たちデザイナーはどう歩むか
kazuhirokimura
0
260
Featured
See All Featured
Scaling GitHub
holman
459
140k
For a Future-Friendly Web
brad_frost
179
9.8k
A Modern Web Designer's Workflow
chriscoyier
694
190k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Being A Developer After 40
akosma
90
590k
BBQ
matthewcrist
89
9.7k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Side Projects
sachag
455
42k
How to train your dragon (web standard)
notwaldorf
94
6.1k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
230
Facilitating Awesome Meetings
lara
54
6.4k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
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αΠ τ Ͳ Μͳϝ σ Ο Ξ ʁ Ϩϙʔ τ՝