cozyのひとりごと

追憶と現実の思い入れをおもむくままにつづります
<< June 2017 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 >>
 
RECENT COMMENT
RECENT TRACKBACK
MOBILE
qrcode
PROFILE
無料ブログ作成サービス JUGEM
 
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を書いていた弊害です。
Macintosh | 21:54 | comments(0) | - | - | - |
コメント
コメントする









 

(C) 2017 ブログ JUGEM Some Rights Reserved.