display:inline-block‚ª‚¯‚Á‚±‚¤•Ö—˜B‚¾‚¯‚Çc

2009/04/06

ƒJƒeƒSƒŠF: CSS

ƒ^ƒOF: CSS; inline-block

inline-block

¬‚³‚¢ƒuƒƒbƒN—v‘f‚Æ‚©‚ð‰¡•À‚Ñ‚É‚³‚¹‚½‚¢‚Æ‚«‚Æ‚©Ainline-blockŽg‚¤‚Æ•Ö—˜‚È‚ñ‚Å‚·‚æ‚ËB•‚à‚‚³‚àŽw’è‚Å‚«‚Ä‚µ‚Ü‚¤—v‘f‚É‚Ý‚¹‚é‚±‚Æ‚ª‚Å‚«‚éinline—v‘f‚É‚È‚é‚Æ‚¢‚¤‚Ì‚ª‚Æ‚Ä‚à•Ö—˜B‚í‚´‚í‚´block—v‘f‚É‚µ‚ÄAfloat‚³‚¹‚Ä‰¡•À‚Ñ‚É‚³‚¹‚éA‚»‚µ‚Ä•À‚Ô—v‘f‚ðI‚í‚ç‚¹‚½‚ ‚Æ‚Íclear‚ð‚µ‚Äc‚È‚ñ‚Ä‚±‚Æ‚ð‚µ‚Ä‚¢‚é‚ÆAŽw’è‚ª‘½‚‚È‚Á‚Ä‚µ‚Ü‚¤‚ñ‚Å‚·‚æ‚ËB‚Å‚·‚ªAinline-block‚ðŽg‚¤‚ÆA‚»‚ñ‚È‚±‚Æ‚µ‚È‚‚Ä‚àŠÈ’P‚É•À‚×‚¿‚á‚¤‚Á‚Ä‚Ì‚Í‚¢‚¢‚Å‚·‚æ‚ËB

‚µ‚©‚µA‚»‚Ìinline-block‚ÍAIE‚âFirefox2‚È‚Ç‚ÌƒI[ƒ‹ƒhƒuƒ‰ƒEƒU‚¾‚Æ‚¤‚Ü‚“®ì‚µ‚È‚¢‚±‚Æ‚Ì•û‚ª‘½‚¢B¡‚Å‚ÍŽg‚¦‚é‚æ‚¤‚É‚È‚Á‚Ä‚¢‚éƒuƒ‰ƒEƒU‚ª‘½‚¢‚Ì‚Å‚·‚ªAIE‚âˆÈ‘O‚Ìƒuƒ‰ƒEƒU‚ð‹C‚É‚·‚é‚ÆAŽg‚¢‚Ç‚±‚ë‚ª‚È‚©‚Á‚½‚è‚à‚·‚éB

inline-block

inline-block‚ÌƒI[ƒ‹ƒhƒuƒ‰ƒEƒU‚âIE‚É‚Â‚¢‚Ä‚Ì“®ì‚ÍAŽQl‚Æ‚µ‚Ä‚¢‚éƒTƒCƒg‚ðŒ©‚Ä‚à‚ç‚¢‚½‚¢B

IE 6, IE 7 ‚Ì inline-block lŽ@

ƒXƒ^ƒCƒ‹ƒV[ƒg‚ð‚ß‚®‚é–`Œ¯: inline-block‚ÌŠï–‚È¢ŠE

Žg‚¦‚½‚èŽg‚¦‚È‚©‚Á‚½‚èc‚¢‚ë‚¢‚ël‚¦‚é‚æ‚èblockŽw’è‚µ‚Äfloat‚³‚¹‚ÄAÅŒã‚Éclear“ü‚ê‚½‚Ù‚¤‚ªŠy‚È‚Ì‚©‚àc‚È‚ñ‚ÄŽv‚Á‚Ä‚µ‚Ü‚¢‚Ü‚·BŽ–ŽÀAƒI[ƒ‹ƒhƒuƒ‰ƒEƒU‘Î‰ž‚É‚³‚¹‚é‚È‚çA‚»‚Ì‚Ù‚¤‚ª–¾‚ç‚©‚Éì‹ÆH’ö‚ª‚È‚‘‚‚È‚é‚ÆŽv‚¤B•ö‚ê‚éŒ´ˆö‚ðì‚Á‚Ä‚µ‚Ü‚¤‚æ‚è‚àA‚Å‚«‚é‚¾‚¯Œ´ˆö‚É‚È‚ç‚È‚¢CSS‚ðŽw’è‚µ‚½‚Ù‚¤‚ªA‘‚¢‚Å‚·‚à‚Ì‚ËB

inline-block‚ª•Ö—˜‚¾‚ÆŽv‚¤Žž

—á‚¦‚Î‰º‹L‚Ì‚æ‚¤‚Èƒ\[ƒX‚Ìê‡

¡ƒTƒ“ƒvƒ‹HTML

<ul>
  <li><a href="#">‚P</a></li>
  <li><a href="#">‚Q</a></li>
  <li><a href="#">‚R</a></li>
  <li><a href="#">‚S</a></li>
  <li><a href="#">‚T</a></li>
  <li><a href="#">‚U</a></li>
  <li><a href="#">‚V</a></li>
</ul>

¡ƒTƒ“ƒvƒ‹CSS

ul{
	margin: 0;
	padding: 20px 0;
	text-align: center;
}
li{
	display: inline-block;
	margin: 0;
	padding: 5px 10px;
	border: 1px solid #cccccc;
	list-style-tyle: none;
}