MIOテンプレート

MIOテンプレート

みどり幼稚園をベースに作成

DD_belatedPNG.js　→　ie6でping透過を可能

totop.js →　ゆっくり上部にスクロール

CSS import 古いブラウザでは読めなくするための処理
ie5.5→ie6の変換モード

CSS　は　カテゴリごとに作成することもある

print.css

body{
color:#000!important;
background-image: none;
}

→　ffでbody背景が各ページに残るので・・・上記

clear.css

charset “utf-8″;

/* ===================================================================

ClearFix

——————————————————————- */

#contentsArea dl.frame-v1:after,
#contentsArea dl.float-v3:after,
#contentsArea dl.float-v2:after,
#contentsArea dl.float-v1:after,
#contentsArea .main ul.float-v1:after,
#contentsArea .main .layout-3c:after,
#contentsArea .main .layout-2c:after,
#contentsArea .top-layout-2c:after,
#contentsArea .top-layout-3c:after,
#contentsArea:after{
content:”.”!important;
display: block!important;
height:0px!important;
clear:both!important;
line-height:0!important;
visibility:hidden!important;
line-height:0!important;
font-size:0!important;
}
divの中にfloatすると親divがつぶれる
下でclear 使うと印刷時に崩れる

:疑似セレクタ

メインテンプレート

headArea naviArea crumbArea
contentArea
footArea
第2階層　テンプレート

contentArea div　内に　sub と　main div
common.css

body {
width: 100%; ■→100%
color: #333;
font-size: 100%;
line-height: 1.6;
text-align: center;■→真ん中寄せ
background-image: url(../img/common/head/head_bg.jpg);
background-repeat: repeat-x;
}

img {
vertical-align: bottom;
border: none;
}
→ff対策
ul {
list-style-type: none;
}
→ffとieで　・の位置が違うために背景で指定
table {
font-size: 100%;
line-height: 1.6;
}
→tableの中だけフォントが大きくなることの対策
headArea naviArea → width 900
真ん中寄せ方法
ie→bodyのtext-align: center;
ff→　margin-right: auto;
margin-left: auto;