レイアウト AQUAS用 CSSカスタム方法

基本レイアウト

/* ---------------- 基本レイアウト */

 

#container {
width: 1002px;
margin-right: auto;
margin-left: auto;
background-color: #CCCCCC;
}
#container .inner {
background-color: #FFFFFF;
margin-right: 1px;
margin-left: 1px;
}

 

#header {
height: 300px;
background-image: url(img/wtr0061-024.jpg);
overflow:hidden;
background-repeat: no-repeat;
background-position: left top;
width: auto;
}

 

 

/*
■ヘッダー・タイトル
左寄せにしたい場合はleftの値を20pxに変更
*/
#header h2 ,#header .title {
width: 440px;
font-size: 22px;
line-height: 30px;
padding-left: 20px;
padding-right: 20px;
position: relative;
top: 40px;
left: 320px;
}

 

/*
■ヘッダー・説明文
左寄せにしたい場合はleftの値を20pxに変更
*/
#header #headertext {
font-size: 13px;
width: 440px;
padding-right: 20px;
padding-left: 20px;
position: relative;
top: 40px;
left: 320px;
}

 

 

/*
■ヘッダー・タイトル、説明文
色を変更したい場合は、colorの値を変更。
非表示にする場合は、text-indentのコメントアウトを削除。
*/
#header h2 a, #header h2 a:visited,#header .title a,#header .title a:visited,#headertext {
color: #FFFFFF;
text-decoration: none;
/*text-indent:-9999px;*/
}

 

 

#siteNavi {
font-size: 0.8em;
line-height: 1.5em;
margin-bottom:15px;
}

 

 

#contents {
_height:10px;
padding-top: 5px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 10px;
background-image: url(img/contents_bg.jpg);
background-repeat: repeat-y;
min-height:400px;
}

 

 

#top {
background-image: url(img/top.gif);
height: 155px;
}

 

 

#main{
float: right;
width: 750px;
}

 

 

#menu {
width: 200px;
float: left;
padding-top: 10px;
padding-bottom: 10px;
}

 

#menu:after,#contents:after{
height: 1px;
overflow: hidden;
content: "";
display: block;
clear: both;
}

 

 

#footer {
text-align: center;
height: 40px;
line-height: 40px;
background-color: #7CCBEC;
color: #FFFFFF;
border-top-width: 2px;
border-top-style: solid;
border-top-color: #EBEBEB;
}

 

#footer a{
color: #FFFFFF;
text-decoration: none;
}

 

 

.FloatEnd {
clear: both;
display: block;
height: 1px;
}

 

/* ---------------- 基本レイアウト */

 

#container { ⇒コンテナ設定
width: 1002px;            ⇒全体幅
margin-right: auto;          ⇒右余白自動調節
margin-left: auto;            ⇒左余白自動調節
background-color: #CCCCCC;     ⇒サイト背景色
}
#container .inner {                ⇒コンテナ中設定
background-color: #FFFFFF;      ⇒コンテナ背景色
margin-right: 1px;              ⇒右余白1
margin-left: 1px;                ⇒左余白1
}

 

#header {                       ⇒ヘッダー領域設定
height: 300px;                 ⇒ヘッダー幅
background-image: url(img/wtr0061-024.jpg);  ⇒背景画像
overflow:hidden;                    ⇒はみ出し部を隠す
background-repeat: no-repeat;         ⇒背景繰り返さない
background-position: left top;          ⇒背景基準位置
width: auto;                      ⇒横幅自動調節
}

 

#siteNavi {                      ⇒サイトナビ設定
font-size: 0.8em;                  ⇒文字大きさ
line-height: 1.5em;                  ⇒文字領域
margin-bottom:15px;                  ⇒下余白
}

 

 

#contents {                    ⇒コンテンツ設定
_height:10px;                     ⇒高さ
padding-top: 5px;                    ⇒上余白
padding-right: 15px;                   ⇒右余白
padding-bottom: 15px;                  ⇒下余白
padding-left: 10px;                      ⇒左余白
background-image: url(img/contents_bg.jpg);      ⇒背景画像
background-repeat: repeat-y;               ⇒背景縦に繰り返す
min-height:400px;                    ⇒ボックスの最小の高さ
}

 

#top {                        ⇒トップ設定
background-image: url(img/top.gif);      ⇒背景画像
height: 155px;                    ⇒高さ
}

 

 

#main{                       ⇒メイン設定
float: right;                     ⇒テキストの右回り込み回りこみ解除
width: 750px;                    ⇒メイン幅  
}
#footer {                      ⇒フッター設定
text-align: center;                 ⇒中央寄せ
height: 40px;                     ⇒高さ
line-height: 40px;                   ⇒文字領域
background-color: #7CCBEC;            ⇒背景色
color: #FFFFFF;                      
border-top-width: 2px;                 ⇒上線太さ
border-top-style: solid;                 ⇒囲む
border-top-color: #EBEBEB; ⇒上線色
}

 

#footer a{                         ⇒フッターカーソル時
color: #FFFFFF;                      ⇒カーソル時色
text-decoration: none;                  ⇒装飾なし
}

レイアウト関連エントリー

レイアウト
コンテナ領域,全体の共通設定,基本レイアウト