サルでもできるウェブデザイン : SwapSkills 2010 Vol01
•
2 j'aime•1,605 vues
SwapSkills 2010 Vol1にておこなった。サルでもできるウェブデザイン のスライド
Recommandé
Contenu connexe
Plus de Satoshi Kikuchi
Plus de Satoshi Kikuchi (10)
サルでもできるウェブデザイン : SwapSkills 2010 Vol01
- 1. MONKEY CAN DO サルでもできるウェブデザイン DESIGN WORKS 2010. 03.06 Takashi Kikuchi SwapSkills 2010年3月15日月曜日
- 2. 菊池 崇 allWebクリエイター塾講師 Web Directions East LLC. CEO SwapSkills 2010年3月15日月曜日
- 3. ? 書 籍 HTML5 & CSS3 HTML5 doctor 今夏発売！ SwapSkills 2010年3月15日月曜日
- 5. 海外のカンファレンスに参加 自分の技術を研鑽すること SwapSkills 2010年3月15日月曜日
- 7. CSS3 border-radius rgba/hsla gradient(radial/liner) SwapSkills 2010年3月15日月曜日
- 9. コーダー／マーケッター ＋ デザインセンス SwapSkills 2010年3月15日月曜日
- 10. デザインセンス ０ SwapSkills 2010年3月15日月曜日
- 12. デザインセンスが”0”で ウェブデザインは可能か SwapSkills 2010年3月15日月曜日
- 14. デザイン レイアウト Grid System / Vertical Rythm SwapSkills 2010年3月15日月曜日
- 15. デザイン レイアウト カラー Grid System / Vertical Rythm SwapSkills 2010年3月15日月曜日
- 22. (x)html + CSS コーディング SwapSkills 2010年3月15日月曜日
- 23. (x)html + CSS + browser SwapSkills 2010年3月15日月曜日
- 24. (x)html + CSS + browser コーディング+デザインツール SwapSkills 2010年3月15日月曜日
- 29. デザイン デザインカンプ SwapSkills 2010年3月15日月曜日
- 30. デザイン デザインカンプ SwapSkills 2010年3月15日月曜日
- 31. デザイン デザインカンプ 判断 SwapSkills 2010年3月15日月曜日
- 32. デザイン デザインカンプ 判断 SwapSkills 2010年3月15日月曜日
- 33. デザイン デザインカンプ 判断 SwapSkills 2010年3月15日月曜日
- 34. デザイン デザインカンプ 判断 SwapSkills 2010年3月15日月曜日
- 35. デザイン デザインカンプ 判断 コーディング SwapSkills 2010年3月15日月曜日
- 36. デザイン デザインカンプ 判断 コーディング SwapSkills 2010年3月15日月曜日
- 37. デザイン デザインカンプ 判断 コーディング SwapSkills 2010年3月15日月曜日
- 38. デザイン デザインカンプ 判断 コーディング SwapSkills 2010年3月15日月曜日
- 39. 先入観 preconceptions SwapSkills 2010年3月15日月曜日
- 43. 共有 s h a r e SwapSkills 2010年3月15日月曜日
- 44. Grid System SwapSkills 2010年3月15日月曜日
- 45. Josef Muller-Brockmann SwapSkills 2010年3月15日月曜日
- 46. ページサイズを割り出すこと コラムに割ること デザインすること - Grid System Raster systeme - Josef Muller-Brockmann SwapSkills 2010年3月15日月曜日
- 47. ページサイズを 割り出 す こ と SwapSkills 2010年3月15日月曜日
- 48. ページのサイズを割り出すこと 960px SwapSkills 2010年3月15日月曜日
- 51. コラムに割ること 960/1 = 960 SwapSkills 2010年3月15日月曜日
- 52. コラムに割ること 960/1 = 960 960/2 = 480 SwapSkills 2010年3月15日月曜日
- 53. コラムに割ること 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日月曜日
- 54. コラムに割ること 40px 20px SwapSkills 2010年3月15日月曜日
- 57. 16 40px 20px 960-16-col.png SwapSkills 2010年3月15日月曜日
- 58. 160px x 160pxバナー 60px + 60px + 40px = 160px 960-16-col.png SwapSkills 2010年3月15日月曜日
- 59. html { background : url(../grids/960-16-col.png) repeat-y top center; } SwapSkills 2010年3月15日月曜日
- 60. Vertical Rythm SwapSkills 2010年3月15日月曜日
- 61. Jina Bolton http://sushiandrobots.com/ SwapSkills 2010年3月15日月曜日
- 63. base grid ベ ース グ リ ッ ド SwapSkills 2010年3月15日月曜日
- 66. x = SwapSkills 2010年3月15日月曜日
- 67. 12px x = font-size SwapSkills 2010年3月15日月曜日
- 68. 12px x 1.5 = font-size line-height SwapSkills 2010年3月15日月曜日
- 69. 12px x 1.5 = 18px font-size line-height base-grid SwapSkills 2010年3月15日月曜日
- 70. The n SwapSkills 2010年3月15日月曜日
- 71. 12px The n SwapSkills 2010年3月15日月曜日
- 72. 18px 12px The n SwapSkills 2010年3月15日月曜日
- 73. 18px 18px 12px The n 18px SwapSkills 2010年3月15日月曜日
- 74. html { 16px x 87.5% = 14px font-size : 87.5%; } SwapSkills 2010年3月15日月曜日
- 76. 14px font-size SwapSkills 2010年3月15日月曜日
- 77. 14px x font-size SwapSkills 2010年3月15日月曜日
- 78. 14px x 1.5 font-size line-height SwapSkills 2010年3月15日月曜日
- 79. 14px x 1.5 = font-size line-height SwapSkills 2010年3月15日月曜日
- 80. 14px x 1.5 = 21px font-size line-height base-grid SwapSkills 2010年3月15日月曜日
- 82. 14px あいう SwapSkills 2010年3月15日月曜日
- 83. 21px 14px あいう SwapSkills 2010年3月15日月曜日
- 84. 21px 21px 14px あいう 21px SwapSkills 2010年3月15日月曜日
- 85. 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日月曜日
- 86. 見出しのフォントサイズ h1 = 36px h2 = 24px h3 = 20px h4, h5, h6 = 14px SwapSkills 2010年3月15日月曜日
- 88. 14px あいう SwapSkills 2010年3月15日月曜日
- 89. 20px 14px あいう SwapSkills 2010年3月15日月曜日
- 90. 20px 20px 14px あいう 20px SwapSkills 2010年3月15日月曜日
- 91. 20px html { font-size : 87.5%} 20px 20px p{ margin : 20px 0; } 20px 20px 20px SwapSkills 2010年3月15日月曜日
- 92. 20px html { font-size : 87.5%} 20px p{ 20px margin : 20px 0; } 20px SwapSkills 2010年3月15日月曜日
- 94. h1, h2, h3, h4, h5, h6 { margin-bottom : 20px; } 20px 20px 20px SwapSkills 2010年3月15日月曜日
- 96. 20px base-grid SwapSkills 2010年3月15日月曜日
- 97. 20px / base-grid SwapSkills 2010年3月15日月曜日
- 98. 20px / 14px base-grid font-size SwapSkills 2010年3月15日月曜日
- 99. 20px / 14px = base-grid font-size SwapSkills 2010年3月15日月曜日
- 100. 20px / 14px = 1.42857 base-grid font-size line-height SwapSkills 2010年3月15日月曜日
- 102. 1em あいう SwapSkills 2010年3月15日月曜日
- 103. 1.42857em 1em あいう SwapSkills 2010年3月15日月曜日
- 104. 1.42857em 1.42857em 1em あいう 1.42857em SwapSkills 2010年3月15日月曜日
- 106. キーカラー 背景色 テキスト テキスト色（:link, :visited） テキスト色（:hover, :active） SwapSkills 2010年3月15日月曜日
- 107. Adobe Kuler SwapSkills 2010年3月15日月曜日
- 108. ① 自然の色 ② カラースキーマ ③ 似ている色のウェブサイト SwapSkills 2010年3月15日月曜日
- 109. http://www.snook.ca/technical/ colour_contrast/colour.html SwapSkills 2010年3月15日月曜日
- 110. 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日月曜日
- 111. Thanks ! SwapSkills 2010年3月15日月曜日
- 112. One more thing SwapSkills 2010年3月15日月曜日
- 115. 2006/01 - SwapSkills 2010年3月15日月曜日
- 116. Andy Clarke http://www.stuffandnonsense.co.uk/ SwapSkills 2010年3月15日月曜日
- 120. より実践的な デモに進もう SwapSkills 2010年3月15日月曜日
- 121. Andy Clarke http://www.vimeo.com/8235596 SwapSkills 2010年3月15日月曜日