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
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
Spacemarket Brand Guide
spacemarket
2
130
チームで事業価値を生み出す、プロアクティブなデザイナーになるための道のり/ Designship2025_Naya
root_recruit
0
380
文化のデザイン - Soft Impact of Design
atsushihomma
0
130
Ralph Penel Portfolio
ralphpenel
PRO
0
250
プロダクトデザイナーに学ぶ、『見る気が起きる』ダッシュボードの作り方 / Creating Engaging Dashboards: Lessons from Product Designers
yamamotoyuta
2
460
デザインを信じていますか
sekiguchiy
1
910
デザインコンテキストのバトンをつなぐ—AI時代のプロダクトマネジメント
kumanoayumi
5
760
デザイナーとエンジニアで 同じ山に登ろう
moco1013
0
110
これからの「Webデザイン」の話をしよう~デザイナーの私が考えるブロックテーマへの対応で変わりゆくデザインの価値~
ds35mm
0
530
プロダクトリニューアルと同時に進める初めてのデザインシステム
techtekt
PRO
0
430
組織はみんなでつくる。デザイナーが仕掛ける急拡大する組織のカルチャーづくり
mkasumi
0
1.1k
プラットフォームに馴染むモバイルアプリデザイン / Mobile App UI Design Lunch LT
pixyzehn
0
130
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.9k
The innovator’s Mindset - Leading Through an Era of Exponential Change - McGill University 2025
jdejongh
PRO
1
87
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.9k
Efficient Content Optimization with Google Search Console & Apps Script
katarinadahlin
PRO
0
310
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
11
810
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
techseoconnect
PRO
0
75
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
141
34k
Reflections from 52 weeks, 52 projects
jeffersonlam
356
21k
My Coaching Mixtape
mlcsv
0
44
Art, The Web, and Tiny UX
lynnandtonic
304
21k
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
livdayseo
0
51
Producing Creativity
orderedlist
PRO
348
40k
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αΠ τ Ͳ Μͳϝ σ Ο Ξ ʁ Ϩϙʔ τ՝