Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web Design Turorial - Cafe Website

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Naoki Kanazawa Naoki Kanazawa
January 21, 2014
Design
1
190

Web Design Turorial - Cafe Website

Slides for schoo WEB-campus
http://schoo.jp/class/251

Avatar for Naoki Kanazawa

Naoki Kanazawa

January 21, 2014
Tweet

More Decks by Naoki Kanazawa

See All by Naoki Kanazawa
Design Door - Be Startup
Avatar for Naoki Kanazawa designless
0
81
Design MOCKUP
Avatar for Naoki Kanazawa designless
3
370
Design 4 Hack
Avatar for Naoki Kanazawa designless
2
280
DESIGN FOR EVERYONE
Avatar for Naoki Kanazawa designless
10
560
Document Design by Adobe Illustrator - 1
Avatar for Naoki Kanazawa designless
2
230
Document Design by Adobe Illustrator - 2
Avatar for Naoki Kanazawa designless
0
100
Document Design by Adobe Illustrator - 3
Avatar for Naoki Kanazawa designless
0
100
Prototyping by Adobe Photoshop
Avatar for Naoki Kanazawa designless
1
140
Prototyping by Adobe Illustrator
Avatar for Naoki Kanazawa designless
1
130

Other Decks in Design

See All in Design
Ralph Penel Portfolio
Avatar for ralphpenel ralphpenel
0
340
情報を翻訳する-伝わる可視化３原則とオープンデータ活用-
Avatar for Hajime Kato hjmkth
1
170
Storyboard Assignment: Storyboard from Comic Strip
Avatar for Mandalyn Teo lynteo
3
220
AI時代、デザイナーの価値はどこに？
Avatar for Ryotaro Takahashi tararira
0
760
Mandalyn_DT5001_FinalAssignment.pdf
Avatar for Mandalyn Teo lynteo
0
170
組織の右腕として共創する ー デザインと経営の二つの視点から見えた、新しい支援のかたち/ Designship2025_Nishimura
Avatar for 株式会社ルート root_recruit
0
300
Goodpatch Tour💙 / We are hiring!
Avatar for Goodpatch Inc. goodpatch
31
1M
チームで事業価値を生み出す、プロアクティブなデザイナーになるための道のり/ Designship2025_Naya
Avatar for 株式会社ルート root_recruit
0
410
インハウスデザイン組織で挑む自社ブランディング
Avatar for MIXI DESIGN mixi_design
PRO
0
120
OSO2025-マサカリと太陽：伝え方の情報デザイン
Avatar for majimasachi majimasachi
0
730
Signull 団体説明資料
Avatar for Signull signull
0
310
見栄えと使いやすさの先にある 特別感 をデザインする / Designing a Sense of Specialness Beyond Aesthetics and Usability
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
0
280

Featured

See All Featured
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
32
2.8k
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
Avatar for konakalab konakalab
0
380
The untapped power of vector embeddings
Avatar for Frank van Dijk frankvandijk
2
1.6k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
33
1.6k
16th Malabo Montpellier Forum Presentation
Avatar for AKADEMIYA2063 akademiya2063
PRO
0
67
From π to Pie charts
Avatar for Rasagy Sharma rasagy
0
150
AI in Enterprises - Java and Open Source to the Rescue
Avatar for ivargrimstad ivargrimstad
0
1.2k
Visual Storytelling: How to be a Superhuman Communicator
Avatar for David Neal reverentgeek
2
470
Navigating the moral maze — ethical principles for Al-driven product design
Avatar for Skipper Chong Warson skipperchong
2
280
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
199
73k
sira's awesome portfolio website redesign presentation
Avatar for ElsiraPls elsirapls
0
190
Side Projects
Avatar for Sacha Greif sachag
455
43k

