サルでもできるウェブデザイン : SwapSkills 2010 Vol01

MONKEY CAN DO DESIGN WORKS 2010. 03.06 Takashi Kikuchi SwapSkills 2010 3 15

allWeb Web Directions East LLC. CEO SwapSkills 2010 3 15

? HTML5 & CSS3 HTML5 doctor SwapSkills 2010 3 15

http://html5doctor.com/ SwapSkills 2010 3 15

SwapSkills 2010 3 15

CSS3 border-radius rgba/hsla gradient(radial/liner) SwapSkills 2010 3 15

”0 ” SwapSkills 2010 3 15

Grid System / Vertical Rythm SwapSkills 2010 3 15

(x)html + CSS SwapSkills 2010 3 15

(x)html + CSS + browser SwapSkills 2010 3 15

preconceptions SwapSkills 2010 3 15

s h a r e SwapSkills 2010 3 15

Grid System SwapSkills 2010 3 15

Josef Muller-Brockmann SwapSkills 2010 3 15

- Grid System Raster systeme - Josef Muller-Brockmann SwapSkills 2010 3 15

960px SwapSkills 2010 3 15

960/1 = 960 SwapSkills 2010 3 15

960/1 = 960 960/2 = 480 SwapSkills 2010 3 15

960/1 = 960 960/6 = 160 960/2 = 480 960/8 = 120 960/3 = 320 960/10 = 96 960/4 = 260 960/12 = 80 960/5 = 192 960/16 = 60 SwapSkills 2010 3 15

40px 20px SwapSkills 2010 3 15

960gs SwapSkills 2010 3 15

16 40px 20px 960-16-col.png SwapSkills 2010 3 15

160px x 160px 60px + 60px + 40px = 160px 960-16-col.png SwapSkills 2010 3 15

html { background : url(../grids/960-16-col.png) repeat-y top center; } SwapSkills 2010 3 15

Vertical Rythm SwapSkills 2010 3 15

Jina Bolton http://sushiandrobots.com/ SwapSkills 2010 3 15

base grid SwapSkills 2010 3 15

x SwapSkills 2010 3 15

x = SwapSkills 2010 3 15

12px x = font-size SwapSkills 2010 3 15

12px x 1.5 = font-size line-height SwapSkills 2010 3 15

12px x 1.5 = 18px font-size line-height base-grid SwapSkills 2010 3 15

18px 18px 12px 18px SwapSkills 2010 3 15

html { 16px x 87.5% = 14px font-size : 87.5%; } SwapSkills 2010 3 15

14px font-size SwapSkills 2010 3 15

14px x font-size SwapSkills 2010 3 15

14px x 1.5 font-size line-height SwapSkills 2010 3 15

14px x 1.5 = font-size line-height SwapSkills 2010 3 15

14px x 1.5 = 21px font-size line-height base-grid SwapSkills 2010 3 15

6pt: non pareil 7pt: min ion 8pt: brevier or small text 9pt: bour geois or gal liard 10pt: long primer or gara mond 11pt: small pica or philo sophy 12pt: pica 14pt: eng lish or augustin 18pt: great primer 21pt: double small pica or double pica 24pt: double pica or two-line pica 36pt: double great primer or 2-line great primer http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-better-typography-part-4 SwapSkills 2010 3 15

h1 = 36px h2 = 24px h3 = 20px h4, h5, h6 = 14px SwapSkills 2010 3 15

20px html { font-size : 87.5%} 20px 20px p{ margin : 20px 0; } 20px 20px 20px SwapSkills 2010 3 15

20px html { font-size : 87.5%} 20px p{ 20px margin : 20px 0; } 20px SwapSkills 2010 3 15

margin-bottom SwapSkills 2010 3 15

h1, h2, h3, h4, h5, h6 { margin-bottom : 20px; } 20px 20px 20px SwapSkills 2010 3 15

20px base-grid SwapSkills 2010 3 15

20px / base-grid SwapSkills 2010 3 15

20px / 14px base-grid font-size SwapSkills 2010 3 15

20px / 14px = base-grid font-size SwapSkills 2010 3 15

20px / 14px = 1.42857 base-grid font-size line-height SwapSkills 2010 3 15

1em SwapSkills 2010 3 15

1.42857em 1em SwapSkills 2010 3 15

1.42857em 1.42857em 1em 1.42857em SwapSkills 2010 3 15

Color SwapSkills 2010 3 15

:link, :visited :hover, :active SwapSkills 2010 3 15

http://www.snook.ca/technical/ colour_contrast/colour.html SwapSkills 2010 3 15

Further Reading •http://www.subtraction.com/pics/0703/grids_are_good.pdf •http://www.markboulton.co.uk/journal/comments/five-simple-steps-to- better-typography •http://thinkit.jp/article/807/1/ image •http://www.autismhangout.com/userfiles/image/monkey.jpg SwapSkills 2010 3 15

Thanks ! SwapSkills 2010 3 15

One more thing SwapSkills 2010 3 15

CSS3 SwapSkills 2010 3 15

2006/01 - SwapSkills 2010 3 15

Andy Clarke http://www.stuffandnonsense.co.uk/ SwapSkills 2010 3 15

Andy Clarke http://www.vimeo.com/8235596 SwapSkills 2010 3 15

http://swapskills-allweb.blogspot.com	159
http://www.slideshare.net	5
http://swapskills-allweb.blogspot.jp	2
http://www.health.medicbd.com	1
http://swapskills-shikoku.blogspot.com	1

サルでもできるウェブデザイン : SwapSkills 2010 Vol01

by satoshi kikuchi on Mar 15, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

5 Embeds 168

Statistics

サルでもできるウェブデザイン : SwapSkills 2010 Vol01 — Presentation Transcript