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

Designer meets Designers SESSION 52007.8.10 1

Instructional Designer 3

new subject waza 7

new http://www.w3.org/TR/CSS21/ Basic Design subject browser fixed New Trends of CSS 8

new+ http://www.w3.org/TR/CSS21/ Basic Design subject browser fixed New Trends of CSS 9

Introduction 10

Web standards 1998-2000Before/After CSS Design 11

Netscape Communicator 4.75 31

Netscape Communicator 4.75 34

WaSPThe Web Standards Project 40

Web Standards 42

Web Standards 43

Web Standards 44

Web Standards 45

Cascading Style Sheets waza 56

FunctionalBeauty 59

FunctionalBeauty 60

FunctionalBeauty 61

FunctionalBeauty 62

FunctionalBeauty 63

FunctionalBeauty 64

FunctionalBeauty 65

new Cascading Style Sheets waza skill up 66

Cascading Style SheetsCascading Style Sheets Level 2 Revision 1 (CSS 2.1) Speciﬁcation http://www.w3.org/TR/CSS21/ 67

Cascading Style SheetsBasic Design 68

Cascading Style Sheetsbrowser fixed 69

Cascading Style SheetsNew Trends of CSS 70

Cascading Style Sheets http://www.w3.org/TR/CSS21/ Basic Design browser fixedNew Trends of CSS 71

Cascading Style Sheets http://www.w3.org/TR/CSS21/ Basic Designbrowser fixedNew Trends of CSS 73

Cascading Style Sheets 74

Cascading Style Sheets 75

Cascading Style Sheets http://www.w3.org/TR/CSS21/ Basic Designbrowser fixedNew Trends of CSS 76

Cascading Style SheetsNew Trends of CSSpixel-perfect design 78

Cascading Style SheetsNew Trends of CSSpixel-perfect design 79

Cascading Style SheetsNew Trends of CSSpixel-perfect design adaptive design 80

Cascading Style Sheetsinternet community http://www.w3.org/TR/CSS21/ Basic Design browser fixed New Trends of CSS 81

Cascading Style Sheetsinternet community http://www.w3.org/TR/CSS21/ local community Basic Design browser fixed New Trends of CSS 82

Cascading Style Sheetsinternet community http://www.w3.org/TR/CSS21/ local community Basic Design media / seminar browser fixed New Trends of CSS 83

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

creators creator 86

creators creator 87

creators creatoralpha blogger asset 89

RSS Feed 91

Fast ladder http://fastladder.com/ 92

dismantle learning 95

dismantle learningWeb Developer http://chrispederick.com/work/web-developer/Web Developer http://www.infoaxia.com/tools/webdeveloper/ http://www.infoaxia.co.jp/ 96

dismantle learningW3C http://www.w3.org/ 97

dismantle learninghttp://www.mizuho-sc.com/ja/index.html 109

dismantle learninghttp://www.expo2005.or.jp/jp/ 112

CSS Rule 116

CSS Rulehicksdesign http://www.hicksdesign.co.uk/ 117

CSS Rule 118

CSS RuleThe Web Standards Project [WaSP] http://www.webstandards.org/ 119

CSS Rule 120

CSS RuleTextDrive http://textdrive.com/ 121

CSS Rule 122

Global Navigation step1-17 123

Apple.comGlobal Navigation step1-17 124

Apple.comGlobal Navigation step1-17 125

step1 XHTML 126

step2 XHTML & CSS 127

step3 #globalheader { width: 982px; height: 38px; margin: 18px auto; position: relative; z-index: 9998; } #globalheader #globalnav { margin: 0; padding: 0; } 128

step4 #globalheader #globalnav li { display: inline; } 129

step5 #globalheader #globalnav li a { ﬂoat: left; width: 117px; height: 0; padding-top: 38px; overﬂow: hidden; } 130

Global Navigation Image PNG & GIF 132

step6 #globalheader #globalnav li a, #globalheader #globalsearch { background-image: url(globalnavbg.png); _background-image: url(globalnavbg.gif); background-repeat: no-repeat; } 134

step6 #globalheader #globalnav li a, #globalheader #globalsearch { background-image: url(globalnavbg.png); _background-image: url(globalnavbg.gif); background-repeat: no-repeat; } 135

