２個目作成。むづかしいのは、なんといっても、
「髪の毛の影」がお手本のようにならないこと。
チャンネルの便利さのちょこっとわかってきたかなあ。
（説明しろと言われると、こまるんですが）

お手本より、ちょとこわい顔のうさぎです。。


「FHOTOSHOP びっくり キャラクタデザイン」
by MdN書籍編集部 より
（６年前の本だから、書店にないかも。。）

おはようございます。
「グラス」のほうで、どたばたしてましたら
「MTやってみません？お勉強になりますよ」って
うれしいお誘いをいただいたんですけども、
行ってきたら、全面、英語だったので。。。（しおしお）
サーバーがどうとかって。。？？わからんですもん。
もう、だめなんですよお〜。頭が。。
コンピューターも英語も、勉強しなくては。。（笑）


さて。
色なんですが。文字の。
色サンプルばかりながめてても、実際入れてみると
ぜんぜん合わなかったりで、いろいろ試してます。
今は、こんな具合。。
これがいいかどうか、わかんないくらい。。たぶん。。
前のオレンジの方がよかった？？
ほんとは、横カレンダーの色に全部してしまいたいけど、
ちょっと、冠婚葬祭のイメージになってしまったので（笑）やめ。
なかなか「これだあ〜！」にはいきあたりません。
まだまだ、模索中。。

それで、文字の大きさ。
サイドバーのタイトル部分。
びおびおのFirefoxでは、本文のタイトルと同じ大きさでも
気にならなかったのですが、
お師匠さんから「Winでの見た目」を教えてくださって、
それで、Mac+IEなど確認したら、なんとなく
サイドバーのタイトルが「大きすぎ」と思いました。

なので、本文内のタイトル＜h３＞と切り離して、
＜h４＞をつくり、ちょっと小さめに指定しました。
いろんなブラウザで見るのって、また違う目で確認できて
気づくことができますね。大事だ。これ。

こんな感じです。
まだまだ、やることがあります。

「Photoshopを使えるようになりたい」と思ってました。
ある程度は使えるんだと思うんですか（時間がかかる）
これでアルバイトしろ！と言われたら自信がない。。
それで、５年ほど前に買っておいた本の作品を
片っ端からやることにしました。

「びっくりPHOTOSHOP キャラクタデザイン」という本。

買った当初、レイヤーって？マスクって？って
「？？」が多すぎて、放り出してたものです。
今だと、わかる。
でもチャンネルとかどういう時に使うものなのか
まだ、わからない。はっきりと書いてないし。
でも、
「理解しながら」とか「納得いくまで」とかでなく
とにかく数をこなしてみると、いくつかやっていくうちに、
わからなかったことも、わかってくるんじゃないかな。。と、
今までHTMLをとりあえず写してきた感触から、思います。
（いや。。どうかわかんないですけども。。笑）

せっかくだから「課題」をUPすることにしました。
一冊終わったら、自分でなにか作ったものをUPできるように
なってるといいな。。
（５年前の説明書だから、機能変更の微妙に違うところがあって
　カンを働かせるのがむづかしかったりで。。笑）

旅にでたものの、帰ってきました（笑）
「おお！」という出会いは、探そうとしてもダメです。
「出会い」はご縁ですから〜。（と感覚人間）

それで、自分のblogを眺めてて、
リンク色はオレンジでも、いいんじゃないかな〜と
思えてきました。（ブルーとそんなに合わなくもない？）

