¼Ì¿¿¤ÎÏȤò³°¤·¤Æ¼Ì¿¿¤Î¥µ¥à¥Í¥¤¥ë¤ò²£¤Ë£²¤Ä£³¤Äʤ٤¿¤¤
¤È¤¤¤¦¤³¤È¤Ç¤¹¤Î¤Ç¤ä¤Ã¤Æ¤ß¤Þ¤·¤¿



¤³¤ó¤Ê´¶¤¸¤Ç¤è¤í¤·¤¤¤Ç¤·¤ç¤¦¤«¡©
°Ê²¼¤Ë¤³¤ÎÊýË¡¤ò½ñ¤¤¤Æ¤ß¤Þ¤¹¤Í¡£
²èÁü¤ÎÏȤò³°¤¹¤Ë¤Ï
´ÉÍý¥Ú¡¼¥¸¤Î¤ª»È¤¤¤Î¥Æ¥ó¥×¥ì¡¼¥È¡Öalbum2¡×¤ÎÊÔ½¸¤ò¥¯¥ê¥Ã¥¯
¥¹¥¿¥¤¥ë¥·¡¼¥È¤Î
/*¥Æ¥¥¹¥ÈÆâ¤Î²èÁü*/¤È¸À¤¦¤È¤³¤í¤ò
background-color: #ffffff;
padding: 2px;
float: left;
°ÕÌ£¤Ïfloat: left;¤¬²£¤Ëʤ٤ë¤È¤¤¤¦¤³¤È¤Ç¤¹¡£º£¤Þ¤Ç¤âÆþ¤Ã¤Æ¤¤¤Þ¤·¤¿¤Í¡£
padding: 2px;¤Ï²èÁü¤È²èÁü¤Î·ä´Ö¤Ç¤¹¡£0¤À¤È¼Ì¿¿Æ±»Î¤¬¤¯¤Ã¤Ä¤¤¤Æ¤·¤Þ¤¤¤Þ¤¹¤Î¤Ç¡¢1¤«2¤¯¤é¤¤¤Ï¤¢¤Ã¤¿¤Û¤¦¤¬Îɤ¤¤Ç¤¹¤Í¡£¤³¤Îµ»ö¤Ç¤Ï2px¤Ë¤·¤Æ¤ß¤Þ¤·¤¿¡£
¼¡¤Ë
¡Ö´Ä¶ÀßÄê¤ÎÊѹ¹¡×¤Î¥µ¥à¥Í¥¤¥ëºîÀ®¤Î¥µ¥¤¥º¤ò100¡Á120¤¯¤é¤¤¤Ë¤·¤Æ¹¹¿·¡Ê¤³¤Î¿ô»ú¤ÏBlog¤ò¸«¤Æ·è¤á¤Æ¤¯¤À¤µ¤¤¡£¡Ë¤³¤Îµ»ö¤Ç¤Ï100px¤ËÀßÄꤷ¤Þ¤·¤¿¡£
µ»ö¤ò½ñ¤¯»þ¡¢
À褺²èÁü¤ò¥¢¥Ã¥×¤¹¤ë»þ
£±¡¢¡Ö¥µ¥à¥Í¥¤¥ë Ʊ»þ¤ËºîÀ®¤¹¤ë(jpg)¡×¤Ë¥Á¥§¥Ã¥¯¤òÆþ¤ì¤Þ¤¹¡£
£²¡¢²èÁü¤Î¥µ¥à¥Í¥¤¥ë¤Çµ»ö¤ò½ñ¤¯ ¤ò¥¯¥ê¥Ã¥¯
µ»ö¤òºîÀ®Éôʬ¤ËÆþ¤Ã¤¿¥¿¥°¤Î°ìÈֺǸå¡Ö¡¡<br clear="all" />¡¡¡×¤ò¾Ã¤·¤Þ¤¹¡£
<br clear="all" />¤¬Ê¤٤º¤Ëº¸²¼¤Ø¤È¸À¤¦°ÕÌ£¤Ç¤¹¡£
¤¤¤«¤¬¤Ç¤·¤ç¤¦¤«¡©
¤È¤¤¤¦¤³¤È¤Ç¤¹¤Î¤Ç¤ä¤Ã¤Æ¤ß¤Þ¤·¤¿