Transcript

  1. ೥݄೔ TDIPP8&#DBNQVT ۚᖒ௚ؽ カ フ ェ のWebサイ ト を作 っ

    て 8FCσβ Π ϯ ͱ جૅ ٕज़ΛֶͿ ͷ

  2. ۚᖒ௚ؽ Naoki Kanazawa http://designless.net

  3. 8FCΛθϩ͔Β ࡞ͬͨ ͜ ͱ͕͋Γ ·͔͢ ʁ

  4. 8FCΛθϩ͔Β ࡞Δ ͜ ͱͷҙຯͱ ͸ ʁ

  5. ख࢓ࣄ

  6.  ಡΉ  ༡Ϳ  ࡞Δ  ֶͿ Reading Playing

    Making Studying

  7. ಡΉ 

  8. IUUQKVTUJOKBDLTPODBXPSET@KBQBOIUNM ͜Ε͸΢ Σ ϒϖʔδͰ͢

  9. ઃܭਤʹ׬੒ਤ

  10. HUMAN WEB COMPUTER

  11. SERVER CLIENT

  12. )5.- $44 +"7"4$3*15 "%0#& 803%13& 1)1 4,*--61

  13. 4,*--61 

  14.  ༡Ϳ

  15. IUUQEFTJHOMFTTOFUFEJUPS 8FCσβΠ ϯͷ࠭৔

  16. <λά>Hello World!<λά> HTML html, h1, h2, h3 h4, h5, h6,

    p, ul, li, a, img, div, span, em, strong...

  17. <html> <head> ϝλ৘ใ </head> <body> <h1>࠷ॳʹ఻͍͑ͨ͜ͱ</h1> <p>આ໌ͳͲͷจষ</p> <h2>࣍ʹ఻͍͑ͨ͜ͱ</h2> <p>આ໌ͳͲͷจষ</p> <ul>

    <li>άϧʔϓ</li> <li>άϧʔϓ</li> <li>άϧʔϓ</li> </ul> </body> </html> HTML ίϯϐϡ ʔλʹ఻͑ Δ ͱ ͍͏ ͜ ͱ

  18. CSS ηϨΫλ { ϓϩύςΟ : ஋ ;} color, background, font-size,

    text-align width, height, margin, padding, border float, clear, position...

  19. ਓʹ΍͞ ͍͠૷০ͱ Ϩ Π Ξ΢ τ CSS

  20. JavaScript Π ϯ λϥΫγ ϣ ϯͳԋग़ͱ֦ு

  21. jQuery ˈ(ηϨΫλ) .ϝιου(ύϥϝʔλ) click, hover addClass, removeClass fade, toggle, animate

  22. H T M L C S S J S ಺༰

    ૷ ০ ԋग़

  23. IMAGE

  24. index.html style.css flower.jpg CSS images

  25. PATH σΟϨΫτϦߏ੒ ϑΥϧμ/ϑΝΠϧ ໊.֦ு ࢠ ../ϑΥϧμ/ϑΝΠϧ ໊.֦ு ࢠ

  26.  ࡞Δ

  27. TOOL ϒϥ΢β ʴ ΤσΟλ Google Chrome Mozilla Firefox CotEditor terapad

  28. IUUQEFTJHOMFTTOFUEBUBTDIPP[JQ ૉࡐͷμ΢ ϯϩʔ υ

  29. ϖϦΧϯΧϑΣ _resource _design _www

  30. ͳͥɺ Χϑ Σͷ8FCαΠ τ ͳͷ͔ ʁ

  31. ๺Ԥ ੨ࢁ Pelican Cafe www.pelican-cafe.com

  32. BUSINESS VISUAL CODE CONCEPT

  33. HTML = ৘ ใߏ ଄ λάͷೖΕࢠ 1

  34. ଐੑ 2 src, href, class, id

  35. ϘοΫεϞσϧ 3 reset.css

  36. jQuer yϓϥάΠϯ 4 bxslider, colorbox

  37. jQuer y࢓ ֻ͚ 5 fade, scroll,

  38. Google Map API 6

  39. Ϩεϙϯγϒɾ΢Σϒσ βΠϯ 7 media queries, fluid

  40.  ֶͿ

  41. ࢼߦࡨޡ

  42. SANDBOX 8FCσβΠ ϯͷ࠭৔

  43. ANNTENA Π ϯϓ ο τͷ࢓૊Έ

  44. 8FCαΠ τ ͸Ͳ Μͳϝ σ Ο Ξ ʁ Ϩϙʔ τ՝୊