なので、他のブラウザでもFirefoxで見えてるのと同じくするため
●リンク色を指定。
[CSS]
　　A:link {color:#FF6600}
　　A:visited{color:#FFCC99}
　　A:active {color:#}
　　A:hover {color:#FFCC99}
　行ったところとこれから行くぞという時は、
　薄いオレンジにしました。


●左サイドバーのインフォ部分を整えました。
　文字も小さくしました。
[html]
　　＜p class="pay"＞
　　＜img src="＜%image＞"title="＜author_name＞"＞＜/p＞
　　＜p class="info"＞ ＜!--インフォ--＞
　　＜%author_name＞のblog＜br＞
　　＜br＞
　　＜%introduction2＞＜br＞
　　＜/p＞
　　　　→＜div＞だったけど、段落上下を改行つきに
　　　　　したかったため、＜p＞に変えてみた。
　　　　→位置を揃えたかったので、class指定。
[CSS]
　　.pay{text-align:center;}　 ←インフォ画像を真ん中

　　.info{padding-left:5px;}　 ←下のコメント部分

　　この下にあった、FC２のクレジットは下に移動。

●右サイド一番上にあった「Links!」を
　びおびおのblogバナーに変えてみたとです。
　バナーは作っといて、ファイルアップロードに入れとくです。
[html]
　まず＜!--link--＞内のこの部分をはずす。
　　＜li＞＜a href="＜%link_url＞" alt="＜%link_name＞"＞
　　＜%link_name＞＜/a＞＜/li＞
　
　それで、このように入れる。
　　＜h3＞びおびお'blog＜/h3＞
　　＜div class=link-banner＞
　　＜img src="http://blog1.fc2.com/y/yu-e/file/
　　20050124161047.jpg" alt="一からばなー" border="0"＞
　　＜br＞
　　＜a href="http://be-dama.seesaa.net/" target="_blank"＞
　　＜img src="http://blog1.fc2.com/y/yu-e/file/
20050124161750.jpg" alt="ぐらすばなー" border="0"＞
　　＜/a＞
　　＜br＞
　　　（略）
　　＜/div＞　　→１個目の「一から」バナーはリンクさせず、
　　　　　　　　　２個目のバナーからリンクさせます。

　それで、試してみたのが。。
　jpgの後ろ「alt＝画像が表示終わるまでにでてくる「文字」」を
　「title」にすると、だいたいのブラウザでそれが出てくる。。と
　いうのを、聞いていたので、変えてみる。
　FC2は表示が早いので、出てるかよくわからないけども
　Firefoxで画像やリンクの上にカーソルを置いとくと
　黄色い小窓がでますよね。それにalt=titleで書かれたものが
　出ると気がついたので、びおはサイトアドレスを書きました。
　どうぞ、きてやってくださいまし。。

こんな感じかな。。

さっき、スレッドテーマのところをみてて
「WRC」っていうのがあったのですよ。
いまから行って、みてこよう〜っと。（嬉）

うぬぬ。これが一番、むづかしいところじゃないだろうか。。
背景が白地なので、文字が黒というのは、なんとなく
「目が痛い」気がする。。
（eMacの画面の大きさにいまだ慣れなくて、せいいっぱい
　腕をのばして、遠くから見ようとしている、びおびお）

そう思って、すこしグレーっぽいほうがいいかなと
文字の色を変えてみました。

[CSS] color:#666;

う〜ん。見にくいですか？　前の黒がいいかなあ。。

Seesaaの「入力フォーム問題」で、ドタバタしてた時に
他のブラウザを開いたついでに「一から」もみてみよう！と。
Firefoxでみてると、オレンジ。
safariその他でみると、ブルーになっていて、
リンクの色指定をしていないことに、気がつきました。（遅）

「グラス」でのリンクの色は、元のテンプレートのオレンジを
そのまま使っていたので、「リンクはオレンジ色」という
固定観念ができていて、今回はじめてチャレンジしました。
が。。ギブアップです。
ブルー系かグリーン系であわせようと思ったんですが、
ブルーだと「寒々」しく感じられ、グリーンだとその色が
blogのメインカラーみたいに感じられ、どうにも。。
いっそのこと、グレーで強弱つけてみよう！と思いましたが、
「のっぺり」して、だめでした。

色を決める基準って、どんなのだろう。。

というわけで、リンクのタグをいったんはずし、オレンジ色に。
それで、びおびおは参考にさせていただく「blogさま探し」を
してまいります。
いつ、帰ってくるかなあ〜。（笑）

＊そだ。
　 contentを400px、leftとreightを170pxに変更しました。
　カレンダー部分とcenterを微妙に間隔をあけました。
　（わかんないですね。へへ）

さて、デザイン！に手を付けるところまで来ました。
（ばんざ〜い）
とりあえず、一番目につくところの「バナー」を
自前の写真でつくりました。

トガキューで「青系」写真を集めて表示させることは、
無理だそうであります。でも、お師匠さんが、別の案を
ご紹介してくださるということなので（ありがたいです　拝）
びおにできるんだったら、そちらをやってみようかと。。
それまで、このblogのイメージの助けということで、これを。
また、ちょくちょく変わるかもしれません。

バナー画像のをどうやってつくったか。。って
みなさまのほうが詳しいので、びおのはいいですね。
（もっと、いい手順があれば、教えていただきたい〜）
タイトルの影は、同じものを２つ作って、一つをグレーにして
レイヤーで順番を入れ替え、ずらして作ったのであります。
サイズは800x100。

[CSS]
#bannerのところの[background-color:〜;]をはずして
[background-image:url(〜);]を入れました。
[〜]にはファイルアップロードにいれて、出したタグから
http〜ingのところを抜き出して、貼ったです。

FC２のファイルアップロード。画像を貼るためのタグが
長いです〜。最初、[http〜jpg]を抜き出して貼った時
表示されず、ええ？と思って、全部貼っても表示されず。
この繰返しをしていて、うむむ。jpgの後に入れていた
[borber="0"]をはずしてみて、表示できました。
入れれないのかなあ。Mac+Firefoxでは枠なしだけど。
大丈夫なのかな。後で、確認しておこう。

このままだと、前のタイトルとサブタイトルが出てしまうので
[HTML]
＜div id="banner"＞内の
＜h1＞＜a href="./"＞＜%blog_name＞＜/a＞＜/h1＞
↑タイトル
＜h2＞＜%introduction＞＜/h2＞
↑サブタイトル
を全部消しました。

あ、「設定した情報の変更」に行って、タイトル部分と説明を
空欄にするだけでもいいみたいです。
（↑あ、ダメです。FC2の新着記事一覧で、記事はでるけど
　　名無しになってしまいます。）

と、こんな感じで。

このごろ、つれあいが「信長の野望」（PS）にはまっていて
テレビを占領されるので、夜がたいくつであります。
夜は、みなさまのblogめぐりをさせていただくのですが
それでも時間があまるので、昨夜はここのデザインのことを
考えてみました。
紙なりに書いて、考えると良いのでしょうけど
あんまり、ピンと来ないので、ちょこちょこっと
いじってみたりして、アイデアをふくらませてます。

カラーは「青」で！
どこかですてきなblogデザインを見つけたのですよ。
それが、ブックマークしたつもりが、探してもなくて
記憶をたどると、

●とてもシンプル。クール。
●バナー部分が、海か空のきれいな画像だった。
●背景は白だった。
　　　　　　　　　　　　　ということくらいしか。。（笑）

びおのは、てんこもり状態になるのがオチなので、
そのへんに注意しながら、ブルー＆シンプル＆クールを
めざしたい。

それで、当面やってみたいことは
●バナー部分に「きれいな青」の画像
　できれば、トガキューで青系を集められるとすてきかな。
　できるのかなあ。できたとしても、びおが設置できるのかと。

●左右サイドのタイトル部分の背景に
　「青」の画像をいれてみたい。
　（バランス悪かったら、はずす）

●タイトル文字を作ってみる
　
こんなところかなあ。。思い浮かばないやあ。


写真の整理をしていて、たまたま、とてもきれいな青の空と
水族館のイルカ水槽を撮ったきれいな青の写真がでてきて
ふと、この２枚をつかって、びおもblogのデザインを
はじめからつくれないかなと、無謀な試みをしました。
CSSのみ触れるSeesaaでは、なんとか「見れる」ものが
できてたんですけど、それをFC2に持ってきたら
もう、調整する気力がなくなりました。（笑）
それで、じゃあ「一からつくってみよう！」というわけに。

できれば、その２枚を、つかいたいなあ。。
さて、どんなにしよう。。

おはようございます。
「朝なわとび」でちょっと、筋肉痛です。
運動。運動。元気にいきましょう。2005年。です。

paddingを入れると、幅がそのぶん広がってしまうので
左右10pxづつへらして、整えました。

それで、横カレンダー

[HTML]
●bannerとcenterの間に、横カレンダーを入れたいので、
　＜ul class="yokocal"＞
　＜li＞＜a href="<%prev_month_link>"＞＜%prev_year＞.
　＜%prev_month＞＜/a＞＜/li＞
　＜li＞<<＜/li>＞
　＜!--calender2--＞
　＜li＞＜%days＞＜/li＞
　＜!--/calender2--＞
　＜li＞>>＜/li＞　
　＜li＞＜a href="＜%next_month_link>"＞＜%next_year＞.
　＜%next_month＞＜/a＞＜/li＞
　＜/ul＞
　　　　　　　　　　　　　　　　　　を入れました。

[CSS]
●centerにわかりやすいように、色を入れて、center部分を
　下げました。
　　#center {
　　　position:relative;
　　　background-color: #FF88FF;　←紫色に
　　　margin-top: 20px;
　　　}

●center部分を下げると、その中にはいってるcontentと
　左右のサイドバーも一緒に下がるのかなと思ってたら
　左右サイドバーはご一緒じゃなかった。。
　ので、それぞれ、様子を見ながら、下げる。
　　#left {
　　　position:absolute;　　　
　　　top:127px;　　　　　　←ここをちょこっと。
　　　：　　　　　　　　　　　　右サイドも同じく。
　
●＃banner＃centerの間に
　　.yokocal{
　　　position:absolute;
　　　top:105px;
　　　left:20px;
　　　text-align:center;
　　　font-size:65%;
　　　}

　　.yokocal li {
　　　display: inline;
　　　margin: 3px;
　　　}　　　　　　　　　　を入れました。

　縦だったカレンダーが横になりました！（CSSすごい！）
　左寄りなので、中央揃えにしたいのですが
　fc2のお手本どおりpaddingが入ったままだと、
　text-align:centerが効かないみたいなので、はずして
　それでも若干左寄りにみえるので、positionでleftを20px
　いれました。
　それとも、paddingを優先して、text-align:centerをはずし
　left:60pxにしたほうがよかったか。。
　どっちでも、思ったところに来たけど。

ここまでして、centerの色を白に戻しました。

見栄えは、後にして、きれいに並べてみてるところです。

なぜ、右サイドがとびだしたか。。
右サイド中に＜/div＞が一個、残ってました。
ず〜と眺めてて、気がつきました（汗）

これを取った後、
「教え」にならって、やったこと。
●[HTML]
centerの中に、rightとleftの両サイドをいれる
（が〜と、centerの＜/div＞を、contentのおしりから
　rightのおしりへ）
　びおびお、center=contentだと思い込んでました。
　postがFC2ではsubと呼ばれているので、名称が違う
　ということなのかと。。。はずかし！
●[CSS]
contentをつくって、centerにいれてたものを、移動。

　　#center {
　　position:relative;
　　background-color: #FF88FF;
　　}

　　.content{
　　margin-left:215px;
　　margin-top: 5px;
　　width: 390px;
　　height: auto; /* temp */
　　font-size:80%;
　　padding-bottom:30px;
　　border:1px solid #666;
　　}

●[CSS]
leftとrightのpositionを書き直す。

　　#left {
　　position:absolute;
　　top:110px;
　　left:5px;　　　←ーーーcenterの左枠から5px

　　　　　　　　　　　　　　 relativeとabsoluteの関係
　　　　　　　　　　　　　　 う〜ん。なんとなくわかる。
　　　　　　　　　　　　　　 ような。。。
　　#right { ちょっと、頭まとめます。
　　position: absolute;
　　top:110px;
　　right:5px;　　 ←ーーーcenterの右はしから5px

[？] ↑左右のサイドバーのtop:110pxがついてるけども
　　　これの起点はcontainer になってるような。
　　　relativeがついたcenterの枠が基準だとすると　
　　　このtop:110pxっていらないんじゃないかと
　　　はずすと、下に落ちるし。。
　　　なぜ、centerの上枠からじゃないんだろう。
　　　びおの考え方が、変ですか。。（笑）


centerと両サイドにpaddingを入れると、
幅がその分広がって、お互い重なってしまいます (涙）
なんでー？かなあ。
いまは、全部はずしてます。
うう〜。
どうやっても、重なるんだったら、幅を調節しつつ
整頓していきます。

なかなか、頭フル回転でございます。
（もっとまわれ！）

昨日いただたお師匠さんの「お助けコメント」を、印刷して
いろんなことの合間に何度も読んで、
考えて、やっとわかりました！

それで、HTMLとCSSを変更してますが、
なかなか「？？？」であります。

center(紫色）の中に、contentとrightとleftをいれて
左右のサイドのpositionを書き替えましたが
右サイドだけ、なぜかcenterからとびだす。。

HTMLを見ている途中で「これ、なんであるのかな」と
いうものまで、でてくるし。。

で、ちょっと考え中です。
もちっと、待ってください。
理解しますです。

おはようございます。
昨年とはうってかわって「朝起き+弁当作る+勉強」が
できています。
なかなかいいスタートの2005年、びおびおです。

今日は左サイドバーを、整頓しました。
[CSS]
#left {
position:absolute;　　←これがよくわかりませぬ。。
top:110px;　　　　　
left:55px;　←　　←　　←ずいぶん左に離れてたので
margin-top: 15px;　　　 呼び戻しました。
width: 200px;
background-color: #;
height: auto; /* temp */ ←200pxだったのをautoに。
font-size:75%;　　　　　←80％だったのを小さく。
text-align:left;　　　　 ←センターにきてたので左揃えに。
padding:5px;　　　　 ←ちょっと疑問が。。
border:1px solid #666;
}

ul.olを使うと左端が空くのがいやなので、
はずしてみました。
[HTML]
＜div class="info"＞ ＜!--インフォ--＞
＜%author_name＞のblog＜br＞
＜%introduction2＞＜br＞
＜a href="＜%url＞?xml"＞RSS＜/a＞＜br＞
＜%ad＞＜%ad2＞
＜/div＞　　←＜li＞＜/li＞もはずして＜br＞を入れてみた。


＜h3＞びおのエントリーたち＜/h3＞
＜div＞
＜!--recent--＞ ＜!--最近の記事一覧--＞
＜li＞＜a href="＜%recent_link＞"
title="＜%recent_body＞"＞＜%recent_title＞＜/a＞
＜span＞(＜%recent_month＞/＜%recent_day＞)＜/li＞
＜!--/recent--＞
＜/div＞　　　←＜li＞＜/li＞は残してみた。

[？]　＜li＞＜/li＞って単独で使ってもいいのかなあ。

[メモ]
div　一段落、前後に空きがない。
p　　一段落、前後に空きがある。（文章中に使うといいね）


[？]　
relative→標準表示位置からの相対位置で配置
absolute→親要素に対する絶対位置で配置
探してきました「absolute は、relative または absolute を
指定した親要素（無ければページ）の左上を原点とします」

わからないです。。頭がわかってくれないです。
今日一日、考えてみます。

[？]
昨日marginとpaddingのくらべっこして、理解したと
思ってるんですが、左サイドにpaddingを5px以上入れると
右に幅がのびて、センターにかかってしまいます。
なんでだろう。。

今日は、やってるうちにいろいろ[？]が出てきたので
いろいろ、調べたりします。
次回の〜右サイドの整頓〜はちょっと先になるかな。。
亀の歩みは、力強く！（なんですか。それ）

では。よい一日を！ね。びおびおくん。

わかっているつもりで、実際にわかっていない、２つの関係。
marginとpaddingは、いつもそんなぐあいでした。
「グラスの中のビー玉」でも、なかなかきれいに表示されずに
困ってた時、ふと思い立ってmarginをpaddingに変えただけで
収まった。。ということがありました。
なんか、つかみきれてないんですよね。びおびお。
前のエントリでも、枠ぎりぎりに文字をいれたくないので
paddingを１０pxづつとったけど、そのぶんをwidthから
引くのか引かないのかで、「う〜。」ってなってたら、
お師匠さまが解説してくださいました。（感激）
（前のその3.5コメントをごらんくださいませ）

それで、「見て」みることにした。
お師匠さん曰く
「width:100px; padding:10px;
　と
　width:80px; margin 10px;
　は見かけ上同じものに見えます。が、枠を引いて中に文字を
　書くと違いがわかりますよ。」と。

なので、びおびお。このblogのcenterを使って
A　width:390px; padding:10px;
B width:370px; margin:10px;　
　　　　　　　　　　　　　になるように変えて「見た」。

A


B



でした。画像を作っている途中で気がついたのが
「枠がBのほうが、小さくなってる！」
余白が、枠線の外についてるか、内についてるかが
しっかり、わかったです。合計の幅はいっしょなのね。

marginとpaddingを同時に使うときは、ちょっと計算しないと
いけないのですね。。。（びおびおは文系。。）

[おまけ]
FC２のプレビューはSeesaaのより使えるぞ！
どうやって使えばいいのか、わかるのに３日、かかったけど。
それとFirefoxのタブって、こんなに便利だったとはっ！！

以上です。ほひ！

お師匠さんに教えていただいたので、さっそく。。
[HTML]
＜div class="honbun"＞
＜%topentry_body＞ ＜!--本文--＞
（略）
＜/div＞ ＜!--sub--＞
＜/div＞ ＜!--honbun--＞

下のsubの部分まで入れて、くくってみました。

[CSS]
.honbun{
margin-bottom:50px;
}
これで、一記事ごとの空きがでました。（嬉）
ついでに

.sub{
margin-top:30px;
}
テキストとsubの部分も、空けてみました。
これで、書いた終わりに数行入れなくていいなあ〜。へへ。
（今まで手作業していた、びおびお。。。）


それから、昨日、寝ながら考えたこと。

width: 370px;　　　←下でpaddingを左右１０づつ
　　　　　　　　　　 取ったので２０減らしている

減らす必要があるのかな。。と思って、
また390に戻しました。多分、画面に変化があったので
そう考えたんだろうけど、今戻してもなんの変化も
ないので。。なんだったんだろう。。
　　
Seesaaって、記事にCSSをそのまま書くと
反応しちゃうので、引用を使わなければならなかったです。
FC2はそのままで大丈夫みたいだけど、これから先、
FC2が進化していくとともに、変更されると、こわい！
大丈夫かなあ。（その時がきたら、手作業しなくては。。）

では。明日は、UPできないかもです。おでかけ〜。

昨日、左サイドからといいましたが、
本文があるセンターから。。

#center {
position: relative;
margin-left:215px;　
margin-top: 5px;　　　
width: 370px;　　　　　←下でpaddingを左右１０づつ
background-color: #;　　 取ったので２０減らしている
height: auto; /* temp */
font-size:80%;
padding-left:10px;　　　←追加
padding-right:10px;　　 ←追加
border:1px solid #666; ←後で消します
}

１エントリと１エントリの間を、すこし空けたいと
margin-bottomやpadding-bottomを入れてみるけど
変更されないのです。うむむ。やり方が違うのかな。
（考え中）

そだ。記事にHTMLを載せる時は＜＞を大文字にしないと
反応してしまってたけど、CCSはそのまま載せてても
大丈夫なのだろうか？？　
一応、確認はして、大丈夫そうだけど。
あの。大丈夫？（と聞いてみる）

それから、下のsub(記事の日付、コメント、TB数）を
番号入りから箇条書きに変更して、左にそろえたかったので

＜div class="sub"＞←olからulにしたあとdivに変更（笑）
　　　　　　　　　 ←ここにあった＜ol type="A"＞を消す
＜li＞略＜/li＞
＜li＞略＜/li＞
＜li＞略＜/li＞
＜li＞略＜/li＞
＜/div＞

おお！
ol.ulからdivに変えたら、勝手に左端に揃ってくれました。


と、こんなかんじです。
では、また。
＊あれ、今見たら、左右のサイドバーがセンターから
　 離れてしまったぞ。。？？

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

この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＞

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