Web¤Ë´Ø¤¹¤ëÈ÷˺Ͽ/¥á¥â
¥È¥Ã¥×¥Ú¡¼¥¸ > CSS > CSS¤Ç½Äʬ³ä¤Îµ¼»÷¥Õ¥ì¡¼¥à¥Ú¡¼¥¸
¤Ê¤ó¤È¤Ê¤¯¥¢¥¯¥»¥¹²òÀϤòį¤á¤Æ¤¤¤ë¤È¡¢µ¼»÷¥Õ¥ì¡¼¥à¤Ë´Ø¤¹¤ë¸¡º÷¤Çé¤êÃ夯Êý¤¬¤ï¤ê¤È¤¤¤é¤Ã¤·¤ã¤ë¤è¤¦¤À¤Ã¤¿¤Î¤Ç¡¢º£²ó¤Ï¤Þ¤¿µ¼»÷¥Õ¥ì¡¼¥à¤Ë¤Ä¤¤¤Æ¡£
º£²ó¤Ïº¸±¦Ê¬³ä¤Ç¤Ï¤Ê¤¯½Äʬ³ä¤Î¥Õ¥ì¡¼¥à¤òCSS¤Çµ¼»÷Ū¤ËºÆ¸½¤·¤Æ¤ß¤è¤¦¤È»×¤¤¤Þ¤¹¡£
¤Þ¤º(X)HTML¤ò°Ê²¼¤Î¤è¤¦¤Ëµ½Ò¤·¤Þ¤¹¡£
¡¡¡¦¡¡¡ãά¡ä¡¡¡¦<body><div id="header"><h1>µ¼»÷¥Õ¥ì¡¼¥à¥µ¥ó¥×¥ë</h1><p>CSS¤Ç½Äʬ³ä¤Îµ¼»÷¥Õ¥ì¡¼¥à¤òºÆ¸½¡£</p></div><div id="contents"><div id="contents-inner"><h2>¥³¥ó¥Æ¥ó¥Ä¸«½Ð¤·</h2><p>°Ê²¼¡¢ËÜʸ³¤¯¡Ä</p>¡¡¡¦¡¡¡¦¡¡¡¦</div></div><div id="footer"><p>¥³¥Ô¡¼¥é¥¤¥ÈÅù¡¢¥Õ¥Ã¥¿¡¼¾ðÊó¡Ä</p></div></body></html>¤³¤ì¤È¤¤¤Ã¤¿¥Ý¥¤¥ó¥È¤Ï¤¢¤ê¤Þ¤»¤ó¤¬¡¢°ì²Õ½ê¤À¤±¡£
¥³¥ó¥Æ¥ó¥Ä¥Ü¥Ã¥¯¥¹¤ÎÆâÊñÍ×ÁǤȤ·¤Æ¡¢11¡Á17¹ÔÌܤËÅϤäÆ<div id="contents-inner">¡Á</div>¤Ç°Ï¤Ã¤Æ¤¤¤Þ¤¹¡£
¸å½Ò¤·¤Þ¤¹¤¬¡¢¤³¤ì¤Ïpadding»ØÄê¤Î°Ù¤Ëµ½Ò¤·¤Æ¤¤¤Þ¤¹¡£
¼¡¤ËCSS¤ò°Ê²¼¤Î¤è¤¦¤Ë»ØÄꤷ¤Þ¤¹¡£
html { height: 100%; overflow: hidden;}body { height:100%; overflow:hidden;}div#header { width: 100%; height: 100px; position: absolute; top: 0; right: 16px; /* ¥¹¥¯¥í¡¼¥ë¥Ð¡¼Éý */ z-index: 2; background: #fff;}div#content { height: 100%; overflow: auto; position: relative; z-index: 1;}div#content-inner { padding: 100px 0 50px;}div#footer { width: 100%; height: 50px; position: absolute; bottom: 0; right: 16px; /* ¥¹¥¯¥í¡¼¥ë¥Ð¡¼Éý */ z-index: 2; background: #fff;}div#header h1,div#header p { margin-left: 16px;div#footer p { margin-left: 16px;}¥Ý¥¤¥ó¥È¤È¤Ê¤ë¤Î¤Ï¶¯Ä´Éôʬ¤Ç¤¹¡£
°Ê²¼¡¢²òÀ⤷¤Æ¤¤¤¤Þ¤¹¡£
¤Þ¤º¤Ï2,7,22¹ÔÌܤΡÖheight:100%¡×¤Ç¤¹¤¬¡¢html¤Èbody¤ÎÁÐÊý¤Ë¤â»ØÄꤷ¤Æ¤ä¤ë¤³¤È¤Ç¡¢¹â¤µ100%¤Î¥Ü¥Ã¥¯¥¹¤òºî¤ê½Ð¤·¤Æ¤¤¤Þ¤¹¡£
¡Ê¤³¤ì¤Ïɸ½à½àµò¡¢¸åÊý¸ß´¹¤Îξ¥â¡¼¥É¤ÇƱÍͤÎɽ¼¨¤òÆÀ¤ë°Ù¤Ç¤¹¡Ë
¼¡¤Ëhtml¤Èbody¤Ë¡Öoverflow:hidden¡×¤ò»ØÄꤷ¤Æ¥¹¥¯¥í¡¼¥ë¥Ð¡¼¤ò¾Ã¤·¤Þ¤¹¡£
¼ÂºÝ¤Ëɽ¼¨¤µ¤ì¤ë¥¹¥¯¥í¡¼¥ë¥Ð¡¼¤Ï¡¢¥³¥ó¥Æ¥ó¥Ä¥Ü¥Ã¥¯¥¹¤Ë»ØÄꤷ¤¿¡Öoverflow:auto¡×¤Ç½Ð¸½¤µ¤»¤Þ¤¹¡£¡Ê23¹ÔÌÜ¡Ë
¸å¤Ï¥Ø¥Ã¥À¡¼¤È¥Õ¥Ã¥¿¡¼¤Îξ¥Ü¥Ã¥¯¥¹¤ò¤½¤ì¤¾¤ì¾åÉô¤È²¼Éô¤ËÀäÂÐÇÛÃÖ¤µ¤»¤ë¤Î¤Ç¤¹¤¬¡¢Ãí°ÕÅÀ¤¬¤¢¤ê¤Þ¤¹¡£
¤½¤ì¤Ï16¹ÔÌܤÈ37¹ÔÌܤǻØÄꤷ¤Æ¤¤¤ë¤è¤¦¤Ë¡¢¥¹¥¯¥í¡¼¥ë¥Ð¡¼¤ÎÉýʬº¸¤Ë¤º¤é¤¹É¬Íפ¬¤¢¤ë¤È¤¤¤¦¤³¤È¤Ç¤¹¡£
¤³¤ì¤Ï¥¹¥¯¥í¡¼¥ë¥Ð¡¼¤¬±£¤ì¤Æ¤·¤Þ¤¦¤Î¤òËɤ°°Ù¤Ç¤¹¤¬¡¢¾ÜºÙ¤Ï¥µ¥ó¥×¥ë¤ÎÃæ¤ÇÀâÌÀ¤·¤Æ¤¤¤Þ¤¹¤Î¤Ç¡¢¤½¤Á¤é¤ò»²¾È¤·¤Æ²¼¤µ¤¤¡£
¤µ¤é¤Ë¡¢¥Ø¥Ã¥À¡¼¤È¥Õ¥Ã¥¿¡¼¤Ë¤Ïz-index¤ÇÁ°Ì̤ËÇÛÃÖ¤µ¤ì¤ë¤è¤¦¡¢¥ì¥¤¥ä¡¼¤Î½Å¤Ê¤ê½ç¤ò»ØÄꤷ¤Þ¤¹¡£¡Ê17¹ÔÌܤÈ38¹ÔÌÜ¡Ë
ºÇ¸å¤ÎÃí°ÕÅÀ¤È¤·¤Æ¡¢¥Ø¥Ã¥À¡¼¤È¥Õ¥Ã¥¿¡¼¤½¤ì¤¾¤ì¤Ë»ØÄꤷ¤Æ¤¤¤ëÇØ·Ê¤¬¤¢¤ê¤Þ¤¹¡£
¤³¤ÎÇØ·Ê»ØÄê¤òÈ´¤«¤·¤Æ¤·¤Þ¤¦¤È¡¢¥Ø¥Ã¥À¡¼¤È¥³¥ó¥Æ¥ó¥Ä¡Ê¥Õ¥Ã¥¿¡¼¤È¥³¥ó¥Æ¥ó¥Ä¤â¡Ë¤¬½Å¤Ê¤ê¹ç¤Ã¤Æ¸«¤¨¤ë¤Î¤Ç¡¢É¬¤º»ØÄꤷ¤Æ²¼¤µ¤¤¡£
°Ê¾å¤Ç½Äʬ³ä¤Îµ¼»÷¥Õ¥ì¡¼¥à¤½¤Î¤â¤Î¤Ï´°À®¤·¤Þ¤¹¤¬¡¢div#contents-inner¤Ëpadding¡Êmargin¤Ç¤â²Ä¡Ë¤ò»ØÄê¡Ê29¹ÔÌܡˤ·¤Ê¤¤¤È¥³¥ó¥Æ¥ó¥Ä¥Ü¥Ã¥¯¥¹Æâ¾åÉô¤Ë¤¢¤ëÍ×ÁǤ¬¥Ø¥Ã¥À¡¼¥Ü¥Ã¥¯¥¹¤Î΢¤Ë±£¤ì¤¿¤Þ¤Þ¤Ë¤Ê¤Ã¤Æ¤·¤Þ¤¤¤Þ¤¹¡£
¤Þ¤¿¡¢42¡Á47¹ÔÌܤλØÄê¤Ë´Ø¤·¤Æ¤Ï¡¢¥Ø¥Ã¥À¡¼¤È¥Õ¥Ã¥¿¡¼¤Îξ¥Ü¥Ã¥¯¥¹¤òº¸¤Ø¤º¤é¤·¤¿¤Î¤ÇÆâÊñÍ×ÁǤò±¦¤Ø¤º¤é¤·Ä¾¤·¤Æ¸µ¤Î°ÌÃÖ¤ËÌᤷ¤Æ¤¤¤ë¤À¤±¤Ç¤¹¡£
¤½¤Î¾¡¢24¡Á25¹ÔÌܤλØÄê¤Ï¡¢z-index¤Ë¤è¤ë½Å¤Ê¤ê½ç¤ò»ØÄꤹ¤ë°Ù¤Ë¡Öposition:relative¡×¡¢¡Öz-index:1¡×¤È¤·¤Æ¤¤¤Þ¤¹¤¬¡¢Ìµ¤¯¤Æ¤â»Ù¾ã¤Ï¤Ê¤¤¤È»×¤¤¤Þ¤¹¡£
¤½¤Î¾¾ÜºÙ¤Ë¤Ä¤¤¤Æ¤Ï½Äʬ³ä¤Îµ¼»÷¥Õ¥ì¡¼¥à¥µ¥ó¥×¥ë¤ò¤´Í÷²¼¤µ¤¤¡£
Copyright © 2006 ¤è¤·¤æ¤ All Rights Reserved. Template designed by ¤è¤·¤æ¤ Photo by ¼Ì¿¿ÁǺà [¥Õ¥©¥È¥é¥¤¥Ö¥é¥ê¡¼]