¤³¤ó¤Ê´¶¤¸¤Ç¤è¤í¤·¤¤¤Ç¤·¤ç¤¦¤«¡©
°Ê²¼¤Ë¤³¤ÎÊýË¡¤ò½ñ¤¤¤Æ¤ß¤Þ¤¹¤Í¡£
²èÁü¤ÎÏȤò³°¤¹¤Ë¤Ï
´ÉÍý¥Ú¡¼¥¸¤Î¤ª»È¤¤¤Î¥Æ¥ó¥×¥ì¡¼¥È¡Öalbum2¡×¤ÎÊÔ½¸¤ò¥¯¥ê¥Ã¥¯
¥¹¥¿¥¤¥ë¥·¡¼¥È¤Î
/*¥Æ¥¥¹¥ÈÆâ¤Î²èÁü*/¤È¸À¤¦¤È¤³¤í¤ò
background-color: #ffffff;
padding: 2px;
float: left;
°ÕÌ£¤Ïfloat: left;¤¬²£¤Ëʤ٤ë¤È¤¤¤¦¤³¤È¤Ç¤¹¡£º£¤Þ¤Ç¤âÆþ¤Ã¤Æ¤¤¤Þ¤·¤¿¤Í¡£
padding: 2px;¤Ï²èÁü¤È²èÁü¤Î·ä´Ö¤Ç¤¹¡£0¤À¤È¼Ì¿¿Æ±»Î¤¬¤¯¤Ã¤Ä¤¤¤Æ¤·¤Þ¤¤¤Þ¤¹¤Î¤Ç¡¢1¤«2¤¯¤é¤¤¤Ï¤¢¤Ã¤¿¤Û¤¦¤¬Îɤ¤¤Ç¤¹¤Í¡£¤³¤Îµ»ö¤Ç¤Ï2px¤Ë¤·¤Æ¤ß¤Þ¤·¤¿¡£
¼¡¤Ë
¡Ö´Ä¶ÀßÄê¤ÎÊѹ¹¡×¤Î¥µ¥à¥Í¥¤¥ëºîÀ®¤Î¥µ¥¤¥º¤ò100¡Á120¤¯¤é¤¤¤Ë¤·¤Æ¹¹¿·¡Ê¤³¤Î¿ô»ú¤ÏBlog¤ò¸«¤Æ·è¤á¤Æ¤¯¤À¤µ¤¤¡£¡Ë¤³¤Îµ»ö¤Ç¤Ï100px¤ËÀßÄꤷ¤Þ¤·¤¿¡£
µ»ö¤ò½ñ¤¯»þ¡¢
À褺²èÁü¤ò¥¢¥Ã¥×¤¹¤ë»þ
£±¡¢¡Ö¥µ¥à¥Í¥¤¥ë Ʊ»þ¤ËºîÀ®¤¹¤ë(jpg)¡×¤Ë¥Á¥§¥Ã¥¯¤òÆþ¤ì¤Þ¤¹¡£
£²¡¢²èÁü¤Î¥µ¥à¥Í¥¤¥ë¤Çµ»ö¤ò½ñ¤¯ ¤ò¥¯¥ê¥Ã¥¯
µ»ö¤òºîÀ®Éôʬ¤ËÆþ¤Ã¤¿¥¿¥°¤Î°ìÈֺǸå¡Ö¡¡<br clear="all" />¡¡¡×¤ò¾Ã¤·¤Þ¤¹¡£
<br clear="all" />¤¬Ê¤٤º¤Ëº¸²¼¤Ø¤È¸À¤¦°ÕÌ£¤Ç¤¹¡£
¤¤¤«¤¬¤Ç¤·¤ç¤¦¤«¡©
ÀèÆü¡Ê2008/06/11¡Ë¤Î¡ÖCSS ¤À¤±¤Ç¥µ¥à¥Í¥¤¥ë¥®¥ã¥é¥ê¡¼¡×
¤Îcss¤òÊÙ¶¯¤·¤Þ¤·¤¿¡£
¥Þ¥¦¥¹¥ª¡¼¥Ð¡¼¤ÇŸ³«¡¢¹¹¤Ë¥µ¥à¥Í¥¤¥ë²èÁü¤Ë¿¨¤ì¤ë¤È³ÈÂç
¤È¸À¤¦¤È¤³¤í¤ÎCSS¤¬¤À¤¤¤¿¤¤²ò¤«¤ê¤Þ¤·¤¿¡£ÌÌÇò¤¤¤Ç¤¹¤Í¡£
˺¤ì¤Ê¤¤¤è¤¦¤Ë½ñ¤¤¤ÆÃÖ¤¤Þ¤¹¡£
¥µ¥ó¥×¥ë
HTMLÉôʬ
<div class="album">
<ul>
<li><a class="set" href="#nogo">¥¢¥¸¥¢¥ó¥¿¥à#1<!--[if gte IE 7]><!--></a><!--<![endif]--><b></b>
<ins><table><tr><td>
<ul>
<li>
<a href="#"><img src="http://blog-imgs-27.fc2.com/d/r/e/dreamy/2008-6-9-38.jpg" alt="ÂåÂØ" width="50"
height="50" /></a>
</li>
</ul>
</td></tr></table></ins><!--[if lte IE 6]
></a><![endif]-->
</li>
</ul>
<br class="clear" />
</div><!--album-->
¤â¤·¥á¥Ë¥å¡¼¤Îʸ»ú¤ò¥¯¥ê¥Ã¥¯¤·¤¿¤éŸ³«¤¹¤ë
¤È¸À¤¦¾ì¹ç¤Ï
¡Öhover¡×¤Ç¤Ï¤Ê¤¯¡Öactive¡×¤ò»È¤¦
¤Îcss¤òÊÙ¶¯¤·¤Þ¤·¤¿¡£
¥Þ¥¦¥¹¥ª¡¼¥Ð¡¼¤ÇŸ³«¡¢¹¹¤Ë¥µ¥à¥Í¥¤¥ë²èÁü¤Ë¿¨¤ì¤ë¤È³ÈÂç
¤È¸À¤¦¤È¤³¤í¤ÎCSS¤¬¤À¤¤¤¿¤¤²ò¤«¤ê¤Þ¤·¤¿¡£ÌÌÇò¤¤¤Ç¤¹¤Í¡£
˺¤ì¤Ê¤¤¤è¤¦¤Ë½ñ¤¤¤ÆÃÖ¤¤Þ¤¹¡£
¥µ¥ó¥×¥ë
CSSÉôʬ
/*¥á¥Ë¥å¡¼¤Îʸ»ú¤Ë¿¨¤ì¤¿¤éŸ³«¤¹¤ë¡¡¤³¤³¤«¤é*/
/*¥µ¥à¥Í¥¤¥ë²èÁü¤¬Æþ¤ëtable*/
.album ul :hover table{
padding:0;
margin-top:-2px;
display:block;
border:1px solid red;
border-width:0px 1px 1px 1px;}
/* ¥á¥Ë¥å¡¼¤Î°ì¸Ä°ì¸Ä¤Îtable ʸ»ú¤À¤±¤Î°Ï¤ß¤Ë¤Ê¤Ã¤¿*/
.album ul li table {
margin:0;
padding:0;
display:none;
}
/* transparent¤¬ÇØ·Ê¿§¤òÆ©²á¤µ¤»¤ë»ØÄê*/
.album ul li a.set:hover {
background:transparent;
}
/* transparent¤¬ÇØ·Ê¿§¤òÆ©²á¤µ¤»¤ë»ØÄê*/
.album ul li:hover a.set {
background:transparent;
}
/*¥á¥Ë¥å¡¼¤Îʸ»ú¤Ë¿¨¤ì¤¿¤éŸ³«¤¹¤ë¡¡¤³¤³¤Þ¤Ç*/
/*Ÿ³«¤·¤¿¥µ¥à¥Í¥¤¥ë²èÁü¤Î¾å¤Ë¥Þ¥¦¥¹¥ª¡¼¥Ð¡¼¤Ç³ÈÂç¡¡¤³¤³¤«¤é*/
.album ul li a.set:hover li a:hover
{
background-color: #fff;
}
.album ul li a.set:hover li a:hover img{
width:auto;
height:auto;
position : absolute;
top: 15px;
left: 170px;
}
/*Ÿ³«¤·¤¿¥µ¥à¥Í¥¤¥ë²èÁü¤Î¾å¤Ë¥Þ¥¦¥¹¥ª¡¼¥Ð¡¼¤Ç³ÈÂç¡¡¤³¤³¤Þ¤Ç*/
HTMLÉôʬ
<div class="album">
<ul>
<li><a class="set" href="#nogo">¥¢¥¸¥¢¥ó¥¿¥à#1<!--[if gte IE 7]><!--></a><!--<![endif]--><b></b>
<ins><table><tr><td>
<ul>
<li>
<a href="#"><img src="http://blog-imgs-27.fc2.com/d/r/e/dreamy/2008-6-9-38.jpg" alt="ÂåÂØ" width="50"
height="50" /></a>
</li>
</ul>
</td></tr></table></ins><!--[if lte IE 6]
></a><![endif]-->
</li>
</ul>
<br class="clear" />
</div><!--album-->
¤â¤·¥á¥Ë¥å¡¼¤Îʸ»ú¤ò¥¯¥ê¥Ã¥¯¤·¤¿¤éŸ³«¤¹¤ë
¤È¸À¤¦¾ì¹ç¤Ï
¡Öhover¡×¤Ç¤Ï¤Ê¤¯¡Öactive¡×¤ò»È¤¦
ˬÌäÀè¤Ç¤¿¤Þ¤Ëµ»ö¤ÎÉôʬ¤¬²¼¤¬¤Ã¤Æ¤·¤Þ¤Ã¤Æ¤¤¤ë¤Î¤ò¸«¤«¤±¤ë¤³¤È¤¬¤¢¤ê¤Þ¤¹¡£
¥¹¥¯¥í¡¼¥ë¤·¤Æ¤¤¤«¤Ê¤¤¤Èµ»ö¤Ë¹Ô¤Åö¤¿¤ê¤Þ¤»¤ó¡£
¤³¤ì¤Ï¤À¤¤¤¿¤¤¤Î¾ì¹ç²èÁü¤ÎÉý¤¬¹¤¹¤®¤ë¤Î¤Ç¤¹¤Í¡£
¤³¤ó¤Ê»þ¡¢¤É¤¦¤·¤¿¤é¤¤¤¤¤«¤È¤¤¤¦¤È
»ä¤Ï¤³¤ó¤ÊÊýË¡¤Ç¤ä¤Ã¤Æ¤¤¤Þ¤¹¡£¥µ¥ó¥×¥ë¤È¤·¤Æ
http://dreamy.blog2.fc2.com/blog-entry-90.html
¤³¤Îµ»ö¤Ç¤¹¤¬¡¢¼ÂºÝ¤Î¼Ì¿¿¤Ï
http://blog-imgs-27.fc2.com/d/r/e/dreamy/sikuramen.jpg
Éý¤¬790px¤¢¤ë¤ó¤Ç¤¹¡£¼Â¸³¤Î¤¿¤á¤Ë¤ï¤¶¤ï¤¶Æþ¤ì¤¿¤â¤Î¤Ç¤¹¡£
¤Ç¤â¥Æ¥ó¥×¥ì¡¼¥È¤Î¥¹¥¿¥¤¥ë¥·¡¼¥È¤Î
<%topentry_body>¤È<%topentry_more>¤ò°Ï¤Ã¤Æ¤¤¤ë
DIV¤Îclass¤Ë
div.¢¤¢¤{
width:¡¡¡û¡ûpx;
overflow: hidden;
}
¤Î¤è¤¦¤Ë
Éý¡Êwidth¡Ë
¡Ö¤Ï¤ß½Ð¤·¤¿¾ì¹ç¤Ï¥«¥Ã¥È¤·¤Þ¤¹¡£¡×
¤Ã¤Æ¤¤¤¦´¶¤¸¤Î¤â¤Î¤òµ½Ò¤·¤Þ¤¹¤È¡¢
¼Ì¿¿¤Î±¦Â¦¤¬¥«¥Ã¥È¤µ¤ì¥Æ¥ó¥×¥ì¡¼¥È¤Ï¤¤ì¤¤¤Ê¤Þ¤Þ¤Ç¤¹¡£
Éý¤ÎÀßÄê¤Ï
primary-column
¤ÎÉý¤«¤½¤ì¤è¤ê10px°Ì¾®¤µ¤¯¤·¤Æ¤ª¤±¤ÐÂç¾æÉפÀ¤È»×¤¤¤Þ¤¹¡£
¤â¤·±¦Â¦¤ò¥«¥Ã¥È¤·¤¿¤¯¤Ê¤¤¤Ê¤éͽ¤á¾®¤µ¤¯¤·¤¿²èÁü¤òÆþ¤ì¤ì¤Ð¤¤¤¤¤Ç¤¹¤Í¡£
¤â¤¦¤Ò¤È¤Ä¤ÎÊýË¡
°ã¤¦¥Æ¥ó¥×¥ì¡¼¥È
http://dreamy.blog2.fc2.com/?template=mike-neko&index
¤ÎƱ¤¸µ»ö¡ÖÉý¹¤¤²èÁü¡×¤Ç¤Ï
overflow:auto;
¤Èµ½Ò¤·¤Æ¤¢¤ë¤¿¤á
¥¹¥¯¥í¡¼¥ë¤¬½Ð¤Æ¤¤¤Þ¤¹¡£
¤³¤Á¤é¤â¥Æ¥ó¥×¥ì¡¼¥È¤¬Êø¤ì¤Ê¤¤¤è¤¦¤Ë¤È»×¤Ã¤Æ¤ä¤Ã¤Æ¤ß¤¿¤³¤È¤Ç¤¹¡£
¥¹¥¯¥í¡¼¥ë¤·¤Æ¤¤¤«¤Ê¤¤¤Èµ»ö¤Ë¹Ô¤Åö¤¿¤ê¤Þ¤»¤ó¡£
¤³¤ì¤Ï¤À¤¤¤¿¤¤¤Î¾ì¹ç²èÁü¤ÎÉý¤¬¹¤¹¤®¤ë¤Î¤Ç¤¹¤Í¡£
¤³¤ó¤Ê»þ¡¢¤É¤¦¤·¤¿¤é¤¤¤¤¤«¤È¤¤¤¦¤È
»ä¤Ï¤³¤ó¤ÊÊýË¡¤Ç¤ä¤Ã¤Æ¤¤¤Þ¤¹¡£¥µ¥ó¥×¥ë¤È¤·¤Æ
http://dreamy.blog2.fc2.com/blog-entry-90.html
¤³¤Îµ»ö¤Ç¤¹¤¬¡¢¼ÂºÝ¤Î¼Ì¿¿¤Ï
http://blog-imgs-27.fc2.com/d/r/e/dreamy/sikuramen.jpg
Éý¤¬790px¤¢¤ë¤ó¤Ç¤¹¡£¼Â¸³¤Î¤¿¤á¤Ë¤ï¤¶¤ï¤¶Æþ¤ì¤¿¤â¤Î¤Ç¤¹¡£
¤Ç¤â¥Æ¥ó¥×¥ì¡¼¥È¤Î¥¹¥¿¥¤¥ë¥·¡¼¥È¤Î
<%topentry_body>¤È<%topentry_more>¤ò°Ï¤Ã¤Æ¤¤¤ë
DIV¤Îclass¤Ë
div.¢¤¢¤{
width:¡¡¡û¡ûpx;
overflow: hidden;
}
¤Î¤è¤¦¤Ë
Éý¡Êwidth¡Ë
¡Ö¤Ï¤ß½Ð¤·¤¿¾ì¹ç¤Ï¥«¥Ã¥È¤·¤Þ¤¹¡£¡×
¤Ã¤Æ¤¤¤¦´¶¤¸¤Î¤â¤Î¤òµ½Ò¤·¤Þ¤¹¤È¡¢
¼Ì¿¿¤Î±¦Â¦¤¬¥«¥Ã¥È¤µ¤ì¥Æ¥ó¥×¥ì¡¼¥È¤Ï¤¤ì¤¤¤Ê¤Þ¤Þ¤Ç¤¹¡£
Éý¤ÎÀßÄê¤Ï
primary-column
¤ÎÉý¤«¤½¤ì¤è¤ê10px°Ì¾®¤µ¤¯¤·¤Æ¤ª¤±¤ÐÂç¾æÉפÀ¤È»×¤¤¤Þ¤¹¡£
¤â¤·±¦Â¦¤ò¥«¥Ã¥È¤·¤¿¤¯¤Ê¤¤¤Ê¤éͽ¤á¾®¤µ¤¯¤·¤¿²èÁü¤òÆþ¤ì¤ì¤Ð¤¤¤¤¤Ç¤¹¤Í¡£
¤â¤¦¤Ò¤È¤Ä¤ÎÊýË¡
°ã¤¦¥Æ¥ó¥×¥ì¡¼¥È
http://dreamy.blog2.fc2.com/?template=mike-neko&index
¤ÎƱ¤¸µ»ö¡ÖÉý¹¤¤²èÁü¡×¤Ç¤Ï
overflow:auto;
¤Èµ½Ò¤·¤Æ¤¢¤ë¤¿¤á
¥¹¥¯¥í¡¼¥ë¤¬½Ð¤Æ¤¤¤Þ¤¹¡£
¤³¤Á¤é¤â¥Æ¥ó¥×¥ì¡¼¥È¤¬Êø¤ì¤Ê¤¤¤è¤¦¤Ë¤È»×¤Ã¤Æ¤ä¤Ã¤Æ¤ß¤¿¤³¤È¤Ç¤¹¡£
JavaScript¤äFlash¤ò»È¤ï¤º¤Ë¥¹¥¿¥¤¥ë¥·¡¼¥È¤À¤±¤Ç
¥µ¥à¥Í¡¼¥ë²èÁü¤Ë¥Þ¥¦¥¹¥ª¡¼¥Ð¡¼¤Ç³ÈÂç²èÁü¤òɽ¼¨¡£¥µ¥à¥Í¡¼¥ë¥¯¥ê¥Ã¥¯¤Ç³ÈÂç²èÁü¤ò¸ÇÄê¡£
¸ÇÄꤷ¤¿²èÁü¤Ë¥ê¥ó¥¯¤òÆþ¤ì¤é¤ì¤Þ¤¹¡£
JavaScript¤äFlash¤ò¶Ø»ß¤µ¤ì¤Æ¤¤¤ë¥µ¡¼¥Ð¡¼¤ÎÊý¤â»È¤¨¤Þ¤¹¤Í¡£
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>title</title>
<style type="text/css">
<!--
ul#gallery {
padding:5px 0px 0px 10px; /*¾å¡¢±¦¡¢²¼¡¢º¸*/
margin:0px;
width:204px;
height:170px;
border:1px solid pink;¡¡
position:relative;
background:url(ÇØ·Ê²èÁü¤ÎURL) no-repeat fixed top left;/**/
-height:155px;
-width:212px;
}
#gallery li {
list-style-type:none;
width:50px;
height:37px;
float:left;
z-index:100;
-width:45px;
-height:34px;
}
#gallery li.lft {
float:left;
clear:left;
}
#gallery li.rgt {
float:right;
clear:right;
}
#gallery a {
position:relative;
width:50px;
height:37px;
display:block;
float:left;
z-index:100;
cursor:default;
margin: 5px 2px 2px 0px; /*¾å¡¢±¦¡¢²¼¡¢º¸*/
background: url(²èÁü¤Î±Æ¤ÎURL) bottom right;
float: left;
width: auto;
-width:45px;
-height:34px;
}
#gallery a img {
position:relative;
width:50px;
height:37px;
border:1px solid #888;
z-index:100;
background: #ffffff;
border: 0px solid #999;
padding:1px;/*¸µ5*/
position: relative;
left: -7px;
top: -7px;
-padding:1px;/*¸µ5*/
-border: 1px solid #999;
-width:45px;
-height:34px;
}
#gallery a:hover {
width:203px;
height:151px;
padding:0px 0px 2px 9px; /*¾å¡¢±¦¡¢²¼¡¢º¸*/
position:absolute;
left:12px;
top:20px;
z-index:200; /*¥Þ¥¦¥¹¤òÅö¤Æ¤¿»þ²èÁü¤¬Á°Ì̤˸½¤ì¤ë¡¦¸µ¤Ï20*/
-padding:0px 0px 2px 9px; /*¾å¡¢±¦¡¢²¼¡¢º¸*/
-left:2px;
-top:10px;
}
#gallery a:hover img {
background:#eee;
position:relative;
width:203px;
height:151px;
border:0;
z-index:200; /*¥Þ¥¦¥¹¤òÅö¤Æ¤¿»þ²èÁü¤¬Á°Ì̤˸½¤ì¤ë¡¦¸µ¤Ï10*/
}
#gallery a:active, #gallery a:focus {
background:transparent;
width:203px;
height:151px;
padding:7px 0px 0px 0px; /*¾å¡¢±¦¡¢²¼¡¢º¸*/
position:absolute;
left:0;
top:0;
z-index:400; /*¥¯¥ê¥Ã¥¯¤·¤¿»þ²èÁü¤¬Á°Ì̤˸½¤ì¤ë¡¦¸µ¤Ï10*/
}
#gallery a:active img, #gallery a:focus img {
background:#eee;
position:relative;
width:203px;
height:151px;
border:0;
z-index:400;/*¥Þ¥¦¥¹¤òÅö¤Æ¤¿»þ²èÁü¤¬Á°Ì̤˸½¤ì¤ë¡¦¸µ¤Ï10*/
}
/* hack for Internet Explorer */
#gallery li.pad {
height:0;
display:block;
margin-top:-2px;
width:203px;
font-size:0;
padding-top:93px; /*¥µ¥à¥Í¥¤¥ë²èÁü²¼¤ÎÎ󡦾å¤ÎÎó¤Î²¼Ã¼¤«¤é¤Îpadding*/
-padding-top:83px; /*¥µ¥à¥Í¥¤¥ë²èÁü²¼¤ÎÎ󡦾å¤ÎÎó¤Î²¼Ã¼¤«¤é¤Îpadding*/
}
/* hack for Opera 7+ */
@media all and (min-width:0px){
#gallery a:hover {
background:#888;
width:203px;
height:151px;
padding:7px 0px 0px 0px; /*¾å¡¢±¦¡¢²¼¡¢º¸*/
position:absolute;
left:0;
top:0;
z-index:100;/*¸µ10*/
}
#gallery a:hover img {
background:#aaa;
position:relative;
width:160px;
height:120px;
border:0;
z-index:100;/*¸µ10*/
}-->
</style>
</head>
<body>
<ul id="gallery">
<li><a href="#">
<img src="#1²èÁü¤ÎURL" alt="#1" title="#1" /></a></li>
<li><a href="#">
<img src="#2²èÁü¤ÎURL" alt="#2" title="#2" /></a></li>
<li><a href="#">
<img src="#3²èÁü¤ÎURL" alt="#3" title="#3" /></a></li>
<li><a href="#">
<img src="#4²èÁü¤ÎURL" alt="#4" title="#4" /></a></li>
<li class="pad"></li>
<li class="lft"><a href="#">
<img src="#5²èÁü¤ÎURL" alt="#5" title="#5" /></a></li>
<li><a href="#">
<img src="#6²èÁü¤ÎURL" alt="#6" title="#6" /></a></li>
<li><a href="#">
<img src="#7²èÁü¤ÎURL" alt="#7" title="#7" /></a></li>
<li><a href="#">
<img src="#8²èÁü¤ÎURL" alt="#8" title="#8" /></a></li>
</ul>
</body>
</html>
»²¹Í¤Ë¤µ¤»¤Æ¤¤¤¿¤À¤¤¤¿¥µ¥¤¥È
Stu Nicholls CSSplay CSS Photograph Gallery with hover and active states
¤¢¤ê¤¬¤È¤¦¤´¤¶¤¤¤Þ¤¹¡£
¥µ¥à¥Í¡¼¥ë²èÁü¤Ë¥Þ¥¦¥¹¥ª¡¼¥Ð¡¼¤Ç³ÈÂç²èÁü¤òɽ¼¨¡£¥µ¥à¥Í¡¼¥ë¥¯¥ê¥Ã¥¯¤Ç³ÈÂç²èÁü¤ò¸ÇÄê¡£
¸ÇÄꤷ¤¿²èÁü¤Ë¥ê¥ó¥¯¤òÆþ¤ì¤é¤ì¤Þ¤¹¡£
JavaScript¤äFlash¤ò¶Ø»ß¤µ¤ì¤Æ¤¤¤ë¥µ¡¼¥Ð¡¼¤ÎÊý¤â»È¤¨¤Þ¤¹¤Í¡£
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>title</title>
<style type="text/css">
<!--
ul#gallery {
padding:5px 0px 0px 10px; /*¾å¡¢±¦¡¢²¼¡¢º¸*/
margin:0px;
width:204px;
height:170px;
border:1px solid pink;¡¡
position:relative;
background:url(ÇØ·Ê²èÁü¤ÎURL) no-repeat fixed top left;/**/
-height:155px;
-width:212px;
}
#gallery li {
list-style-type:none;
width:50px;
height:37px;
float:left;
z-index:100;
-width:45px;
-height:34px;
}
#gallery li.lft {
float:left;
clear:left;
}
#gallery li.rgt {
float:right;
clear:right;
}
#gallery a {
position:relative;
width:50px;
height:37px;
display:block;
float:left;
z-index:100;
cursor:default;
margin: 5px 2px 2px 0px; /*¾å¡¢±¦¡¢²¼¡¢º¸*/
background: url(²èÁü¤Î±Æ¤ÎURL) bottom right;
float: left;
width: auto;
-width:45px;
-height:34px;
}
#gallery a img {
position:relative;
width:50px;
height:37px;
border:1px solid #888;
z-index:100;
background: #ffffff;
border: 0px solid #999;
padding:1px;/*¸µ5*/
position: relative;
left: -7px;
top: -7px;
-padding:1px;/*¸µ5*/
-border: 1px solid #999;
-width:45px;
-height:34px;
}
#gallery a:hover {
width:203px;
height:151px;
padding:0px 0px 2px 9px; /*¾å¡¢±¦¡¢²¼¡¢º¸*/
position:absolute;
left:12px;
top:20px;
z-index:200; /*¥Þ¥¦¥¹¤òÅö¤Æ¤¿»þ²èÁü¤¬Á°Ì̤˸½¤ì¤ë¡¦¸µ¤Ï20*/
-padding:0px 0px 2px 9px; /*¾å¡¢±¦¡¢²¼¡¢º¸*/
-left:2px;
-top:10px;
}
#gallery a:hover img {
background:#eee;
position:relative;
width:203px;
height:151px;
border:0;
z-index:200; /*¥Þ¥¦¥¹¤òÅö¤Æ¤¿»þ²èÁü¤¬Á°Ì̤˸½¤ì¤ë¡¦¸µ¤Ï10*/
}
#gallery a:active, #gallery a:focus {
background:transparent;
width:203px;
height:151px;
padding:7px 0px 0px 0px; /*¾å¡¢±¦¡¢²¼¡¢º¸*/
position:absolute;
left:0;
top:0;
z-index:400; /*¥¯¥ê¥Ã¥¯¤·¤¿»þ²èÁü¤¬Á°Ì̤˸½¤ì¤ë¡¦¸µ¤Ï10*/
}
#gallery a:active img, #gallery a:focus img {
background:#eee;
position:relative;
width:203px;
height:151px;
border:0;
z-index:400;/*¥Þ¥¦¥¹¤òÅö¤Æ¤¿»þ²èÁü¤¬Á°Ì̤˸½¤ì¤ë¡¦¸µ¤Ï10*/
}
/* hack for Internet Explorer */
#gallery li.pad {
height:0;
display:block;
margin-top:-2px;
width:203px;
font-size:0;
padding-top:93px; /*¥µ¥à¥Í¥¤¥ë²èÁü²¼¤ÎÎ󡦾å¤ÎÎó¤Î²¼Ã¼¤«¤é¤Îpadding*/
-padding-top:83px; /*¥µ¥à¥Í¥¤¥ë²èÁü²¼¤ÎÎ󡦾å¤ÎÎó¤Î²¼Ã¼¤«¤é¤Îpadding*/
}
/* hack for Opera 7+ */
@media all and (min-width:0px){
#gallery a:hover {
background:#888;
width:203px;
height:151px;
padding:7px 0px 0px 0px; /*¾å¡¢±¦¡¢²¼¡¢º¸*/
position:absolute;
left:0;
top:0;
z-index:100;/*¸µ10*/
}
#gallery a:hover img {
background:#aaa;
position:relative;
width:160px;
height:120px;
border:0;
z-index:100;/*¸µ10*/
}-->
</style>
</head>
<body>
<ul id="gallery">
<li><a href="#">
<img src="#1²èÁü¤ÎURL" alt="#1" title="#1" /></a></li>
<li><a href="#">
<img src="#2²èÁü¤ÎURL" alt="#2" title="#2" /></a></li>
<li><a href="#">
<img src="#3²èÁü¤ÎURL" alt="#3" title="#3" /></a></li>
<li><a href="#">
<img src="#4²èÁü¤ÎURL" alt="#4" title="#4" /></a></li>
<li class="pad"></li>
<li class="lft"><a href="#">
<img src="#5²èÁü¤ÎURL" alt="#5" title="#5" /></a></li>
<li><a href="#">
<img src="#6²èÁü¤ÎURL" alt="#6" title="#6" /></a></li>
<li><a href="#">
<img src="#7²èÁü¤ÎURL" alt="#7" title="#7" /></a></li>
<li><a href="#">
<img src="#8²èÁü¤ÎURL" alt="#8" title="#8" /></a></li>
</ul>
</body>
</html>
»²¹Í¤Ë¤µ¤»¤Æ¤¤¤¿¤À¤¤¤¿¥µ¥¤¥È
Stu Nicholls CSSplay CSS Photograph Gallery with hover and active states
¤¢¤ê¤¬¤È¤¦¤´¤¶¤¤¤Þ¤¹¡£
°ìËç¤Î²èÁü¤ÎÃæ¤ËÊ£¿ô¤Î¥ê¥ó¥¯¤òޤëÊýË¡¤¬¤¢¤ë¤½¤¦¤Ç¤¹¡£
²¼¤Î²èÁü¤Ï°ìËç¤Î¼Ì¿¿¤Ç¤¹¤¬¡¢´Ý¤ä»°³Ñ¡¢»Í³ÑËô¿³Ñ·Á¤Ë¤½¤ì¤¾¤ì¥ê¥ó¥¯¤òÆþ¤ì¤Æ¤¢¤ê¤Þ¤¹¡£

