その２〜ぞれぞれの位置とバナーをなんとかする〜

正月あけって、お仕事してなくても、なんだか、だるいです。
しかし、ちゃんと起きて、つれあいの弁当は作りました!
今年からまじめにやります。はい。（弁当づくりを）

このblog。白地に青を基本にデザインしていきたいです。
空、海の青がいいな。
バナーには、もちろん「トガキュー」
（たしか、お好みの画像を表示させることができるときいたので
　青系の画像ばかりの表示ができないかと、調べ中）
サイドにも、アクセントにも青と紺を使うかな〜。

その前に。。
全体を整えます。
ぞれぞれのパーツが、どうはまっているか見たいので、
枠でかこってます。

border:1px solid #666;

なるほど、こうなってるんですね。
左右のサイド、中身はちゃんと下まで表示されてるのに
枠は上のほうにきている。。なんでかな。
追々やっていくとして、
まず、気になるバナーの文字をそろえます。


body {
margin:5px auto 5px auto;
background-color: #FFFAF0;　←しろしろでわかりにくいので
text-align: center;　　　　　　　 このまま。あとで変えます
border:1px solid #666;　←後で消します
}

#container {
position: relative;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
text-align: left;
width: 820px; 　←center390+leftside200+right200
+左右sideのmargin20
　　　　　　　　　 +centerのmargin-left215-(center200+5)
background-color: #FFFFFF;
border:1px solid #666;
}
どこかで
「containerの幅に全部が収まらないと、右サイドが落ちる」
というのを見たので、計算してみました。その「どこか」では
枠１pxまで計算に入ってたので、とてもむづかしく感じたのですが
お師匠さんの「お手本」は明解。

#banner {
position: relative;
margin-left:10px;
margin-top: 10px;
background-color: #807FFE;
height: 100px;
width: 800px;
border:1px solid #666;　←ここにあったfont-sizeを消して　
}　　　　　　　　　　　　　h１とh２に分けました

h1{
margin-left:10px;
font-size:170%;
}

h2{
margin-left:10px;
margin-top:-20px;
font-size:90%;　　　　←font-sizeという語句をいれただけで
}　　　　　　　　　　　 文字がすこし変化するのは、なんで？
　　　　　　　　　　　　おもしろいな。


サブタイトルが「ユーザー情報の変更」内に書き込むのでは
改行ができないので、HTML内に直接入れました。

＜h2＞順番間違えて、HTMLよりCSSのほうが
多少詳しいびおびお。＜br＞こうなったら、つくって覚えるしか
ない！の、実践blog。。(しばらく崩れたままです）＜/h2＞

これで、とりあえずはバナー内に、文字が収まりました。
次は左サイドバーです。