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
89
Design MOCKUP
designless
3
380
Design 4 Hack
designless
2
290
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
【CEDEC2026】派手さと見やすさは両立できる!『Shadowverse: Worlds Beyond』エフェクト・3D背景の超進化したビジュアル設計
cygames
PRO
1
1.8k
工房としてのAI ── デザイナー、作家、ビルダー
hiranotomoki
0
440
(2026 FlowCon Keynote) Sociotechnical Architecture Finding Flow
xinyao
0
120
デザインとフロントエンドの境界が融ける Claude Code × Figma
littlebusters
2
3.5k
decksh object reference
ajstarks
2
1.8k
UI生成の鍵は要件整理 -デザインプロセスのエッセンスを プロンプト作成に取り入れよう-
abokadotyann
4
1.1k
A Corrida Maluca - Comedy Storyboard
gioli
0
110
デザインハーネス 〜AIが生成する"デザイン"の妥当性を、誰がどう担保するのか〜 / PdEConf2026 Design Harness
kgsi
11
19k
デザインワークフローの最前線。 ログラスでのAI活用の現在地
ukaoli
1
2.6k
再設計される業務 - AIにより再設計される "デザインワークフロー" / AI Ops Lab #2 Redesigned orkflows
kgsi
0
900
Basket_of_love.pdf
terencebasart
0
290
Decksh keywords
ajstarks
0
120
Featured
See All Featured
A Guide to Academic Writing Using Generative AI - A Workshop
ks91
PRO
1
410
Getting science done with accelerated Python computing platforms
jacobtomlinson
2
470
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
201
75k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.9k
The Power of CSS Pseudo Elements
geoffreycrofte
82
6.5k
More Than Pixels: Becoming A User Experience Designer
marktimemedia
3
510
Ethics towards AI in product and experience design
skipperchong
2
360
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
31
3.3k
It's Worth the Effort
3n
188
29k
WENDY [Excerpt]
tessaabrams
12
39k
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
techseoconnect
PRO
0
430
Measuring Dark Social's Impact On Conversion and Attribution
stephenakadiri
2
270
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αΠ τ Ͳ Μͳϝ σ Ο Ξ ʁ Ϩϙʔ τ՝