¥¿¥°¤Ï°Ê²¼¤ÎÄ̤ê¤Ç¤¹¡£
¡¼¡¼¡¼¡¼¡¼¡¼¡¼¡¼¡¼¡¼¡¼¡¼¡¼¡¼¡¼¡¼¡¼¡¼¡¼¡¼¡¼¡¼¡¼¡¼
<IMG src="talink.jpg" width="400" height="300" border="1" usemap="#mapID"><BR>
<MAP name="mapID">
<AREA shape="poly" coords="197,9,382,106,350,142" href="http://www.yahoo.co.jp/" title="»°³Ñ-Yahoo!">
<AREA shape="poly" coords="171,199,245,125,353,176,341,253,243,292" href="http://blog.fc2.com/" title="¸Þ³Ñ·Á-FC2¥Ö¥í¥°">
<AREA shape="rect" coords="38,185,142,271" href="http://blog2.fc2.com/dreamy/" title="»Í³Ñ·Á-MyBlog">
<AREA shape="circle" coords="86,88,62" href="http://www.google.co.jp/" title="±ß-Google"></MAP>
¡¼¡¼¡¼¡¼¡¼¡¼¡¼¡¼¡¼¡¼¡¼¡¼¡¼¡¼¡¼¡¼¡¼¡¼¡¼¡¼¡¼¡¼¡¼¡¼
·Á¤¬±ß¤Î»þ¤Ï
¡¦cirle¡§±ß¤ÎÃæ¿´¤ÎxºÂɸ, yºÂɸ, ±ß¤ÎȾ·Â
»Í³Ñ¤Î»þ
¡¦rect¡§»Í³Ñ·Á¤Îº¸¾å¤ÎxºÂɸ, yºÂɸ, »Í³Ñ·Á¤Î±¦²¼¤ÎxºÂɸ, yºÂɸ
¿³Ñ·Á¤Î»þ
¡¦poly¡§Â¿³Ñ·Á¤Î¤¹¤Ù¤Æ¤ÎÅÀ¤ÎxºÂɸ, yºÂɸ¤ò¸ò¸ß¤Ëµ½Ò
¤È¤¤¤¦¤³¤È¤Ç¤ä¤Ã¤Æ¤ß¤Þ¤·¤¿¡£ÌÌÇò¤«¤Ã¤¿¤Ç¤¹¡£
³¹¤ÎÃϿޤʤɤËŬ¤·¤Æ¤¤¤Þ¤¹¤Í¡£
²¼¤Î²èÁü¤Ï°ìËç¤Î¼Ì¿¿¤Ç¤¹¤¬¡¢´Ý¤ä»°³Ñ¡¢»Í³ÑËô¿³Ñ·Á¤Ë¤½¤ì¤¾¤ì¥ê¥ó¥¯¤òÆþ¤ì¤Æ¤¢¤ê¤Þ¤¹¡£

