実践!CSSデザインの「型」でみる視覚表現テクニック

1,820 views

Published on

月刊「web creators」が主催するデザイナー向けイベント「Designer meets Designers」の講演(2007年8月10日)

Published in: Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,820
On SlideShare
0
From Embeds
0
Number of Embeds
87
Actions
Shares
0
Downloads
21
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

実践!CSSデザインの「型」でみる視覚表現テクニック

  1. 1. Designer meets Designers SESSION 52007.8.10 1
  2. 2. 2
  3. 3. Instructional Designer 3
  4. 4. Instructional Designer 4
  5. 5. Instructional Designer 5
  6. 6. Instructional Designer 6
  7. 7. new subject waza 7
  8. 8. new http://www.w3.org/TR/CSS21/ Basic Design subject browser fixed New Trends of CSS 8
  9. 9. new+ http://www.w3.org/TR/CSS21/ Basic Design subject browser fixed New Trends of CSS 9
  10. 10. Introduction 10
  11. 11. Web standards 1998-2000Before/After CSS Design 11
  12. 12. 12
  13. 13. 13
  14. 14. 14
  15. 15. 15
  16. 16. 16
  17. 17. 17
  18. 18. 18
  19. 19. 19
  20. 20. 20
  21. 21. 21
  22. 22. 22
  23. 23. 23
  24. 24. 24
  25. 25. 25
  26. 26. 26
  27. 27. 27
  28. 28. 28
  29. 29. 29
  30. 30. 30
  31. 31. Netscape Communicator 4.75 31
  32. 32. 32
  33. 33. 33
  34. 34. Netscape Communicator 4.75 34
  35. 35. 35
  36. 36. 36
  37. 37. 37
  38. 38. 38
  39. 39. 39
  40. 40. WaSPThe Web Standards Project 40
  41. 41. 41
  42. 42. Web Standards 42
  43. 43. Web Standards 43
  44. 44. Web Standards 44
  45. 45. Web Standards 45
  46. 46. 46
  47. 47. 47
  48. 48. 48
  49. 49. 49
  50. 50. 50
  51. 51. 51
  52. 52. 52
  53. 53. 53
  54. 54. 54
  55. 55. 55
  56. 56. Cascading Style Sheets waza 56
  57. 57. Cascading Style Sheets waza 57
  58. 58. 58
  59. 59. FunctionalBeauty 59
  60. 60. FunctionalBeauty 60
  61. 61. FunctionalBeauty 61
  62. 62. FunctionalBeauty 62
  63. 63. FunctionalBeauty 63
  64. 64. FunctionalBeauty 64
  65. 65. FunctionalBeauty 65
  66. 66. new Cascading Style Sheets waza skill up 66
  67. 67. Cascading Style SheetsCascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification http://www.w3.org/TR/CSS21/ 67
  68. 68. Cascading Style SheetsBasic Design 68
  69. 69. Cascading Style Sheetsbrowser fixed 69
  70. 70. Cascading Style SheetsNew Trends of CSS 70
  71. 71. Cascading Style Sheets http://www.w3.org/TR/CSS21/ Basic Design browser fixedNew Trends of CSS 71
  72. 72. Cascading Style Sheets http://www.w3.org/TR/CSS21/ Basic Design browser fixedNew Trends of CSS 72
  73. 73. Cascading Style Sheets http://www.w3.org/TR/CSS21/ Basic Designbrowser fixedNew Trends of CSS 73
  74. 74. Cascading Style Sheets 74
  75. 75. Cascading Style Sheets 75
  76. 76. Cascading Style Sheets http://www.w3.org/TR/CSS21/ Basic Designbrowser fixedNew Trends of CSS 76
  77. 77. Cascading Style Sheets http://www.w3.org/TR/CSS21/ Basic Design browser fixedNew Trends of CSS 77
  78. 78. Cascading Style SheetsNew Trends of CSSpixel-perfect design 78
  79. 79. Cascading Style SheetsNew Trends of CSSpixel-perfect design 79
  80. 80. Cascading Style SheetsNew Trends of CSSpixel-perfect design adaptive design 80
  81. 81. Cascading Style Sheetsinternet community http://www.w3.org/TR/CSS21/ Basic Design browser fixed New Trends of CSS 81
  82. 82. Cascading Style Sheetsinternet community http://www.w3.org/TR/CSS21/ local community Basic Design browser fixed New Trends of CSS 82
  83. 83. Cascading Style Sheetsinternet community http://www.w3.org/TR/CSS21/ local community Basic Design media / seminar browser fixed New Trends of CSS 83
  84. 84. Cascading Style Sheets internet community http://www.w3.org/TR/CSS21/ local community Basic Design media / seminar browser fixedbook / educational institution New Trends of CSS 84
  85. 85. Cascading Style Sheets waza 85
  86. 86. creators creator 86
  87. 87. creators creator 87
  88. 88. 88
  89. 89. creators creatoralpha blogger asset 89
  90. 90. 90
  91. 91. RSS Feed 91
  92. 92. Fast ladder http://fastladder.com/ 92
  93. 93. 93
  94. 94. 94
  95. 95. dismantle learning 95
  96. 96. dismantle learningWeb Developer http://chrispederick.com/work/web-developer/Web Developer http://www.infoaxia.com/tools/webdeveloper/ http://www.infoaxia.co.jp/ 96
  97. 97. dismantle learningW3C http://www.w3.org/ 97
  98. 98. dismantle learning 98
  99. 99. dismantle learning 99
  100. 100. dismantle learning 100
  101. 101. dismantle learning 101
  102. 102. dismantle learning 102
  103. 103. dismantle learning 103
  104. 104. dismantle learning 104
  105. 105. dismantle learning 105
  106. 106. dismantle learning 106
  107. 107. dismantle learning 107
  108. 108. dismantle learning 108
  109. 109. dismantle learninghttp://www.mizuho-sc.com/ja/index.html 109
  110. 110. dismantle learning 110
  111. 111. dismantle learning 111
  112. 112. dismantle learninghttp://www.expo2005.or.jp/jp/ 112
  113. 113. dismantle learning 113
  114. 114. dismantle learning 114
  115. 115. dismantle learning 115
  116. 116. CSS Rule 116
  117. 117. CSS Rulehicksdesign http://www.hicksdesign.co.uk/ 117
  118. 118. CSS Rule 118
  119. 119. CSS RuleThe Web Standards Project [WaSP] http://www.webstandards.org/ 119
  120. 120. CSS Rule 120
  121. 121. CSS RuleTextDrive http://textdrive.com/ 121
  122. 122. CSS Rule 122
  123. 123. Global Navigation step1-17 123
  124. 124. Apple.comGlobal Navigation step1-17 124
  125. 125. Apple.comGlobal Navigation step1-17 125
  126. 126. step1 XHTML 126
  127. 127. step2 XHTML & CSS 127
  128. 128. step3 #globalheader { width: 982px; height: 38px; margin: 18px auto; position: relative; z-index: 9998; } #globalheader #globalnav { margin: 0; padding: 0; } 128
  129. 129. step4 #globalheader #globalnav li { display: inline; } 129
  130. 130. step5 #globalheader #globalnav li a { float: left; width: 117px; height: 0; padding-top: 38px; overflow: hidden; } 130
  131. 131. step5 #globalheader #globalnav li a { float: left; width: 117px; height: 0; padding-top: 38px; overflow: hidden; } 131
  132. 132. Global Navigation Image PNG & GIF 132
  133. 133. step5 #globalheader #globalnav li a { float: left; width: 117px; height: 0; padding-top: 38px; overflow: hidden; } 133
  134. 134. step6 #globalheader #globalnav li a, #globalheader #globalsearch { background-image: url(globalnavbg.png); _background-image: url(globalnavbg.gif); background-repeat: no-repeat; } 134
  135. 135. step6 #globalheader #globalnav li a, #globalheader #globalsearch { background-image: url(globalnavbg.png); _background-image: url(globalnavbg.gif); background-repeat: no-repeat; } 135
  136. 136. step7 #globalheader #globalnav li#gn-store a { background-position: 0 0; } #globalheader #globalnav li#gn-store a { background-position: -117px 0; } 136
  137. 137. step8 #globalheader #globalnav li#gn-mac a { background-position: -234px 0; } 137
  138. 138. step9 #globalheader #globalnav li#gn-ipoditunes a { background-position: -351px 0; } 138
  139. 139. step10 #globalheader #globalnav li#gn-iphone a { background-position: -468px 0; } 139
  140. 140. step11 #globalheader #globalnav li#gn-downloads a { background-position: -585px 0; } 140
  141. 141. step12 #globalheader #globalnav li#gn-support a { background-position: -702px 0; } 141
  142. 142. step13 /* OVER STATES */ #globalheader #globalnav li#gn-apple a:hover { background-position: 0 -38px; } #globalheader #globalnav li#gn-store a:hover { background-position: -117px -38px; } #globalheader #globalnav li#gn-mac a:hover { background-position: -234px -38px; } #globalheader #globalnav li#gn-ipoditunes a:hover { background-position: -351px -38px; } #globalheader #globalnav li#gn-iphone a:hover { background-position: -468px -38px; } #globalheader #globalnav li#gn-downloads a:hover { background-position: -585px -38px; } #globalheader #globalnav li#gn-support a:hover { background-position: -702px -38px; } 142
  143. 143. step14 /* PRESSED STATES */ #globalheader #globalnav li#gn-apple a:active { background-position: 0 -76px; } #globalheader #globalnav li#gn-store a:active { background-position: -117px -76px; } #globalheader #globalnav li#gn-mac a:active { background-position: -234px -76px; } #globalheader #globalnav li#gn-ipoditunes a:active { background-position: -351px -76px; } #globalheader #globalnav li#gn-iphone a:active { background-position: -468px -76px; } #globalheader #globalnav li#gn-downloads a:active { background-position: -585px -76px; } #globalheader #globalnav li#gn-support a:active { background-position: -702px -76px; } 143
  144. 144. step15 /* ON STATES */ #globalheader.home #globalnav li#gn-apple a:hover { background-position: 0 0; cursor: default; } #globalheader.store #globalnav li#gn-store a { background-position: -117px -114px !important; } #globalheader.mac #globalnav li#gn-mac a { background-position: -234px -114px !important; } #globalheader.ipoditunes #globalnav li#gn-ipoditunes a { background-position: -351px -114px !important; } #globalheader.iphone #globalnav li#gn-iphone a { background-position: -468px -114px !important; } #globalheader.downloads #globalnav li#gn-downloads a { background-position: -585px -114px !important; } #globalheader.support #globalnav li#gn-support a { background-position: -702px -114px !important; } 144
  145. 145. step15 /* ON STATES */ #globalheader.home #globalnav li#gn-apple a:hover { background-position: 0 0; cursor: default; } #globalheader.store #globalnav li#gn-store a { background-position: -117px -114px !important; } #globalheader.mac #globalnav li#gn-mac a { background-position: -234px -114px !important; } #globalheader.ipoditunes #globalnav li#gn-ipoditunes a { background-position: -351px -114px !important; } #globalheader.iphone #globalnav li#gn-iphone a { background-position: -468px -114px !important; } #globalheader.downloads #globalnav li#gn-downloads a { background-position: -585px -114px !important; } #globalheader.support #globalnav li#gn-support a { background-position: -702px -114px !important; } 145
  146. 146. step16 #globalsearch { width: 163px; height: 38px; position: absolute; top: 0; right: 0; background-position: 100% 0; background-repeat: no-repeat; } 146
  147. 147. step17 #globalsearch label .prettyplaceholder { display: none; } 147
  148. 148. Apple.comGlobal Navigationstep1-17 148
  149. 149. Apple.comGlobal Navigationstep1-17 149
  150. 150. new+ dismantle learning 150
  151. 151. new+ 151
  152. 152. new+ Cascading Style Sheets 152
  153. 153. new+ waza waza waza waza waza Cascading Style Sheets 153
  154. 154. new Cascading Style Sheets http://www.w3.org/TR/CSS21/ Basic Design browser fixed New Trends of CSS 154
  155. 155. new+ Cascading Style Sheets CSS dismantle learning 155
  156. 156. elastic layout outline 156
  157. 157. new+ elastic layout outline elastic layout 157
  158. 158. new elastic layout outline fixed elastic layout fluid elastic layout 158
  159. 159. elastic layout outline fixed elastic layoutMozilla Foundation http://www.mozilla.org/ 159
  160. 160. elastic layout outlinefixed elastic layout 160
  161. 161. elastic layout outlinefixed elastic layout 161
  162. 162. elastic layout outlinefixed elastic layout 162
  163. 163. elastic layout outlineMozilla Corporationhttp://www.mozilla.com/en-US/ 163
  164. 164. elastic layout outlinefluid layout 164
  165. 165. elastic layout outlinefluid layout 165
  166. 166. elastic layout outline fixed elastic layoutGBHXonline.com http://gbhxonline.com/ 166
  167. 167. elastic layout outlinefixed elastic layout 167
  168. 168. elastic layout outlinefixed elastic layout 168
  169. 169. elastic layout details 169
  170. 170. elastic layout detailsA List Aparthttp://alistapart.com/ 170
  171. 171. elastic layout detailsElastic Design by Patrick Griffithshttp://alistapart.com/articles/elastic/ 171
  172. 172. elastic layout detailsFixed or fluid width? Elastic!http://www.456bereastreet.com/archive/200504/fixed_or_fluid_width_elastic/ 172
  173. 173. elastic layout detailsAndy ClarkeStuff and Nonsensehttp://www.stuffandnonsense.co.uk/ 173
  174. 174. elastic layout detailsA List (taken) Aparthttp://www.stuffandnonsense.co.uk/archives/a_list_taken_apart.html 174
  175. 175. elastic layout detailsResolution dependent style switchinghttp://www.456bereastreet.com/archive/200511/resolution_dependent_style_switching/ 175
  176. 176. elastic layout detailsParticletreehttp://particletree.com/DRDLDynamic Resolution Dependent Layoutshttp://particletree.com/examples/dynamiclayouts/ 176
  177. 177. elastic layout detailsDynamic Resolution Dependent Layouts 177
  178. 178. elastic layout detailsDynamic Resolution Dependent Layouts 178
  179. 179. elastic layout detailsDynamic Resolution Dependent Layouts 179
  180. 180. elastic layout detailsResolution vs. browser size vs. fixed or adaptive width http://www.456bereastreet.com/archive/200611/resolution_vs_browser_size_vs_fixed_or_adaptive_width/ 180
  181. 181. elastic layout details Resolution vs. browser size vs.fixed or adaptive width 181
  182. 182. elastic layout demonstration 182
  183. 183. Elastic Design DemonstrationElastic Design by Patrick Griffithshttp://alistapart.com/articles/elastic/ 183
  184. 184. Elastic Design Demonstration 184
  185. 185. new Elastic Design Demonstration h1 { margin: 0.2em 0.5em; color: #666; } .image { width: 30em; height: 15em; margin: 0.2em 1em; border: 1px solid #000; } 185
  186. 186. Elastic Design Demonstration 186
  187. 187. new Cascading Style Sheets http://www.w3.org/TR/CSS21/ Basic Design browser fixed New Trends of CSS 187
  188. 188. new Cascading Style Sheets http://www.w3.org/TR/CSS21/ Basic Design browser fixed New Trends of CSS 188
  189. 189. new Cascading Style Sheets http://www.w3.org/TR/CSS21/ Basic Design browser fixed New Trends of CSS 189
  190. 190. new+ Cascading Style Sheets browser fixed New Trends of CSS 190
  191. 191. The weird and wonderful world of Internet Explorer 191
  192. 192. The weird and wonderful world of Internet Explorer 192
  193. 193. The weird and wonderful world of Internet Explorer IE hasLayout outline 193
  194. 194. IE hasLayout outlinemsdnInternet Explorer Developer CenterLearn | Cascading Style Sheets (CSS)http://msdn2.microsoft.com/en-us/ie/aa740476.aspx 194
  195. 195. IE hasLayout outlineIEBloghttp://blogs.msdn.com/ie/ 195
  196. 196. IE hasLayout outlineIE Bug Bug 196
  197. 197. IE hasLayout outline Peekaboo BugInternet Explorer and Expanding Box Problem Quirky Percentages Line-height bug Border Chaos Disappearing List-Background bug Guillotine Bug Unscrollable Content bug Duplicate Characters Bug IE and Italics Doubled Float-Margin bug Duplicate Indent bug Three pixel text jog Creeping Text bug Missing First letter bug Phantom box bug 197
  198. 198. IE hasLayout outline CSS hacksCSS hacks and broken pages 198
  199. 199. IE hasLayout outlineExplorer Exposed!The weird and wonderful world of Internet Explorerhttp://www.positioniseverything.net/explorer.html 199
  200. 200. IE hasLayout outlineExplorer Exposed!The weird and wonderful world of Internet ExplorerIE6 Peekaboo Bughttp://www.positioniseverything.net/explorer/peekaboo.html 200
  201. 201. IE hasLayout outlineThere are three ways we know to prevent this bug.1. Keep the clearing div from touching the float, or avoid using a background on div#floatholder. Not exactly ideal.2. Give both div#floatholder and div#float position: relative. Be sure to fully test this method.3. Give div#floatholder hasLayout (now the preferred method) 201
  202. 202. IE hasLayout outlineThere are three ways we know to prevent this bug.1. Keep the clearing div from touching the float, or avoid using a background on div#floatholder. Not exactly ideal.2. Give both div#floatholder and div#float position: relative. Be sure to fully test this method.3. Give div#floatholder hasLayout (now the preferred method) 202
  203. 203. IE hasLayout outlineThere are three ways we know to prevent this bug.1. Keep the clearing div from touching the float, or avoid using a background on div#floatholder. Not exactly ideal.2. Give both div#floatholder and div#float position: relative. Be sure to fully test this method.3. Give div#floatholder hasLayout (now the preferred method) 203
  204. 204. IE hasLayout outlinemsdnhasLayout Propertyhttp://msdn2.microsoft.com/en-us/library/ms533776.aspx 204
  205. 205. IE hasLayout outline haslayout hasLayout PropertyGets a value that indicates whether the object has layout. 205
  206. 206. IE hasLayout outlineThe following example shows how to use the hasLayout property to determine whether an object has layout. 206
  207. 207. IE hasLayout outlineThe following example shows how to use the hasLayout property to determine whether an object has layout. 207
  208. 208. IE hasLayout outlineThe following example shows how to use the hasLayout property to determine whether an object has layout. 208
  209. 209. new IE hasLayout outline haslayout 209
  210. 210. new IE hasLayout outline haslayout CSS property Value display inline-block height any value float left or right position absolute width any value writing-mode tb-rl zoom any value 210
  211. 211. new IE hasLayout outline haslayout CSS hacks !? CSS hacks and broken pages 211
  212. 212. new IE hasLayout outline haslayout “non-layout” elements or “has layout” elements 212
  213. 213. new IE hasLayout outline haslayout 213
  214. 214. new IE hasLayout outline haslayout Many common IE float bugs. Boxes themselves treating basic properties differently. Margin collapsing between a container and its descendants. Various problems with the construction of lists. Differences in the positioning of background images. Differences between browsers when using scripting. 214
  215. 215. new IE hasLayout outline haslayout IE6 Peekaboo Bug 215
  216. 216. new IE hasLayout outline haslayout IE6 Peekaboo Bug 216
  217. 217. new IE hasLayout outline haslayout IE6 Peekaboo Bug 217
  218. 218. new IE hasLayout outline haslayout CSS property Value display inline-block height any value float left or right position absolute width any value writing-mode tb-rl zoom any value 218
  219. 219. new IE hasLayout outline haslayout 219
  220. 220. new IE hasLayout outline haslayout 220
  221. 221. new IE hasLayout outline haslayout CSS property Value display inline-block height any value float left or right position absolute width any value writing-mode tb-rl zoom any value 221
  222. 222. new IE hasLayout outline haslayout CSS property Value display inline-block height any value float left or right position absolute width any value writing-mode tb-rl zoom any value 222
  223. 223. IE hasLayout outlineOn having layouthttp://www.satzansatz.de/cssd/onhavinglayout.html 223
  224. 224. IE hasLayout outlineDefault layout elements<html>, <body><table>, <tr>, <th>, <td><img><hr><input>, <button>, <select>, <textarea>,<fieldset>, <legend><iframe>, <embed>, <object>, <applet><marquee> 224
  225. 225. IE hasLayout outlineIE hack management 225
  226. 226. IE hasLayout outlineThoughts on IE hack managementhttp://onhavinglayout.fwpf-webdesign.de/hack_management/ 226
  227. 227. new Cascading Style Sheets http://www.w3.org/TR/CSS21/ Basic Design browser fixed New Trends of CSS 227
  228. 228. new Cascading Style Sheets http://www.w3.org/TR/CSS21/ Basic Design browser fixed New Trends of CSS 228
  229. 229. new Cascading Style Sheets http://www.w3.org/TR/CSS21/ Basic Design browser fixed New Trends of CSS 229
  230. 230. Cascading Style Sheets waza 230
  231. 231. new Cascading Style Sheets waza 231
  232. 232. new Cascading Style Sheets waza 232
  233. 233. new Cascading Style Sheets waza 233
  234. 234. new Cascading Style Sheets waza 234
  235. 235. new Cascading Style Sheets candy color grid layout running shy baseline-grid layout flash page-building white background theory IR: rocket vs chameleon wide-screen composition utility layout [widget & gadget] passe-partout sidebar-land buyout flood-color mashup [web application hybrid] appropriation design waza 235
  236. 236. new+ Cascading Style Sheets 236
  237. 237. new Cascading Style Sheets color-forward royal-standard patchwork celebrity 237
  238. 238. color-forward 238
  239. 239. color-forward 239
  240. 240. color-forwardcandy colorrunning shyflash page-buildingIR: rocket vs chameleon 240
  241. 241. color-forwardCameron Moll ~ I {heart} design. http://www.cameronmoll.com/portfolio/ 241
  242. 242. color-forwardThe Consult http://www.theconsult.com/ 242
  243. 243. color-forwardStartseite von >>Denklichter http://www.denk-licht.de/ 243
  244. 244. color-forwardStartseite von >>Denklichter http://www.denk-licht.de/ 244
  245. 245. color-forwardhrasti.com http://www.hrasti.com/ 245
  246. 246. color-forwardhrasti.com http://www.hrasti.com/ 246
  247. 247. color-forwardElliot Jay Stocks http://elliotjaystocks.com/blog/ 247
  248. 248. color-forwardElliot Jay Stocks http://elliotjaystocks.com/blog/ 248
  249. 249. color-forwardUniversity of Notre Dame http://glynnhonors.nd.edu/ 249
  250. 250. color-forwardUniversity of Notre Dame http://glynnhonors.nd.edu/ 250
  251. 251. color-forwardUniversity of Notre Dame http://glynnhonors.nd.edu/ 251
  252. 252. color-forwardcandy color 252
  253. 253. new color-forward candy color 253
  254. 254. new+ color-forward candy color 254
  255. 255. new+ color-forward candy color 255
  256. 256. new+ color-forward candy color 256
  257. 257. color-forwardcandy color 257
  258. 258. color-forwardcandy color 258
  259. 259. color-forwardcandy color 259
  260. 260. color-forwardcandy color 260
  261. 261. color-forwardcandy color 261
  262. 262. color-forwardcandy color 262
  263. 263. color-forwardcandy color 263
  264. 264. color-forwardcandy color 264
  265. 265. color-forwardcandy color 265
  266. 266. color-forwardcandy color 266
  267. 267. color-forwardcandy color 267
  268. 268. color-forwardcandy color 268
  269. 269. color-forwardcandy color 269
  270. 270. color-forwardcandy color 270
  271. 271. color-forwardcandy color 271
  272. 272. new+ color-forward candy color 272
  273. 273. color-forwardrunning shy 273
  274. 274. color-forwardkara burke illustrations http://www.karaburke.net/prints.php 274
  275. 275. color-forwardkara burke illustrations http://www.karaburke.net/prints.php 275
  276. 276. color-forwardkara burke illustrations http://www.karaburke.net/prints.php 276
  277. 277. color-forwardSystima Technology http://www.systima-technology.co.uk/ 277
  278. 278. color-forwardSystima Technology http://www.systima-technology.co.uk/ 278
  279. 279. color-forwardSystima Technology http://www.systima-technology.co.uk/ 279
  280. 280. color-forwardSystima Technology http://www.systima-technology.co.uk/ 280
  281. 281. color-forwardflash page-building 281
  282. 282. new+ color-forward Disney.com flash page-building http://home.disney.go.com/ XHTML & CSS http://home.disney.go.com/lite/ 282
  283. 283. color-forwardIR: rocket vs chameleon 283
  284. 284. new+ color-forward IR: rocket vs chameleon 284
  285. 285. new+ color-forward IR: rocket vs chameleon 285
  286. 286. new+ color-forward IR: rocket vs chameleon 286
  287. 287. new+ color-forward IR: rocket vs chameleon A 287
  288. 288. new color-forward IR: rocket vs chameleon A IR: rocket vs chameleon 288
  289. 289. new color-forward IR: rocket vs chameleon A IR: rocket vs chameleon IR: rocket vs chameleon 289
  290. 290. new+ color-forward IR: rocket vs chameleon B 290
  291. 291. new color-forward IR: rocket vs chameleon B IR: rocket vs chameleon 291
  292. 292. new color-forward IR: rocket vs chameleon B IR: rocket vs chameleon 292
  293. 293. new color-forward IR: rocket vs chameleon IR: rocket vs chameleon B IR: rocket vs chameleon 293
  294. 294. new+ color-forward IR: rocket vs chameleon C 294
  295. 295. new color-forward IR: rocket vs chameleon C IR: rocket vs chameleon 295
  296. 296. new color-forward IR: rocket vs chameleon C IR: rocket vs chameleon IR: rocket vs chameleon 296
  297. 297. royal-standard 297
  298. 298. royal-standard 298
  299. 299. royal-standardgrid layoutbaseline-grid layoutwhite background theorywide-screen composition 299
  300. 300. royal-standard grid layoutbaseline-grid layout 300
  301. 301. grid layout 301
  302. 302. new+ royal-standard 302
  303. 303. 303
  304. 304. 304
  305. 305. 305
  306. 306. 306
  307. 307. 307
  308. 308. 308
  309. 309. 309
  310. 310. 310
  311. 311. 311
  312. 312. 312
  313. 313. new+ royal-standard 313
  314. 314. 314
  315. 315. 315
  316. 316. royal-standardTunnel 7 http://www.tunnel7.com/ 316
  317. 317. royal-standardTunnel 7 http://www.tunnel7.com/ 317
  318. 318. royal-standardwhite background theory 318
  319. 319. new+ royal-standard 319
  320. 320. new+ royal-standard 320
  321. 321. royal-standardRikcat Industries http://www.rikcatindustries.com/ 321
  322. 322. royal-standardRikcat Industries http://www.rikcatindustries.com/ 322
  323. 323. royal-standardMark Boulton Design http://www.markboultondesign.com/ 323
  324. 324. royal-standardMark Boulton Design http://www.markboultondesign.com/ 324
  325. 325. new+ royal-standard 325
  326. 326. royal-standardwide-screen composition 326
  327. 327. royal-standardwide-screen composition & elastic layout 327
  328. 328. new+ royal-standard 328
  329. 329. new+ royal-standard 329
  330. 330. new+ royal-standard 330
  331. 331. royal-standard elastic layout 331
  332. 332. Text Zoom royal-standard elastic layout 332
  333. 333. royal-standardInternet Explorer 7 333
  334. 334. royal-standard elastic layout 334
  335. 335. Page Zoom royal-standard elastic layout 335
  336. 336. Text Zoom royal-standard elastic layout 336
  337. 337. Page Zoom royal-standard elastic layout 337
  338. 338. royal-standardText ZoomPage Zoom elastic layout 338
  339. 339. royal-standardhttp://www.mizuho-sc.com/ja/index.html elastic layout 339
  340. 340. royal-standard elastic layout 340
  341. 341. royal-standardText Zoom elastic layout 341
  342. 342. [FIX-EL] fixed elastic layout elastic layout 342
  343. 343. elastic layout 343
  344. 344. royal-standardInternet Explorer 7 elastic layout 344
  345. 345. royal-standardPage Zoom elastic layout 345
  346. 346. royal-standardfixed elastic layoutD-Size+ PageZoom elastic layout 346
  347. 347. new+ royal-standard 347
  348. 348. new+ royal-standard 348
  349. 349. new+ 349
  350. 350. new+ 350
  351. 351. zoomzoom Attribute | zoom Property http://msdn2.microsoft.com/en-us/library/ms531189.aspx 351
  352. 352. zoom Attribute | zoom Property 352
  353. 353. zoom Attribute | zoom Property 353
  354. 354. zoom Attribute | zoom Property 354
  355. 355. zoomzoom Attribute | zoom Property 355
  356. 356. zoomzoom Attribute | zoom Property 356
  357. 357. zoomzoom Attribute | zoom Property 357
  358. 358. zoomzoom Attribute | zoom PropertyInternet Explorer 8, 9...? 358
  359. 359. 359
  360. 360. 360
  361. 361. 361
  362. 362. 362
  363. 363. patchwork 363
  364. 364. patchwork 364
  365. 365. patchworkutility layout [widget & gadget]sidebar-land buyoutmashup [web application hybrid] 365
  366. 366. patchworkUNIQLO http://www.uniqlo.com/jp/utility layout [widget & gadget]sidebar-land buyoutmashup [web application hybrid] 366
  367. 367. new+ patchwork 367
  368. 368. celebrity 368
  369. 369. celebrity 369
  370. 370. celebritypasse-partoutflood-colorappropriation design 370
  371. 371. celebrityEarth Mother http://www.earth-mother.com.au/ 371
  372. 372. celebrityEarth Mother http://www.earth-mother.com.au/ 372
  373. 373. celebrityhopking design http://www.hopkingdesign.com/ 373
  374. 374. celebrityhopking design http://www.hopkingdesign.com/ 374
  375. 375. celebritypasse-partout 375
  376. 376. celebrityBelflora.com http://belflora.com/ 376
  377. 377. celebrityBelflora.com http://belflora.com/ 377
  378. 378. celebrityDaras Garden http://www.darasgarden.com/ 378
  379. 379. celebrityDaras Garden http://www.darasgarden.com/ 379
  380. 380. new+ celebrity 380
  381. 381. celebrityflood-color 381
  382. 382. celebrityscorereviews.com http://scorereviews.com/default.aspx 382
  383. 383. celebrityscorereviews.com 383
  384. 384. celebrityvosressources.com http://www.vosressources.com/ 384
  385. 385. celebrityvosressources.com http://www.vosressources.com/ 385
  386. 386. celebrityEGOLOUNGE http://www.egolounge.de/ 386
  387. 387. celebrityEGOLOUNGE http://www.egolounge.de/ 387
  388. 388. celebrityEGOLOUNGE http://www.egolounge.de/ 388
  389. 389. new+ celebrity 389
  390. 390. celebrityappropriation design 390
  391. 391. celebrityDaVinci Gourmet http://www.davincigourmet.com/ 391
  392. 392. celebrityDaVinci Gourmet http://www.davincigourmet.com/ 392
  393. 393. celebrityDalit Freedom Network http://www.dalitnetwork.org/ 393
  394. 394. celebrityDalit Freedom Network http://www.dalitnetwork.org/ 394
  395. 395. celebrityDalit Freedom Network http://www.dalitnetwork.org/ 395
  396. 396. new+ celebrity 396
  397. 397. 397
  398. 398. new Cascading Style Sheets internet community http://www.w3.org/TR/CSS21/ local community Basic Design media / seminar browser fixedbook / educational institution New Trends of CSS 398
  399. 399. creators creator 399
  400. 400. 400
  401. 401. dismantle learning 401
  402. 402. Cascading Style Sheetscandy color grid layoutrunning shy baseline-grid layoutflash page-building white background theoryIR: rocket vs chameleon wide-screen compositionutility layout [widget & gadget] passe-partoutsidebar-land buyout flood-colormashup [web application hybrid] appropriation design waza 402
  403. 403. 403
  404. 404. new New Trends of CSS pixel-perfect design adaptive design 404
  405. 405. new New Trends of CSS pixel-perfect design adaptive design 405
  406. 406. new New Trends of CSS pixel-perfect design adaptive design 406
  407. 407. new adaptive design 407
  408. 408. Cascading Style Sheets waza 408
  409. 409. 409
  410. 410. Designer meets Designers SESSION 5 410

×