step7 #globalheader #globalnav li#gn-store a { background-position: 0 0; } #globalheader #globalnav li#gn-store a { background-position: -117px 0; } 136

step8 #globalheader #globalnav li#gn-mac a { background-position: -234px 0; } 137

step9 #globalheader #globalnav li#gn-ipoditunes a { background-position: -351px 0; } 138

step10 #globalheader #globalnav li#gn-iphone a { background-position: -468px 0; } 139

step11 #globalheader #globalnav li#gn-downloads a { background-position: -585px 0; } 140

step12 #globalheader #globalnav li#gn-support a { background-position: -702px 0; } 141

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

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

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

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

step16 #globalsearch { width: 163px; height: 38px; position: absolute; top: 0; right: 0; background-position: 100% 0; background-repeat: no-repeat; } 146

step17 #globalsearch label .prettyplaceholder { display: none; } 147

Apple.comGlobal Navigationstep1-17 148

Apple.comGlobal Navigationstep1-17 149

new+ dismantle learning 150

new+ 151

new+ Cascading Style Sheets 152

new+ waza waza waza waza waza Cascading Style Sheets 153

new Cascading Style Sheets http://www.w3.org/TR/CSS21/ Basic Design browser fixed New Trends of CSS 154

new+ Cascading Style Sheets CSS dismantle learning 155

elastic layout outline 156

new+ elastic layout outline elastic layout 157

new elastic layout outline ﬁxed elastic layout ﬂuid elastic layout 158

elastic layout outline ﬁxed elastic layoutMozilla Foundation http://www.mozilla.org/ 159

elastic layout outlineﬁxed elastic layout 160

elastic layout outlineMozilla Corporationhttp://www.mozilla.com/en-US/ 163

elastic layout outlineﬂuid layout 164

elastic layout outlineﬂuid layout 165

elastic layout outline ﬁxed elastic layoutGBHXonline.com http://gbhxonline.com/ 166

elastic layout details 169

elastic layout detailsA List Aparthttp://alistapart.com/ 170

elastic layout detailsElastic Design by Patrick Griffithshttp://alistapart.com/articles/elastic/ 171

elastic layout detailsFixed or fluid width? Elastic!http://www.456bereastreet.com/archive/200504/ﬁxed_or_ﬂuid_width_elastic/ 172

elastic layout detailsAndy ClarkeStuff and Nonsensehttp://www.stuffandnonsense.co.uk/ 173

elastic layout detailsA List (taken) Aparthttp://www.stuffandnonsense.co.uk/archives/a_list_taken_apart.html 174

elastic layout detailsResolution dependent style switchinghttp://www.456bereastreet.com/archive/200511/resolution_dependent_style_switching/ 175

elastic layout detailsParticletreehttp://particletree.com/DRDLDynamic Resolution Dependent Layoutshttp://particletree.com/examples/dynamiclayouts/ 176

elastic layout detailsDynamic Resolution Dependent Layouts 177

elastic layout detailsResolution vs. browser size vs. fixed or adaptive width http://www.456bereastreet.com/archive/200611/resolution_vs_browser_size_vs_ﬁxed_or_adaptive_width/ 180

elastic layout details Resolution vs. browser size vs.fixed or adaptive width 181

elastic layout demonstration 182

Elastic Design DemonstrationElastic Design by Patrick Griffithshttp://alistapart.com/articles/elastic/ 183

Elastic Design Demonstration 184

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

Elastic Design Demonstration 186

new+ Cascading Style Sheets browser fixed New Trends of CSS 190

The weird and wonderful world of Internet Explorer 191

The weird and wonderful world of Internet Explorer 192

The weird and wonderful world of Internet Explorer IE hasLayout outline 193

IE hasLayout outlinemsdnInternet Explorer Developer CenterLearn | Cascading Style Sheets (CSS)http://msdn2.microsoft.com/en-us/ie/aa740476.aspx 194

IE hasLayout outlineIEBloghttp://blogs.msdn.com/ie/ 195

IE hasLayout outlineIE Bug Bug 196

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

IE hasLayout outline CSS hacksCSS hacks and broken pages 198

IE hasLayout outlineExplorer Exposed!The weird and wonderful world of Internet Explorerhttp://www.positioniseverything.net/explorer.html 199

