Web Design Turorial - Cafe Website

೥݄೔ 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 ﬂoat, clear, position...

ਓʹ΍͞ ͍͠૷০ͱ Ϩ Π Ξ΢ τ CSS

JavaScript Π ϯ λϥΫγ ϣ ϯͳԋग़ͱ֦ு

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

H T M L C S S J S ಺༰
૷ ০ ԋग़

index.html style.css ﬂower.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, ﬂuid

ࢼߦࡨޡ

SANDBOX 8FCσβΠ ϯͷ࠭৔

ANNTENA Π ϯϓ ο τͷ࢓૊Έ

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

Web Design Turorial - Cafe Website

Web Design Turorial - Cafe Website

More Decks by Naoki Kanazawa

Other Decks in Design

Featured

Transcript