Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

明日から使える inline-block

1,476 views

Published on

Lightinig Talk in WCAN 2010 Spring

Published in: Technology, Education
  • Be the first to comment

明日から使える inline-block

  1. 1. inline-block @version ve WCAN 2010 Spring LT 1
  2. 2. @version ve - VERSIONFIVE - - 2
  3. 3. 3/1 HTML5 + CSS3 3/15 8 3
  4. 4. inline-block? 4
  5. 5. E{ display: inline-block ; } CSS 2.1 (6, 7), 8 3- 2- 5
  6. 6. WCAN Web Creators Association Nagoya inline-block inline-block WEB WEB (display: inline) (display: block) 6
  7. 7. WCAN Web Creators Association Nagoya inline-block inline-block WEB WEB (text-align, vertical-align, etc ) (margin, padding, width, height, etc ) 7
  8. 8. E{ display: inline-block; /display: inline; /*for IE6-7*/ /zoom: 1; /*for IE6-7*/ } 8
  9. 9. inline-block 3 9
  10. 10. 1. 10
  11. 11. 1. HTML <h2> <img /> <span>2</span> </h2> 11
  12. 12. 1. HTML <h2> <img /> <span>2</span> </h2> 11
  13. 13. 1. CSS h2 span { display: inline-block; /display: inline; /zoom: 1; padding: xxx; height: xxx; vertical-align: xxx; } 12
  14. 14. 2. 13
  15. 15. 2. HTML <ul ><li><a>1</a></li ><li><a>2</a></li ><li><a>3</a></li ><li><a>4</a></li ></ul> 14
  16. 16. 2. CSS li a { display: inline-block; /display: inline; /zoom: 1; margin: 0.3em; padding: 0.3em 0.5em; } ul {text-align: center;} li {display: inline;} 15
  17. 17. 3. 16
  18. 18. 3. oat: oat: oat: left; left; left; HTML oat: <div> left; <div> 1</div> oat: oat: <div> 2</div> oat: left; left; left; </div> oat: oat: left; left; 17
  19. 19. 3. oat: oat: oat: left; left; left; CSS oat: div div { left; display: inline-block; oat: oat: /display: inline; oat: left; left; /zoom: 1; left; } oat: oat: left; left; 18
  20. 20. 3. inline inline inline CSS -block -block -block div div { inline inline display: inline-block; inline -block -block -block /display: inline; /zoom: 1; inline inline inline } -block -block -block 19
  21. 21. inline-block ✓ ✓ CSS ✓ IE6 → 20
  22. 22. ? Twitter @version ve Blog http://version ve.jp/ 21
  23. 23. display:inline-block | - http://c-brains.jp/blog/wsg/09/09/10-010536.php display : inline-block - http://www.yomotsu.net/works/081016cssnite/ IE 6, IE 7 inline-block | - http://www.yomotsu.net/wp/?p=390 inline-block | Takazudo Clipping* - http://gyauza.egoism.jp/clip/archives/2008/10/081016-inline-block/ 22

×