/* Layout ----------------------------------------------------------------- */
body {
text-align: center; ---- IE5.5以下でも「#content-inner」をセンタリングするための指定
background: #fff; --- body要素の背景を白色に設定
}
#container-inner {
width: 940px; --- 幅を940pxに設定
min-height: 100%; --- 高さの最小値を100%に設定
margin: 0 auto; --- ボックスをセンタリングする設定
text-align: left; --- body要素のIE5.5対策でテキストをセンタリングしているのを戻している
}
#header, #content, #alpha, #beta, #gamma, #footer {
position: relative; --- 相対配置にしている
}
#alpha, #beta, #gamma {
display: inline; --- IE6.0以前で発生するマージン関連を解消するための指定
float: left; --- 左側にfloatさせる設定
}
#header-inner, #content-inner, #footer-inner,
#alpha-inner, #beta-inner, #gamma-inner {
position: static; --- 入れ子になっている要素を普通の状態に戻す
}
#header-inner, #content-inner, #footer-inner {
padding-top: 20px;
padding-bottom: 20px; --- 上下のパディングを20pxに設定
}
#header-inner, #footer-inner,
#alpha-inner, #beta-inner, #gamma-inner {
overflow: hidden; --- ボックスからはみ出た部分は表示されないように設定
padding-right: 20px;
padding-left: 20px; --- 左右のパディングを20pxに設定
}
/* Wide-Thin-Thin */ --- 「3カラム、大・小・小」の幅と配置位置を設定。今選択しているテンプレート
.layout-wtt #alpha {
width: 560px;
}
.layout-wtt #beta {
left: 190px;
width: 190px;
}
.layout-wtt #gamma {
right: 190px;
width: 190px;
}
/* Thin-Wide-Thin */ --- 「3カラム、小・大・小」の幅と配置位置を設定。
.layout-twt #alpha {
left: 190px;
width: 560px;
}
.layout-twt #beta {
left: -560px;
width: 190px;
}
.layout-twt #gamma {
width: 190px;
}
/* Wide-Thin */ --- 「2カラム、大・小」の幅と配置位置を設定。
.layout-wt #alpha {
width: 750px;
}
.layout-wt #beta {
width: 190px;
}
/* Thin-Wide */ --- 「2カラム、小・大」の幅と配置位置を設定。
.layout-tw #alpha {
left: 190px;
width: 750px;
}
.layout-tw #beta {
left: -750px;
width: 190px;
}
/* Medium-Wide */ --- 「2カラム、中・大」の幅と配置位置を設定。
.layout-mw #alpha {
left: 330px;
width: 610px;
}
.layout-mw #beta {
left: -610px;
width: 330px;
}
/* Wide-Medium */ --- 「2カラム、大・中」の幅と配置位置を設定。
.layout-wm #alpha {
width: 610px;
}
.layout-wm #beta {
width: 330px;
}
----------------------------------------------------------
今回はここまで。
次回は"blog.css"のコンテンツに関しての記述部分を調べていきます