Lightinig Talk in WCAN 2010 Spring

1. inline-block
@version ve
WCAN 2010 Spring LT
1

2. @version ve
-
VERSIONFIVE
-
-
2

3. 3/1 HTML5 + CSS3
3/15 8
3

4. inline-block?
4

5. E{
display: inline-block ;
}
CSS 2.1
(6, 7), 8 3- 2-
5

6. WCAN Web Creators Association Nagoya
inline-block inline-block
WEB
WEB
(display: inline)
(display: block)
6

7. WCAN Web Creators Association Nagoya
inline-block inline-block
WEB
WEB
(text-align, vertical-align, etc )
(margin, padding, width, height, etc )
7

8. E{
display: inline-block;
/display: inline; /*for IE6-7*/
/zoom: 1; /*for IE6-7*/
}
8

9. inline-block
3 9

10. 1.
10

11. 1.
HTML
<h2>
<img /> <span>2</span>
</h2>
11

12. 1.
HTML
<h2>
<img /> <span>2</span>
</h2>
11

13. 1.
CSS
h2 span {
display: inline-block;
/display: inline;
/zoom: 1;
padding: xxx;
height: xxx;
vertical-align: xxx;
}
12

14. 2.
13

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. 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. 3.
16

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. 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. 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. inline-block
✓
✓ CSS
✓ IE6 →
20

22. ?
Twitter @version ve
Blog http://version ve.jp/
21

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