¥¿¥°¤Ï°Ê²¼¤ÎÄ̤ê¤Ç¤¹¡£
¡¼¡¼¡¼¡¼¡¼¡¼¡¼¡¼¡¼¡¼¡¼¡¼¡¼¡¼¡¼¡¼¡¼¡¼¡¼¡¼¡¼¡¼¡¼¡¼
<IMG src="talink.jpg" width="400" height="300" border="1" usemap="#mapID"><BR>
<MAP name="mapID">
<AREA shape="poly" coords="197,9,382,106,350,142" href="http://www.yahoo.co.jp/" title="»°³Ñ-Yahoo!">
<AREA shape="poly" coords="171,199,245,125,353,176,341,253,243,292" href="http://blog.fc2.com/" title="¸Þ³Ñ·Á-FC2¥Ö¥í¥°">
<AREA shape="rect" coords="38,185,142,271" href="http://blog2.fc2.com/dreamy/" title="»Í³Ñ·Á-MyBlog">
<AREA shape="circle" coords="86,88,62" href="http://www.google.co.jp/" title="±ß-Google"></MAP>
¡¼¡¼¡¼¡¼¡¼¡¼¡¼¡¼¡¼¡¼¡¼¡¼¡¼¡¼¡¼¡¼¡¼¡¼¡¼¡¼¡¼¡¼¡¼¡¼
·Á¤¬±ß¤Î»þ¤Ï
¡¦cirle¡§±ß¤ÎÃæ¿´¤ÎxºÂɸ, yºÂɸ, ±ß¤ÎȾ·Â
»Í³Ñ¤Î»þ
¡¦rect¡§»Í³Ñ·Á¤Îº¸¾å¤ÎxºÂɸ, yºÂɸ, »Í³Ñ·Á¤Î±¦²¼¤ÎxºÂɸ, yºÂɸ
¿³Ñ·Á¤Î»þ
¡¦poly¡§Â¿³Ñ·Á¤Î¤¹¤Ù¤Æ¤ÎÅÀ¤ÎxºÂɸ, yºÂɸ¤ò¸ò¸ß¤Ëµ½Ò
¤È¤¤¤¦¤³¤È¤Ç¤ä¤Ã¤Æ¤ß¤Þ¤·¤¿¡£ÌÌÇò¤«¤Ã¤¿¤Ç¤¹¡£
³¹¤ÎÃϿޤʤɤËŬ¤·¤Æ¤¤¤Þ¤¹¤Í¡£

