/* トゥーシェ本店「英国・欧州雑貨トゥーシェ」CSSページ *最終更新データ* --------------------- 2012/11/12 担当者：めんたろう --------------------- *div構成* wrapper（全体）┳header ┣body-wrapper ┗sidenavi ┗main-block-right(wrap) ┣main-right(float:right;) ┗main-left(float:left) ┗footer //////////////////////////////////////////////////////////////// <*お約束*> 01) widthを設定したdivにborder、padding（left,right）を設定しない 02) heightを設定したdivにborder、padding（top,bottom）を設定しない →margin、paddingは子要素で設定する 03) floatを設定したdivには必ずwidthを設定する（整形規則の利用） 04) floatと同じ方向にmarginを設定しない。 05) float直後の(clear:both;、floatなし）ボックスにはwidthを設定しない 06) marginはdivではなくp/ul/ol/hnに指定する 07) dl/ul/ol要素にwidth、li/dd/dt/要素にmarginを設定する 08) clearを指定した要素にはmargin-topを指定しないこと 09) tableは表以外の用途で使わない（崩れの原因になるため） 10) --- ////////////////////////////////////////////////////////////////// <*フォルダ構成*> 画像（./images） スタイルシート（./css） java script（./js） ******************************************************************/ * { padding: 0; margin: 0; outline: 0; }/*リセット*/ body { width:100%; font-size: 12px; color:#565656; background:#fff center bottom repeat-x; text-align:center; margin: 0 auto; } a { text-decoration: none; } a:hover {text-decoration: none; color: #FF9933;} a:active {text-decoration:none; color: #FF9933;} a img:hover{ filter: alpha(opacity=85); -moz-opacity:0.85; opacity:0.85; } img { border: 0px ; } /********************文字サイズ設定***************************/ .font-size8px {font-size:8px;} .font-size9px {font-size:9px;} .font-size10px {font-size:10px;} .font-size11px {font-size:11px;} .font-size12px {font-size:12px;} .font-size13px {font-size:13px;} .font-size14px {font-size:14px;} .font-size15px {font-size:15px;} .font-size16px {font-size:16px;} .font-size17px {font-size:17px;} .font-size18px {font-size:18px;} /************************マージン*****************************/ .float-left {float: left;} .float-right {float: right;} .margin-top-1px {margin-top: 1px;} .margin-top-3px {margin-top: 3px;} .margin-top-5px {margin-top: 5px;} .margin-top-7px {margin-top: 7px;} .margin-top-9px {margin-top: 9px;} .margin-top-10px {margin-top: 10px;} .margin-top-15px {margin-top: 15px;} .margin-top-20px {margin-top: 20px;} .margin-top-25px {margin-top: 25px;} .margin-bottom-1px {margin-bottom: 1px;} .margin-bottom-3px {margin-bottom: 3px;} .margin-bottom-5px {margin-bottom: 5px;} .margin-bottom-7px {margin-bottom: 7px;} .margin-bottom-9px {margin-bottom: 9px;} .margin-bottom-10px {margin-bottom: 10px;} .margin-bottom-15px {margin-bottom: 15px;} .margin-bottom-20px {margin-bottom: 20px;} .margin-bottom-25px {margin-bottom: 25px;} .margin-right-1px {margin-right: 1px;} .margin-right-3px {margin-right: 3px;} .margin-right-5px {margin-right: 5px;} .margin-right-7px {margin-right: 7px;} .margin-right-9px {margin-right: 9px;} .margin-right-10px {margin-right: 10px;} .margin-right-15px {margin-right: 15px;} .margin-right-20px {margin-right: 20px;} .margin-right-25px {margin-right: 25px;} .margin-left-1px {margin-left: 1px;} .margin-left-3px {margin-left: 3px;} .margin-left-5px {margin-left: 5px;} .margin-left-7px {margin-left: 7px;} .margin-left-9px {margin-left: 9px;} .margin-left-10px {margin-left: 10px;} .margin-left-15px {margin-left: 15px;} .margin-left-20px {margin-left: 20px;} .margin-left-25px {margin-left: 25px;} .margin5-0 {margin: 5px 0;} .margin10-0 {margin: 10px 0;} .margin15-0 {margin: 15px 0;} .margin20-0 {margin: 20px 0;} .margin25-0 {margin: 25px 0;} .margin0-5 {margin: 0 5px;} .margin0-10 {margin: 0 10px;} .margin0-15 {margin: 0 15px;} .margin0-20 {margin: 0 25px;} .margin0-25 {margin: 0 25px;} .shop-name {color: #099; font-size:12px; font-weight:bold; text-align:left; margin:5px auto 5px 15px;} /************** a hover設定************************************/ h2 {width:160px; height:14px; background-color: #a02121; font-size:14px; font-weight:bold; line-height:14px; color: #FFF; margin:5px 0 4px 6px; padding:4px 5px;} h2 a:link {text-decoration: none; color: #FFF;} h2 a:visited {text-decoration: none; color: #FFF;} h2 a:hover {text-decoration: none; color: #FF0080;} h2 a:active {text-decoration:none; color: #FF0080;} h3 {font-size:11px; font-weight:bold; line-height:14px; color:#663366; margin:5px 0 0 8px;} h3 a:link {text-decoration: none; color:#663366;} h3 a:visited {text-decoration: none; color:#663366;} h3 a:hover {text-decoration: none; color: #9900cc;} h3 a:active {text-decoration:none; color:#9900cc;} div.leftnv ul { list-style: none; } a.leftnv_ct { display: block; width: 180px; min-height: 30px; font-family: '游ゴシック',YuGothic, '游ゴシック体','ヒラギノ角ゴ ProN W3','Hiragino Kaku Gothic ProN','メイリオ',Meiryo,sans-serif; font-size: 13px; } a.leftnv_ct span { min-height: 30px; height: 30px; display:table-cell; vertical-align: middle; } a.leftnv_ct span img { display:inline-block; margin: 0px 5px 0px 0px;vertical-align: middle;} a.leftnv_ct span div { display:inline-block; vertical-align: middle; } a.leftnv_ct_1 { font-weight: bold; color: #FFFFFF; background-color: #8e5455; margin: 10px 0px; border-radius: 20px;} a.leftnv_ct_1:hover { background-color: #AF7475;} a.leftnv_ct_2 { font-weight: bold; color: #333333;} a.leftnv_ct_2:hover { background-color: #DDFFFF;} a.leftnv_ct_3 { color: #333333;} a.leftnv_ct_3:hover { background-color: #DDFFFF;} /*****************レイアウト*********************************/ #wrapwrap /*背景設定用*/ {width: 1050px; background-color: #FFFFFF; margin: 0 auto; background-color:#fff; } #wrapper /*全体wrap*/ {width: 1000px; margin: 0 auto;} #body-wrapper/*body部分wrap*/ {width: 1000px; margin-left: auto; margin-right: auto;} #body-wrapper {width: 1000px; float: left; margin-bottom:20px;} #header/*ヘッダwrap*/ {width: 1000px;} #sidenavi/*サイドナビ（左）wrap*/ {width: 200px; float: left; line-height: 1.2em;} #news_tb tr:nth-child(2n+1) /* 新着情報 */ { line-height:160%; color:#a70790; background-color:#DDFFDD; font-size:14px; } #main-block-right/*メイン（右）*/ {width: 800px; float:left;} /* #main-top {clear: both;} toucheのオススメ以下・clearfix*/ #main-top-w {width: 800px; /*main-bottomの幅確保用*/ float:left;} #main-right /*メイン右-右サイド*/ {width: 190px; float: right; margin-bottom:5px; margin-left:21px;} .r-side-block {width: 175px; /*右サイド３アイテム用*/ margin: 0 auto; margin-bottom: 5px;} #main-left {width: 555px; /*メイン左（スライドナビ含）*/ display:block; float:right;} .maintitle { font-size:13px; /*メイン右３アイテム用*/ font-weight:bold; text-align:left;} .maintitle-center {font-size:13px; /*Accessoryｲﾛｲﾛのテキスト装飾*/ font-weight:bold; text-align: center; margin-bottom:5px;} .maintitle2 {font-size:12px; /*pickupのテキスト（タイトル）装飾*/ font-weight:bold; text-align:left; margin-bottom:3px;} .maintxt {text-align:left; /*pickupのテキスト（２行目）装飾*/ margin-bottom:8px;} #main-bottom {clear: both;} /*toucheのオススメ以下・clearfix*/ #main-bottom-w {width: 800px; /*main-bottomの幅確保用*/ padding-top:15px;} /*下マージン指定*/ .margin-bottom {margin-bottom:15px;} .margin-bottom-7px {margin-bottom:7px;} .margin-bottom-2px {margin-bottom: 2px;} /*下マージン指定*/ /*インラインフレーム（NEWS!）*/ .iframes2 {border:3px dotted #FF9900; background:#ffffff; font-size:12px; line-height:130%; vertical-align:bottom; color: #636; text-align:left; width:228px; height:214px; padding:3px; overflow:auto; margin:0 10px 0px 10px;} .iframes2 a:link { color: #636; } /* 通常時 */ .iframes2 a:visited { color: #636; } /* 訪問済 */ .iframes2 a:active { color: #F60 } /* クリック時 */ .iframes2 a:hover { color: #F60; } /* オンマウス時 */ .news { margin:4px 0; } .newitem {color: #0C0; } .antieqitem {color: #90F; } #iroiro {width:770px; /*いろいろコーナー*/ margin:10px 0 10px 20px; background-color:#FFF; float: left; } /***************いろいろコーナー・リスト関連********************/ #iroiro-list {width:760px; list-style:none; text-align: center; margin: 10px 0 0 10px;} #iroiro-list li {display:inline; float: left; margin-right:11px;} #iroiro-list li p {font-size:12px; font-weight:bold;} #iroiro-right {font-size: 12px; float:right;} /******************マージン設定**********************************/ .title {margin:10px auto 10px 10px;} .title2 {margin:10px auto 3px 20px;} .title3 {margin:5px auto 3px 10px;} .margin-bt-15px {margin-bottom:15px;} /* ★不使用★.hotitems {margin:0 10px;}*/ /*マージン設定ここまで*/ /********************PickUpコーナー*****************************/ #pickupwrap {width: 770px; float: right; margin-right:10px; background-color: #fff; } #pickup {width: 740px; display: block; padding: 10px 0; list-style: none; margin-left:15px; float: left; } #pickup img {margin-bottom: 5px;} .pkup-list-l {width: 140px; float:left; display: block; margin:0 10px 0 0; padding:0;} .pkup-list-l2 {width: 140px; float:left; margin:0 10px 0 0; display: block;} .pkup-list-r {width: 140px; float:right; display: block; padding:0;} #pkup-r { width:230px; display: block; padding:10px 0; float:right; margin-right:10px;} #pkup-r img {margin-bottom: 7px;} /***************PickUpコーナーここまで**************************/ #main-rl/*スライダー含むブロック*/ {width: 555px; float:left; display: inline;} /***************<アンティークカテゴリー>************************/ #ant-cate {width: 770px; background-color:#FFF; float:right; font-size: 12px; line-height: 1.3em; margin-right:10px; margin-bottom:10px; padding-top: 10px; } /****************************************************************/ /*************トゥーシェのおすすめ******************************/ #ossm-wrap {width: 770px; background-color:#FFF; float:right; font-size: 12px; line-height: 1.3em; margin-right:10px; padding-top: 10px; } #ossm-wrap img {margin-bottom: 5px;} #ossme { vertical-align:top; margin:0 5px; /*tabel設定*/ text-align: left;} /***************BODY終了********************************************/ .clearboth {clear: both;} /*toucheのオススメ以下・clearfix*/ /***************フッター********************************************/ #footer {clear:both; font-size: 11px; line-height: 1.4em; padding-bottom:20px; background-color: #BD3C1C;} #information {width: 1000px; /*フッタwrap*/ clear: both; text-align: left; background: #BD3C1C;} .info-list {font-size:11px; /*カレンダー下説明文*/ line-height:13px; margin:0 10px 0 20px; } .info-list span {color:#900; /*カレンダー下説明文*/ font-weight:bold;} .info-list2 {font-size:11px; /*配送についてtext*/ line-height:13px; margin:5px 10px 0 15px;} .for-kouri {padding:7px; /*小売店さまへ*/ margin-top: 20px;} .shopguide {font-size:11px; /*shopguide*/ line-height:14px; margin:5px 10px 10px 15px; list-style-type:circle; } .copyrights { margin-right:30px;} /*著作権表示*/ /*************メイン右最下段ボックス***************************/ #shopinfo {width:800px; /*メイン右最下段*/ float: left; /*トゥーシェ直営店ご案内〜*/ margin-top: 15px; font-size: 11px; line-height: 1.2em;} /****************直営店情報関連指定***************************/ .shop {margin: auto;} .shop-place {margin:0px 5px 5px 10px; text-align:left;} .shop-place span {color:#990000; font-weight:bold;} /****************コピーライツ画像のあるボックス****************/ #copyright {width: 1050px; float:right; padding: 5px 0 15px 0; margin: 0 auto;} /**************　a hover 指定（フッタ部分）　******************/ .txt_01 a:link {text-decoration: none; color: #930;} .txt_01 a:visited {text-decoration: none; color: #930;} .txt_01 a:hover {text-decoration: none; color: #FF9933;} .txt_01 a:active {text-decoration:none; color: #FF9933;} /**************　新スライダー関連　******************/ #main_slider_wrap{ position: relative; } .slider_conts{ position: absolute; left: 0px; top: 0px; display: none; } .main_slider_btn{ margin: 0px 5px; } .main_slider_btn:hover{ filter: alpha(opacity=75); -moz-opacity:0.75; opacity:0.75; }