¥¹¥Ý¥ó¥µ¡¼¥µ¥¤¥È
°ìÄê´ü´Ö¹¹¿·¤¬¤Ê¤¤¤¿¤á¹¹ð¤òɽ¼¨¤·¤Æ¤¤¤Þ¤¹
- 2011.05.22 Sunday
- -
- -
- -
- -
- -
- by ¥¹¥Ý¥ó¥µ¡¼¥É¥ê¥ó¥¯
°ìÄê´ü´Ö¹¹¿·¤¬¤Ê¤¤¤¿¤á¹¹ð¤òɽ¼¨¤·¤Æ¤¤¤Þ¤¹
¥Ü¥Ã¥¯¥¹¤Ë¤è¤ë¥ì¥¤¥¢¥¦¥È
¥¹¥¿¥¤¥ë¥·¡¼¥È¤ò»È¤Ã¤¿Web¥Ú¡¼¥¸¤Î¥ì¥¤¥¢¥¦¥È¤Ï¡¢¥³¥ó¥Æ¥ó¥Ä¤½¤Î¤â¤Î¤ò°ì¤Þ¤È¤Þ¤ê¤Î»Í³Ñ¤¤È¢¡Ê¥Ü¥Ã¥¯¥¹¡Ë¤È¹Í¤¨¡¢¤³¤ì¤é¤òÁȤ߹ç¤ï¤»¤Æºî¤Ã¤Æ¤¤¤¯¡£
float¥×¥í¥Ñ¥Æ¥£¤ò»È¤Ã¤Æ¡¢¥Ö¥í¥Ã¥¯¥ì¥Ù¥ëÍ×ÁǤòÃÊÁȤߤÇÇÛÃÖ¤¹¤ë¡£
2ÃÊÁȤߤò¥ì¥¤¥¢¥¦¥È¤·¤Æ¤ß¤ë
#col 1{
width: 350px;
float: left;
}
#col 2{
width: 350px;
float: right;
}
#footer {
clear: both;
col1¤Ècol2¤Î¥Ö¥í¥Ã¥¯¤Î¼¡¤Îfooter¤Ëclear¡¡both¤òÆþ¤ì¤ë¡£¤½¤¦¤·¤Ê¤¤¤È¸å¤Ë³¤¯¥Ü¥Ã¥¯¥¹¤Î¥³¥ó¥Æ¥ó¥Ä¤Ïfloat¥Ü¥Ã¥¯¥¹¤ÎÈ¿ÂЦ¤Ë²ó¤ê¹þ¤ó¤Ç¤·¤Þ¤¦¤Î¤Ç¡¢²ó¤ê¹þ¤ß¤ò²ò½ü¤¹¤ë¤è¤¦¤Ë¤¹¤ë¡£
¥Ê¥Ó¥²¡¼¥·¥ç¥ó¤Î¥¹¥¿¥¤¥ë¤òÀßÄê
¥Ê¥Ó¥²¡¼¥·¥ç¥ó¤òºîÀ®¤¹¤ë¾ì¹ç¡¢¥ê¥¹¥ÈÍ×ÁǤ˥¹¥¿¥¤¥ë¤ò»ØÄꤹ¤ë¡£
divÍ×ÁǤè¤êulÍ×ÁǤò»È¤Ã¤¿Êý¤¬¥°¥ë¡¼¥×²½¤µ¤ì¡¢HTML¤Î¹½Â¤¤¬¤ï¤«¤ê¤ä¤¹¤¯¤Ê¤ê¡¢¸å¤Î¥á¥ó¥Æ¥Ê¥ó¥¹¤Ë¤âÌòΩ¤Ä¡£¸¡º÷¥¨¥ó¥¸¥ó¤Î¥í¥Ü¥Ã¥È¤Ë¤âÍý²ò¤µ¤ì¤ä¤¹¤¤¤Î¤Ç¡¢¥¢¥¯¥·¥Ó¥ê¥Æ¥£¤Î¸þ¾å¤Ë¤â·Ò¤¬¤ë¡£
¡ônav li {
float: left;
width: 118px;
height: 20px;
border: 1px solid #000;
margin-right: 5px;
margin-left: 0px;
font-size: 13px;
text-align: center;
background-color: #F0F0F0;
}
#content {
clear: left;
margin: 20px;
}
#nav a {
display: block;¡¦¡¦¡¦¡¦¥Ü¡¼¥À¡¼¤Ç°Ï¤Ã¤¿Éôʬ¤Î¤É¤Î¾ì½ê¤Ç¤â¥ê¥ó¥¯¤Îµ¡Ç½¤¬Æ¯¤¯¤è¤¦¤Ë¤Ê¤ë¡¦
width: 118px;
height: 20px;
color: #000;
text-decoration: none;
}
#nav a hover {
color: #FFF;
background-color: #936;
}
#nav {
float: left;
width: 740px;
background: url(img/bg_nav.gif);
}
position¥×¥í¥Ñ¥Æ¥£¤òÍý²ò¤¹¤ë
position¡¦¡¦¡¦ÇÛÃ֤Υ롼¥ë¤ò»ØÄꤹ¤ë¥¡¼¥ï¡¼¥É
top¡¦¡¦¡¦´ðÅÀ¤È¤Ê¤ë¾åü¤«¤é¡¢É½¼¨¤µ¤»¤¿¤¤¥Ü¥Ã¥¯¥¹¾åü¤Þ¤Ç¤Îµ÷Î¥
left¡¦¡¦¡¦´ðÅÀ¤È¤Ê¤ë¾åü¤«¤é¡¢É½¼¨¤µ¤»¤¿¤¤¥Ü¥Ã¥¯¥¹º¸Ã¼¤Þ¤Ç¤Îµ÷Î¥
right¡¦¡¦¡¦´ðÅÀ¤È¤Ê¤ë¾åü¤«¤é¡¢É½¼¨¤µ¤»¤¿¤¤¥Ü¥Ã¥¯¥¹±¦Ã¼¤Þ¤Ç¤Îµ÷Î¥
bottom¡¦¡¦¡¦´ðÅÀ¤È¤Ê¤ë¾åü¤«¤é¡¢É½¼¨¤µ¤»¤¿¤¤¥Ü¥Ã¥¯¥¹²¼Ã¼¤Þ¤Ç¤Îµ÷Î¥
absolute¡¦¡¦¡¦´ðÅÀ¤Î°ÌÃÖ¡Ê´ðÅÀ¤ò»ØÄꤷ¤Æ¤¤¤Ê¤±¤ì¤Ð¥Ö¥é¥¦¥¶¤Îɽ¼¨Îΰè¤Î¶ù¡Ë¤«¤é¬¤ë
relative¡¦¡¦¡¦position¤Î¥×¥í¥Ñ¥Æ¥£¤ò»ØÄꤵ¤ì¤Ê¤¤¾ì¹ç¤ËÇÛÃÖ¤µ¤ì¤ë°ÌÃÖ¤«¤é¬¤ë
fixed¡¦¡¦¡¦absolute¤ÈƱ¤¸¤À¤¬¡¢¥¹¥¯¥í¡¼¥ë¤·¤Æ¤âÇÛÃÖ°ÌÃÖ¤ò¸ÇÄꤹ¤ë
static¡¦¡¦¡¦position¥×¥í¥Ñ¥Æ¥£¤ò»ØÄꤵ¤ì¤Ê¤¤¾ì¹ç¤ÈƱ¤¸¾ì½ê¤ËÇÛÃÖ¤¹¤ë
absolute¤ò»È¤Ã¤ÆÇÛÃÖ¤¹¤ë
#box2{
position: absolute;
top: 50px;
left: 100px;¡¦¡¦¡¦¥¦¥£¥ó¥É¥¦¾åÊÕ¤«¤é¤Îµ÷Î¥¤ò50£ð£ø¡¢º¸ÊÕ¤«¤é¤Îµ÷Î¥¤ò100£ð£ø
relative¤ò»È¤Ã¤ÆÇÛÃÖ¤¹¤ë
#box2{
position: absolute;
top: 50px;
left: 100px;¡¦¡¦¡¦ËÜÍè¥ì¥¤¥¢¥¦¥È¤µ¤ì¤ë¤Ï¤º¤À¤Ã¤¿¾ì½ê¤ò¥¹¥¿¡¼¥ÈÃÏÅÀ¤È¹Í¤¨¤¿µ÷Î¥¡£
¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¾åÊÕ¤«¤é¤Îµ÷Î¥¤ò50£ð£ø¡¢º¸ÊÕ¤«¤é¤Îµ÷Î¥¤ò100£ð£ø