¤É¤ê¡¼¤ß¡¼(10/12)
¹ÓÌîÂë¸×(10/11)
¤É¤ê¡¼¤ß¡¼(10/07)
½©À¸(10/06)
¤É¤ê¡¼¤ß¡¼(10/06)
½©À¸(10/06)
¤É¤ê¡¼¤ß¡¼(10/06)
½©À¸(10/06)
¤É¤ê¡¼¤ß¡¼(10/01)
¹ÓÌîÂë¸×(09/30)
¤É¤ê¡¼¤ß¡¼(09/25)
¥ª¡¼¥È¥¦¥§¡¼¥ÖÉÙΤŹ(09/24)
¤É¤ê¡¼¤ß¡¼(09/22)
¥ª¡¼¥È¥¦¥§¡¼¥ÖÉÙΤŹ(09/22)
¤É¤ê¡¼¤ß¡¼(09/22)
¤É¤ê¡¼¤ß¡¼(09/22)
¤Ï¤¸¤á¤Þ¤·¤Æ(09/22)
clair(09/19)
¤É¤ê¡¼¤ß¡¼(09/16)
clair(09/16)
¤É¤ê¡¼¤ß¡¼(09/14)
¤¸¤â¤é¡¼(09/14)
¤É¤ê¡¼¤ß¡¼(09/13)
¤¸¤â¤é¡¼(09/13)
¤É¤ê¡¼¤ß¡¼(09/12)