IE hasLayout outlineExplorer Exposed!The weird and wonderful world of Internet ExplorerIE6 Peekaboo Bughttp://www.positioniseverything.net/explorer/peekaboo.html 200

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

IE hasLayout outlinemsdnhasLayout Propertyhttp://msdn2.microsoft.com/en-us/library/ms533776.aspx 204

IE hasLayout outline haslayout hasLayout PropertyGets a value that indicates whether the object has layout. 205

IE hasLayout outlineThe following example shows how to use the hasLayout property to determine whether an object has layout. 206

new IE hasLayout outline haslayout 209

new IE hasLayout outline haslayout CSS property Value display inline-block height any value ﬂoat left or right position absolute width any value writing-mode tb-rl zoom any value 210

new IE hasLayout outline haslayout CSS hacks !? CSS hacks and broken pages 211

new IE hasLayout outline haslayout “non-layout” elements or “has layout” elements 212

new IE hasLayout outline haslayout Many common IE ﬂoat 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

new IE hasLayout outline haslayout IE6 Peekaboo Bug 215

IE hasLayout outlineOn having layouthttp://www.satzansatz.de/cssd/onhavinglayout.html 223

IE hasLayout outlineDefault layout elements<html>, <body><table>, <tr>, <th>, <td><img><hr><input>, <button>, <select>, <textarea>,<ﬁeldset>, <legend><iframe>, <embed>, <object>, <applet><marquee> 224

IE hasLayout outlineIE hack management 225

IE hasLayout outlineThoughts on IE hack managementhttp://onhavinglayout.fwpf-webdesign.de/hack_management/ 226

new Cascading Style Sheets waza 231

new Cascading Style Sheets candy color grid layout running shy baseline-grid layout ﬂash page-building white background theory IR: rocket vs chameleon wide-screen composition utility layout [widget & gadget] passe-partout sidebar-land buyout ﬂood-color mashup [web application hybrid] appropriation design waza 235

new+ Cascading Style Sheets 236

new Cascading Style Sheets color-forward royal-standard patchwork celebrity 237

color-forward 238

color-forward 239

color-forwardcandy colorrunning shyﬂash page-buildingIR: rocket vs chameleon 240

color-forwardCameron Moll ~ I {heart} design. http://www.cameronmoll.com/portfolio/ 241

color-forwardThe Consult http://www.theconsult.com/ 242

color-forwardStartseite von >>Denklichter http://www.denk-licht.de/ 243

color-forwardStartseite von >>Denklichter http://www.denk-licht.de/ 244

color-forwardhrasti.com http://www.hrasti.com/ 245

color-forwardhrasti.com http://www.hrasti.com/ 246

color-forwardElliot Jay Stocks http://elliotjaystocks.com/blog/ 247

color-forwardElliot Jay Stocks http://elliotjaystocks.com/blog/ 248

color-forwardUniversity of Notre Dame http://glynnhonors.nd.edu/ 249

color-forwardcandy color 252

new color-forward candy color 253

new+ color-forward candy color 254

color-forwardrunning shy 273

color-forwardkara burke illustrations http://www.karaburke.net/prints.php 274

color-forwardSystima Technology http://www.systima-technology.co.uk/ 277

color-forwardﬂash page-building 281

new+ color-forward Disney.com ﬂash page-building http://home.disney.go.com/ XHTML & CSS http://home.disney.go.com/lite/ 282

color-forwardIR: rocket vs chameleon 283

new+ color-forward IR: rocket vs chameleon 284

new+ color-forward IR: rocket vs chameleon A 287

new color-forward IR: rocket vs chameleon A IR: rocket vs chameleon 288

new color-forward IR: rocket vs chameleon A IR: rocket vs chameleon IR: rocket vs chameleon 289

new+ color-forward IR: rocket vs chameleon B 290

new color-forward IR: rocket vs chameleon B IR: rocket vs chameleon 291

new color-forward IR: rocket vs chameleon B IR: rocket vs chameleon 292

new color-forward IR: rocket vs chameleon IR: rocket vs chameleon B IR: rocket vs chameleon 293

new+ color-forward IR: rocket vs chameleon C 294

new color-forward IR: rocket vs chameleon C IR: rocket vs chameleon 295

new color-forward IR: rocket vs chameleon C IR: rocket vs chameleon IR: rocket vs chameleon 296

