@charset "utf-8"; * { /* 全称セレクタ */ font-style: normal; margin: 0px; padding: 0px; } body { color: #333333; font-size: 80%; line-height: 1.5; font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Osaka, sans-serif; background-image: none; } /*-------------------------------------------------- 全体の構造 #wrapper #navibar #header #sidebar + #main / #one #back（ここでclear） #footer */ #wrapper { width: 840px; margin: auto; background-image: url(../images/bg_wrapper.jpg); background-repeat: no-repeat; border-top-width: thick; border-top-style: solid; border-top-color: #FF0000; } #navibar { height: 40px; } #header { height: 120px; } #sidebar { float: left; /* このエレメントはフローティングエレメントであるため、幅が設定されている必要があります */ width: 200px;/* sidebar幅：200+20+20=240 */ padding-top: 20px; padding-right: 0px; padding-bottom: 0; padding-left: 60px; } #main { margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 270px; padding-top: 20px; padding-right: 60px; padding-bottom: 0; padding-left: 30px; } #one { padding-top: 20px; padding-right: 50px; padding-bottom: 0px; padding-left: 60px; } #back {/* │HOME | TOP│*/ clear: left; text-align: right; padding-top: 10px; padding-right: 50px; padding-bottom: 30px; padding-left: 10px; } #footer { text-align: center; width: 840px; background-image: url(../images/bg_footer.jpg); background-repeat: no-repeat; height: 100px; padding-top: 0px; padding-right: 0px; padding-bottom: 20px; padding-left: 0px; } /*-------------------------------------------------- link */ a { } a:link, a:visited { color: #000033; text-decoration: underline; font-size: 90%; } a:hover{ color: #F2F4EA; text-decoration: underline; } /*-------------------------------------------------- #navibar */ #navibar ul{ margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 20px; } #navibar li{ float: left; list-style: none; } #navibar li a { display: block; text-decoration: none; height: 20px; background-image: url(../images/bg_navi.png); background-repeat: repeat-x; padding-top: 10px; padding-right: 15px; padding-bottom: 10px; padding-left: 15px; font-weight: normal; } /*-------------------------------------------------- #navibar on 「ページのクラス：ホームで、ナビのID：ホームの場合」etc. こうしておけば、全ページを一気に指定できる*/ #navibar li a:hover, .home #navibar ul li a#nav-home, .gamel #navibar ul li a#nav-gamel, .menar #navibar ul li a#nav-menar, .gambe #navibar ul li a#nav-gambe, .penta #navibar ul li a#nav-penta, .warta #navibar ul li a#nav-warta, .kesan #navibar ul li a#nav-kesan, .profi #navibar ul li a#nav-profi, .linku #navibar ul li a#nav-linku, .konta #navibar ul li a#nav-konta { background-image: none; background-repeat: repeat-x; color: #FFFFFF; background-color: #000000; } /*-------------------------------------------------- h */ h1 { padding-top: 70px; padding-left: 750px; font-size: 100%; color: #FFFFFF; font-weight:normal; } #header h1 a { text-decoration: none; } h2 { font-size: 100%; margin-top: 30px; margin-bottom: 20px; padding-left: 20px; height: 25px; padding-top: 5px; border-bottom: 3px solid #F2F4EA; } h2.hrd { background: url(../images/bg_hrd.jpg) no-repeat; } h2.tophrd {/* ページ先頭の見出しのみトップマージン無し */ margin-top: 0px; background: url(../images/bg_hrd.jpg) no-repeat; } h2.hbl { background: url(../images/bg_hbl.jpg) no-repeat; } h2.hgrn { background: url(../images/bg_hgrn.jpg) no-repeat; } .gambe h2 { /* の

このようにすれば、そのページのh2全てにが出てくる度にクラスを指定しなくてよいので、各ページにclass或いはidを付けておいた方が便利 もし以下のようにcssがh2.gambe等だと、htmlで

としなくてはいけない */ margin-top: 0px; background: url(../images/gd_kimi.gif) no-repeat; height: 40px; padding-left: 20px; padding-top: 20px; border-style: none; } h2.penta { background-image: url(../images/ukai_5.gif); background-repeat: no-repeat; padding-left: 40px; padding-top: 15px; margin-bottom: 20px; margin-top: 0px; } h2.kesan { background-image: url(../images/ukai_2.gif); background-repeat: no-repeat; padding-left: 40px; padding-top: 15px; margin-bottom: 20px; margin-top: 0px; } h3 { font-size:100%; } .gambe h3 a { font-size: 120%; padding-left: 10px; } /*-------------------------------------------------- p */ p{ margin-bottom: 20px; } p.top {/* │TOP│*/ text-align: right; } p.center{ text-align: center; } p.an{ background-color: #FFFFCC; padding: 5px 10px; } p.tm{ background-color: #f0f8ff; padding: 5px 10px; margin-left: 20px; } p.in{ padding-left: 30px; } p.date { color: #FFFFFF; background-color: #FFCCCC; margin-bottom: 10px; padding-top: 3px; padding-bottom: 3px; padding-left: 10px; font-weight: bold; } /*-------------------------------------------------- img */ .imgR { padding: 0px; float: right; } .imgL { float: left; margin: 0px; } #sidebar .imgC { margin-left: 30px; padding-top: 5px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; } .home #main img { padding: 10px 20px 20px; } .gamel #sidebar dt img { padding: 5px; border: 1px solid #CCCCCC; } .gambe #one #gdnavi img {/* 1頁に複数画像がある時はこちらの指定方法がよい */ margin: 5px 0px 5px 10px; background: url(../images/bg_gds.gif) no-repeat right top; } .penta #main img, .kesan #main img { padding: 10px; border: 1px solid #CCCCCC; margin-bottom: 20px; } .penta #main img.s, .kesan #main img.s { padding: 0px; border: 0px; margin-top: 0px; } .penta #main #yatchan img.left{ padding: 0px 20px 0px 0px; float: left; border-style: none; } .penta #main #yatchan img.right{ padding: 0px 0px 0px 20px; float: right; border-style: none; } .profi #main img{ padding: 10px; float: right; } /*-------------------------------------------------- a img */ a img { border-style: none; } .penta #main a img {/* チラシ */ padding: 0px; float: right; margin-bottom: 10px; margin-left: 10px; } /*-------------------------------------------------- #sidebar内指定 */ .home #sidebar dl { /* dlを使ったbox */ width: 180px; margin-bottom: 20px; } .home #sidebar .green { font-weight: bold; padding-left: 30px; padding-top: 8px; height: 32px; /* 5+35=40（画像の高さ） */ background-image: url(../images/fr009_34.gif); background-repeat: no-repeat; } .home #sidebar .orange { font-weight: bold; padding-left: 30px; padding-top: 8px; height: 32px; /* 5+35=40（画像の高さ） */ background-image: url(../images/fr007_34.gif); background-repeat: no-repeat; } .home #sidebar dd { background: url(../images/fr007_bg.gif) repeat-y; padding-right: 10px; padding-left: 10px; } .home #sidebar dd.foot { background: url(../images/fr007_foot.gif) no-repeat; height: 15px; } .home #sidebar #mail { float: right; padding: 5px 5px 0px 10px; } .gamel #sidebar dl { margin-bottom: 20px; } dt { } dd { } .penta #sidebar #pentanavi ul { background: url(../images/ukai_4.gif) no-repeat right bottom; } .penta #sidebar #pentanavi li{ list-style-type: none; } .penta #sidebar #pentanavi li a { margin-bottom: 2px; padding: 5px 0 5px 10px; display: block; text-decoration: none; color: #333333; border-left: 10px solid #FFCCCC; margin-left: 20px; } .penta #sidebar #pentanavi li a.on { text-decoration: none; color: #D8F3C9; background-image: url(../images/ya_migi03.gif); background-position: right; background-repeat: no-repeat; border-left: 10px solid #D8F3C9; } .penta #sidebar #pentanavi li a:hover { color: #FF9966; border-left: 10px solid #fafad2; } .kesan #sidebar #kesannavi ul { background-image: url(../images/ukai_3.gif); background-repeat: no-repeat; background-position: right bottom; } .kesan #sidebar #kesannavi li{ list-style-type: none; } .kesan #sidebar #kesannavi li a { margin-bottom: 2px; padding: 5px 0 5px 10px; display: block; text-decoration: none; color: #333333; border-left: 10px solid #99CCFF; margin-left: 20px; } .kesan #sidebar #kesannavi li a.on { text-decoration: none; color: #D8F3C9; background-image: url(../images/ya_migi03.gif); background-position: right; background-repeat: no-repeat; border-left: 10px solid #D8F3C9; } .kesan #sidebar #kesannavi li a:hover { color: #339900; border-left: 10px solid #fafad2; } .linku #sidebar #linkunavi ul { } .linku #sidebar #linkunavi li{ list-style-type: none; } .linku #sidebar #linkunavi li a { margin-bottom: 5px; display: block; text-decoration: none; color: #333333; margin-left: 20px; background-image: url(../images/ya38.gif); background-repeat: no-repeat; padding-top: 5px; padding-bottom: 5px; padding-left: 20px; } .linku #sidebar #linkunavi li a.on { text-decoration: none; color: #333333; background-image: url(../images/ya38.gif); background-position: right; background-repeat: no-repeat; text-align: right; padding-right: 20px; } .linku #sidebar #linkunavi li a:hover { text-decoration: none; color: #cccccc; background-image: url(../images/ya38.gif); background-position: right; background-repeat: no-repeat; text-align: right; padding-right: 20px; } /*-------------------------------------------------- #main内指定 */ .linku #main #linkubox { } .linku #main #linkubox dl { padding-bottom : 10px; } .linku #main #linkubox dt { } .linku #main #linkubox dt a { background: url(../images/ico010_25.gif) no-repeat left center; padding-left: 25px; padding-top: 10px; padding-bottom: 10px; margin-bottom: 20px; } .linku #main #linkubox dt a.ci { background: url(../images/ico011_25.gif) no-repeat left center; } .linku #main #linkubox dt a.in { background: url(../images/ico012_25.gif) no-repeat left center; } .linku #main #linkubox dt a.ot { background: url(../images/ico013_25.gif) no-repeat left center; } .linku #main #linkubox dt a:hover { } .linku #main #linkubox dd { padding-top: 10px; padding-bottom: 10px; } /*-------------------------------------------------- #one内指定 */ .gambe #one #gdnavi { margin-bottom: 50px; margin-left: 20px; width: 700px; } .gambe #one table { width: 730px; } .gambe #one table td { padding: 0px 10px; } .gambe #one table td.nama { background: url(none); text-align: right; } .gambe #one table td.h3mikan { background: url(../images/gd_mikan.gif) no-repeat; } .gambe #one table td.h3mizu { background: url(../images/gd_mizu.gif) no-repeat; } .gambe #one table td.h3momo { background: url(../images/gd_momo.gif) no-repeat; } .gambe #one table td.h3mura { background: url(../images/gd_mura.gif) no-repeat; } .warta #one #wartanavi { margin: 0px 0px 20px 380px; } .warta #one #wartanavi a { text-decoration: none; margin: 5px; background: url(../images/arrow_61.gif) no-repeat left center; padding-left: 10px; } .warta #one #wartanavi a.on { color: #CC0000; background: url(../images/arrow_96.gif) no-repeat left center; } #sidebar .green { } .warta #one dl { padding-bottom : 10px; } .warta #one dt { padding: 5px 10px; margin: 5px 15px 5px 5px; background: url(../images/warta_dt.gif) repeat-x; } .warta #one dd { padding: 10px 30px 30px 30px; background: url(../images/hr.gif) no-repeat right bottom; }