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
190
1
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Web Design Turorial - Cafe Website
Slides for schoo WEB-campus
http://schoo.jp/class/251
Naoki Kanazawa
January 21, 2014
More Decks by Naoki Kanazawa
See All by Naoki Kanazawa
Design Door - Be Startup
designless
0
86
Design MOCKUP
designless
3
380
Design 4 Hack
designless
2
280
DESIGN FOR EVERYONE
designless
10
570
Document Design by Adobe Illustrator - 1
designless
2
230
Document Design by Adobe Illustrator - 2
designless
0
110
Document Design by Adobe Illustrator - 3
designless
0
110
Prototyping by Adobe Photoshop
designless
1
150
Prototyping by Adobe Illustrator
designless
1
140
Other Decks in Design
See All in Design
Where Imagination Ends AI Begins
r5ni4
0
300
少人数チームで_使われるプロダクトにたどり着くための_デザインハーネス.pdf
nishame
1
1.3k
CULTURE DECK/Frontend Engineer
mhand01
0
1.6k
富山デザイン勉強会_プレゼンテーション.pdf
keita_yoshikawa
0
110
保育現場にAIを 〜人と技術に橋を架けるデザインで考えてきたこと〜 uiuxcamp2026-hoiku-ai-design
hiro93n
1
360
エンジニアでも捗る デザイナー的思考入門(bitA Edit 新ver)
tinykitten
0
280
染み出し好きの、 染み出しコントロール論
mukai_takeru
0
390
怖くないアクセシビリティ -カウンターカルチャーとしてのアッカン東京-
securecat
1
230
凡庸を落とすハーネス
hiromimaeo
1
770
AIスライド生成を進化させるMDファイル
kenichiota0711
1
1.6k
デザインとフロントエンドの境界が融ける Claude Code × Figma
littlebusters
2
3.3k
Build for the Web, Build on the Web, Build With the Web
csswizardry
0
500
Featured
See All Featured
The untapped power of vector embeddings
frankvandijk
2
1.8k
Everyday Curiosity
cassininazir
0
280
Designing Experiences People Love
moore
143
24k
A brief & incomplete history of UX Design for the World Wide Web: 1989–2019
jct
2
470
Leading Effective Engineering Teams in the AI Era
addyosmani
9
2.3k
Design in an AI World
tapps
1
280
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
inesmontani
PRO
3
3.7k
Optimizing for Happiness
mojombo
378
71k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.8k
Git: the NoSQL Database
bkeepers
PRO
432
67k
Automating Front-end Workflow
addyosmani
1369
210k
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
katarinadahlin
PRO
2
3.8k
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αΠ τ Ͳ Μͳϝ σ Ο Ξ ʁ Ϩϙʔ τ՝