royal-standard 297

royal-standard 298

royal-standardgrid layoutbaseline-grid layoutwhite background theorywide-screen composition 299

royal-standard grid layoutbaseline-grid layout 300

grid layout 301

new+ royal-standard 302

royal-standardTunnel 7 http://www.tunnel7.com/ 316

royal-standardTunnel 7 http://www.tunnel7.com/ 317

royal-standardwhite background theory 318

royal-standardRikcat Industries http://www.rikcatindustries.com/ 321

royal-standardRikcat Industries http://www.rikcatindustries.com/ 322

royal-standardMark Boulton Design http://www.markboultondesign.com/ 323

royal-standardMark Boulton Design http://www.markboultondesign.com/ 324

royal-standardwide-screen composition 326

royal-standardwide-screen composition & elastic layout 327

royal-standard elastic layout 331

Text Zoom royal-standard elastic layout 332

royal-standardInternet Explorer 7 333

Page Zoom royal-standard elastic layout 335

Text Zoom royal-standard elastic layout 336

Page Zoom royal-standard elastic layout 337

royal-standardText ZoomPage Zoom elastic layout 338

royal-standardhttp://www.mizuho-sc.com/ja/index.html elastic layout 339

royal-standardText Zoom elastic layout 341

[FIX-EL] fixed elastic layout elastic layout 342

elastic layout 343

royal-standardInternet Explorer 7 elastic layout 344

royal-standardPage Zoom elastic layout 345

royal-standardfixed elastic layoutD-Size+ PageZoom elastic layout 346

new+ 349

new+ 350

zoomzoom Attribute | zoom Property http://msdn2.microsoft.com/en-us/library/ms531189.aspx 351

zoom Attribute | zoom Property 352

zoomzoom Attribute | zoom Property 355

zoomzoom Attribute | zoom PropertyInternet Explorer 8, 9...? 358

patchwork 363

patchwork 364

patchworkutility layout [widget & gadget]sidebar-land buyoutmashup [web application hybrid] 365

patchworkUNIQLO http://www.uniqlo.com/jp/utility layout [widget & gadget]sidebar-land buyoutmashup [web application hybrid] 366

new+ patchwork 367

celebrity 368

celebrity 369

celebritypasse-partoutﬂood-colorappropriation design 370

celebrityEarth Mother http://www.earth-mother.com.au/ 371

celebrityEarth Mother http://www.earth-mother.com.au/ 372

celebrityhopking design http://www.hopkingdesign.com/ 373

celebrityhopking design http://www.hopkingdesign.com/ 374

celebritypasse-partout 375

celebrityBelflora.com http://belﬂora.com/ 376

celebrityBelflora.com http://belﬂora.com/ 377

celebrityDaras Garden http://www.darasgarden.com/ 378

celebrityDaras Garden http://www.darasgarden.com/ 379

new+ celebrity 380

celebrityﬂood-color 381

celebrityscorereviews.com http://scorereviews.com/default.aspx 382

celebrityscorereviews.com 383

celebrityvosressources.com http://www.vosressources.com/ 384

celebrityvosressources.com http://www.vosressources.com/ 385

celebrityEGOLOUNGE http://www.egolounge.de/ 386

new+ celebrity 389

celebrityappropriation design 390

celebrityDaVinci Gourmet http://www.davincigourmet.com/ 391

celebrityDaVinci Gourmet http://www.davincigourmet.com/ 392

celebrityDalit Freedom Network http://www.dalitnetwork.org/ 393

new+ celebrity 396

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

creators creator 399

Cascading Style Sheetscandy color grid layoutrunning shy baseline-grid layoutﬂash page-building white background theoryIR: rocket vs chameleon wide-screen compositionutility layout [widget & gadget] passe-partoutsidebar-land buyout ﬂood-colormashup [web application hybrid] appropriation design waza 402

new New Trends of CSS pixel-perfect design adaptive design 404

new adaptive design 407

Designer meets Designers SESSION 5 410

http://s.deeeki.com	47
http://c0c0c0.info	15
http://slide.local	1
https://si0.twimg.com	1
https://twitter.com	1

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

by Youji Sakai

Accessibility

Categories

Upload Details

Usage Rights

5 Embeds 65

Statistics

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