body { margin: 0 8px; text-align: center; } #eyeCatch{ width: 100%; height: 180px; background-image: url(../images/eyeCatch/long.png); background-repeat: no-repeat; margin: 0; padding: 0; line-height: 1; display: none; } div#eyeCatch h2{ margin: 0; padding: 0; text-indent: -9999em; } div#contents_all{ width: 95%; min-width: 600px; max-width: 1000px; margin: 0 auto; position: relative; text-align: left; } div#header, div#contents, div#footer { width: 100%; margin: 0 auto; position: relative; text-align: left; } /* ul#globalNavi ---------------*/ ul#globalNavi { margin: 0; padding: 0; line-height: 1; list-style-type: none; } ul#globalNavi li { margin: 0; padding: 0; /* float: left;*/ /* display:inline;*/ text-align: center; } ul#globalNavi li a { padding: 9px 15px; /* display: block;*/ position: relative; /* for IE6 */ text-decoration: none; } /*======================================== １カラム ┏━━━┓ ┃━━━┃ ┣━┳━┫ ┗━┻━┛ ========================================*/ body.single div#contents_main { display: inline; /* for IE6 */ } body.single div#contents_main div#main { width: 100%; display: inline; /* for IE6 */ } body.single div#contents_main div#navi { margin: 0; float: left; width: 50%; display: inline; /* for IE6 */ } body.single div#utilities { margin: 0; width: 50%; float: right; display: inline; /* for IE6 */ } /* clearfix */ body.single div#utilities { _height: 1px; min-height: 1px; /*\*//*/ height: 1px; overflow: hidden; /**/ } body.single div#utilities:after { height: 0; visibility: hidden; content: "."; display: block; clear: both; } /*======================================== ２カラム右ナビ ┏━━┳┓ ┃━━┃┃ ┣━━┫┃ ┗━━┻┛ ========================================*/ body.double-r div#contents_main { margin: 0; width: 75%; float: left; display: inline; /* for IE6 */ } body.double-r div#contents_main div#main { } body.double-r div#contents_main div#navi { } body.double-r div#utilities { margin: 0; width: 25%; float: right; display: inline; /* for IE6 */ } /*======================================== ２カラム左ナビ ┏┳━━┓ ┃┃━━┃ ┃┣━━┫ ┗┻━━┛ ========================================*/ body.double-l div#contents_main { margin: 0; width: 75%; float: right; display: inline; /* for IE6 */ } body.double-l div#contents_main div#main { } body.double-l div#contents_main div#navi { } body.double-l div#utilities { margin: 0; width: 25%; float: left; display: inline; /* for IE6 */ } /*======================================== ３カラム両サイドナビ ┏┳━━┳┓ ┃┃━━┃┃ ┗┻━━┻┛ ========================================*/ body.multi div#contents_main { margin: 0; width: 80%; float: left; display: inline; /* for IE6 */ } body.multi div#contents_main div#main { margin: 0; width: 75%; float: right; display: inline; /* for IE6 */ } body.multi div#contents_main div#navi { margin: 0; width: 25%; float: left; display: inline; /* for IE6 */ } body.multi div#utilities { margin: 0; width: 20%; float: left; display: inline; /* for IE6 */ } /*======================================== ３カラム右ナビ ┏━━┳┳┓ ┃━━┃┃┃ ┗━━┻┻┛ ========================================*/ body.multi-r div#contents_main { margin: 0; width: 80%; float: left; display: inline; /* for IE6 */ } body.multi-r div#contents_main div#main { margin: 0; width: 75%; float: left; display: inline; /* for IE6 */ } body.multi-r div#contents_main div#navi { margin: 0; width: 25%; float: left; display: inline; /* for IE6 */ } body.multi-r div#utilities { margin: 0; width: 20%; float: left; display: inline; /* for IE6 */ } /*======================================== ３カラム左ナビ ┏┳┳━━┓ ┃┃┃━━┃ ┗┻┻━━┛ ========================================*/ body.multi-l div#contents_main { margin: 0; width: 80%; float: right; display: inline; /* for IE6 */ } body.multi-l div#contents_main div#main { margin: 0; width: 75%; float: right; display: inline; /* for IE6 */ } body.multi-l div#contents_main div#navi { margin: 0; width: 25%; float: left; display: inline; /* for IE6 */ } body.multi-l div#utilities { margin: 0; width: 20%; float: right; display: inline; /* for IE6 */ } /*======================================== アイキャッチ ========================================*/ /* ヘッダーと同化 ---------------*/ body.eye-h div#eyeCatch{ } body.eye-h div#header { height: 180px; background-image: url(../images/eyeCatch/long.png); background-repeat: no-repeat; } body.eye-h div#header h1, body.eye-h div#header p { text-indent: -9999em; } body.eye-h ul#globalNavi { width: 100%; position: absolute; left: 0; bottom: 0; } /* ヘッダーの上 ---------------*/ body.eye-hb div#header { padding-top: 180px; } body.eye-hb div#eyeCatch{ position: absolute; left: 0; top: -360px; display: block; } /* コンテンツの上 ---------------*/ body.eye-c div#eyeCatch { position: relative; left: 0; top: 0; display: block; } /*======================================== その他レイアウト ========================================*/ /* グローバルナビを最上端へ ---------------*/ body.gt div#header { padding-top: 30px; } body.gt ul#globalNavi { width: 100%; position: absolute; top: 0; left: 0; } /* サイトを左に寄せる ---------------*/ body.al { margin: 0; text-align: left; } body.al div#contents_all, body.al div#header, body.al div#contents, body.al div#footer { margin-left: 0; margin-right: 0; } /* Fixed 800px - ---------------*/ body.f800 div#contents_all, body.f800 div#header, body.f800 div#contents, body.f800 div#footer { width: 800px; } /* Fixed 850px - ---------------*/ body.f850 div#contents_all, body.f850 div#header, body.f850 div#contents, body.f850 div#footer { width: 850px; } /* Fixed 900px - ---------------*/ body.f900 div#contents_all, body.f900 div#header, body.f900 div#contents, body.f900 div#footer { width: 900px; } /* Fixed 950px - ---------------*/ body.f950 div#contents_all, body.f950 div#header, body.f950 div#contents, body.f950 div#footer { width: 950px; } /* Fixed 1000px - ---------------*/ body.f1000 div#contents_all, body.f1000 div#header, body.f1000 div#contents, body.f1000 div#footer { width: 1000px; } /*-------------------------------------- clearFix ---------------------------------------*/ ul#globalNavi, div#contents, body.multi div#utilities, body.multi-r div#utilities, body.multi-l div#utilities { _height: 1px; min-height: 1px; /*\*//*/ height: 1px; overflow: hidden; /**/ } ul#globalNavi:after, div#contents:after, body.multi div#utilities:after, body.multi-r div#utilities:after, body.multi-l div#utilities:after { height: 0; visibility: hidden; content: "."; display: block; clear: both; } /* IE6 - なにがあってもカラム落ちを防ぐ ---------------*/ div#main, div#navi, div#utilities div#others { _overflow: hidden; }