CSS その八
テストでhtmlを真っ白な状態の最初から作る
divタグで囲むブロック要素
ボディ
ヘッダ
左コンテンツ
右コンテンツ
フッタ
これで通販サイトに多い逆L字レイアウトとなる
CSSは
#body{
width: 800px;
margin-left: 5%;
margin-right: 5%;
border-color: #cccccc;
border-style: solid ;
border-width:1px;
color: #666666;
}
/* ヘッダー */
#header{
width: 800px;
height: 200px;
background-color: #FFFF00;
}
/* フッター */
#footer{
width: 800px;
height: 200px;
background-color: #006600;
}
/* 左コンテンナ */
#lcon{
width: 250px;
height: auto;
float: left;
background-color:#3333FF
}
/* 右コンテナ */
#rcon{
width: 550px;
height: auto;
float: right;
background-color:#CC0000
}
各ブロックにbackground-colorを指定
これで位置関係がよく分かる
各ブロックに画像、文章をコピペする
思いどおりの位置になった
フッタは左コンテナの下に回り込んでしまった
フッタの前に回り込み回避のタグとCSSが必要か
+++++++++++++++++++++++++++++++++++++++++++++++++++++++
きっちりと理解せず適当に作ってしまっているので
不用タグが多くレイアウトが上手くいかなかったようです。
皆様、このCSSが変な書き方だと思ったら、ご指導お願いいたします。
+++++++++++++++++++++++++++++++++++++++++++++++++++++
/* フッター */
#footer{
clear: both;
width: 800px;
height: 80px;
background-color: #ABE0E5;
としました。
次は各div要素の中身です。
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++
上手くいったらbackground-colorは削除、
または見栄の良い色か画像に変えます。
オーサリングツールにたよりすぎてhtmlを書いていた弊害です。
divタグで囲むブロック要素
ボディ
ヘッダ
左コンテンツ
右コンテンツ
フッタ
これで通販サイトに多い逆L字レイアウトとなる
CSSは
#body{
width: 800px;
margin-left: 5%;
margin-right: 5%;
border-color: #cccccc;
border-style: solid ;
border-width:1px;
color: #666666;
}
/* ヘッダー */
#header{
width: 800px;
height: 200px;
background-color: #FFFF00;
}
/* フッター */
#footer{
width: 800px;
height: 200px;
background-color: #006600;
}
/* 左コンテンナ */
#lcon{
width: 250px;
height: auto;
float: left;
background-color:#3333FF
}
/* 右コンテナ */
#rcon{
width: 550px;
height: auto;
float: right;
background-color:#CC0000
}
各ブロックにbackground-colorを指定
これで位置関係がよく分かる
各ブロックに画像、文章をコピペする
思いどおりの位置になった
フッタは左コンテナの下に回り込んでしまった
フッタの前に回り込み回避のタグとCSSが必要か
+++++++++++++++++++++++++++++++++++++++++++++++++++++++
きっちりと理解せず適当に作ってしまっているので
不用タグが多くレイアウトが上手くいかなかったようです。
皆様、このCSSが変な書き方だと思ったら、ご指導お願いいたします。
+++++++++++++++++++++++++++++++++++++++++++++++++++++
/* フッター */
#footer{
clear: both;
width: 800px;
height: 80px;
background-color: #ABE0E5;
としました。
次は各div要素の中身です。
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++
上手くいったらbackground-colorは削除、
または見栄の良い色か画像に変えます。
オーサリングツールにたよりすぎてhtmlを書いていた弊害です。