その4.5〜教えにならう〜
なぜ、右サイドがとびだしたか。。
右サイド中に</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を入れると、
幅がその分広がって、お互い重なってしまいます (涙)
なんでー?かなあ。
いまは、全部はずしてます。
うう〜。
どうやっても、重なるんだったら、幅を調節しつつ
整頓していきます。
なかなか、頭フル回転でございます。
(もっとまわれ!)
右サイド中に</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を入れると、
幅がその分広がって、お互い重なってしまいます (涙)
なんでー?かなあ。
いまは、全部はずしてます。
うう〜。
どうやっても、重なるんだったら、幅を調節しつつ
整頓していきます。
なかなか、頭フル回転でございます。
(もっとまわれ!)
その3.5〜教えにならう〜
お師匠さんに教えていただいたので、さっそく。。
[HTML]
<div class="honbun">
<%topentry_body> <!--本文-->
(略)
</div> <!--sub-->
</div> <!--honbun-->
下のsubの部分まで入れて、くくってみました。
[CSS]
.honbun{
margin-bottom:50px;
}
これで、一記事ごとの空きがでました。(嬉)
ついでに
.sub{
margin-top:30px;
}
テキストとsubの部分も、空けてみました。
これで、書いた終わりに数行入れなくていいなあ〜。へへ。
(今まで手作業していた、びおびお。。。)
それから、昨日、寝ながら考えたこと。
width: 370px; ←下でpaddingを左右10づつ
取ったので20減らしている
減らす必要があるのかな。。と思って、
また390に戻しました。多分、画面に変化があったので
そう考えたんだろうけど、今戻してもなんの変化も
ないので。。なんだったんだろう。。
Seesaaって、記事にCSSをそのまま書くと
反応しちゃうので、引用を使わなければならなかったです。
FC2はそのままで大丈夫みたいだけど、これから先、
FC2が進化していくとともに、変更されると、こわい!
大丈夫かなあ。(その時がきたら、手作業しなくては。。)
では。明日は、UPできないかもです。おでかけ〜。
[HTML]
<div class="honbun">
<%topentry_body> <!--本文-->
(略)
</div> <!--sub-->
</div> <!--honbun-->
下のsubの部分まで入れて、くくってみました。
[CSS]
.honbun{
margin-bottom:50px;
}
これで、一記事ごとの空きがでました。(嬉)
ついでに
.sub{
margin-top:30px;
}
テキストとsubの部分も、空けてみました。
これで、書いた終わりに数行入れなくていいなあ〜。へへ。
(今まで手作業していた、びおびお。。。)
それから、昨日、寝ながら考えたこと。
width: 370px; ←下でpaddingを左右10づつ
取ったので20減らしている
減らす必要があるのかな。。と思って、
また390に戻しました。多分、画面に変化があったので
そう考えたんだろうけど、今戻してもなんの変化も
ないので。。なんだったんだろう。。
Seesaaって、記事にCSSをそのまま書くと
反応しちゃうので、引用を使わなければならなかったです。
FC2はそのままで大丈夫みたいだけど、これから先、
FC2が進化していくとともに、変更されると、こわい!
大丈夫かなあ。(その時がきたら、手作業しなくては。。)
では。明日は、UPできないかもです。おでかけ〜。
その18〜footer〜
HTML最後の「材料」にさしかかりました!(嬉)
「footer」部分です。
<div id="footer">
<p> Copyright (C) 2004 biobio...</p>
</div> <!--/footer-->
お師匠さんの「お手本」を見て、かっこいいと思ったので
footer内にあった
「Powered By <a href="http://blog.fc2.com/">FC2blog」
を、左サイドの下にちょっと、省略して移し、
ここには「Copyright (C) 2004 biobio...」を入れました。
いろんな話によると、これは入れといた方がいいと。。
だって、びおびおの苦労作ですもんね。
左サイドの下に
<ul> Powered By <a href="http://blog.fc2.com/">
FC2blog</a></ul>
<li>でくくると、左端に寄って・がつく
<ul>でくくると、サイド内のセンターにきてるような気がする。
あとで位置をCSSで指定するから、どうでもいいことなのかも。
以上「材料並べ終わり」(やた!)
暗号のようにしかみえなかったHTMLを
すこしでも理解したいと思って、こんな妙なblogを
つくってしまい、途中、ちょと後悔もしました。
ひっそりやっているつもりですが(なんにもなくて恥ずかしいし)
お師匠さんやご同志の方にみっけられ、ご指導をいただき、
最近は、FC2の「ジャンル別コミュニティ 」からも
お客様がいらっしゃって、これはがんばらなければ。。と
新年に向けて、気持ちも新たに思ってます。
今年はお世話になりました!
来年も、餌をつつくにわとりのように
「こつこつ」やっていきます。
さて、たぶん、これからが最難関の「CSS」。
でも、なんだか、うきうきするな。
だって、画面が変わって行くんですよお。(たぶん)
どうするか、考えてます〜。
また、あした!
次のページ
「footer」部分です。
<div id="footer">
<p> Copyright (C) 2004 biobio...</p>
</div> <!--/footer-->
お師匠さんの「お手本」を見て、かっこいいと思ったので
footer内にあった
「Powered By <a href="http://blog.fc2.com/">FC2blog」
を、左サイドの下にちょっと、省略して移し、
ここには「Copyright (C) 2004 biobio...」を入れました。
いろんな話によると、これは入れといた方がいいと。。
だって、びおびおの苦労作ですもんね。
左サイドの下に
<ul> Powered By <a href="http://blog.fc2.com/">
FC2blog</a></ul>
<li>でくくると、左端に寄って・がつく
<ul>でくくると、サイド内のセンターにきてるような気がする。
あとで位置をCSSで指定するから、どうでもいいことなのかも。
以上「材料並べ終わり」(やた!)
暗号のようにしかみえなかったHTMLを
すこしでも理解したいと思って、こんな妙なblogを
つくってしまい、途中、ちょと後悔もしました。
ひっそりやっているつもりですが(なんにもなくて恥ずかしいし)
お師匠さんやご同志の方にみっけられ、ご指導をいただき、
最近は、FC2の「ジャンル別コミュニティ 」からも
お客様がいらっしゃって、これはがんばらなければ。。と
新年に向けて、気持ちも新たに思ってます。
今年はお世話になりました!
来年も、餌をつつくにわとりのように
「こつこつ」やっていきます。
さて、たぶん、これからが最難関の「CSS」。
でも、なんだか、うきうきするな。
だって、画面が変わって行くんですよお。(たぶん)
どうするか、考えてます〜。
また、あした!



びおびお(02/21)
せんちゃん(02/20)
高橋孤舟(02/19)
びおびお(11/28)
みんなのプロフィール
(09/04)