Ads by Google
その4〜左サイドバーを整頓〜
おはようございます。
昨年とはうってかわって「朝起き+弁当作る+勉強」が
できています。
なかなかいいスタートの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〜>>
昨年とはうってかわって「朝起き+弁当作る+勉強」が
できています。
なかなかいいスタートの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以上入れると
右に幅がのびて、センターにかかってしまいます。
なんでだろう。。
今日は、やってるうちにいろいろ[?]が出てきたので
いろいろ、調べたりします。
次回の〜右サイドの整頓〜はちょっと先になるかな。。
亀の歩みは、力強く!(なんですか。それ)
では。よい一日を!ね。びおびおくん。
Thanks Comment !
relative と abusolute
relative は直前の囲みタグに対して相対的に、 absolute (上、スペル間違っています)は直前の relative からの絶対位置に表示…と文章にするとカンタンですが、結構厄介。
ムズかしいと思うので、結論から。左右のサイドバーが離れてしまっているのは、sidebar が center の外側に書かれているから。つまり、banner -> center -> sidebar という順に書かれており、かつ、sidebar のひとつ外側はなに?となったときに、body がその外側にあるから、ということに。
図にすると
body
+- banner
|
+- center
| +- contents
|
+- sidebar
となっているのを
body
+- banner
|
+- center
| +- contents
| |
| +- sidebar
|
+- ...
とすれば直ります。
つまり、sidebar の外側にあるくくりが body なので、「relative がない場合等は、ページの原点を基準とする」 というルールに従って、左上から表示している、ということになります。故に、sidebar に absolute や relative をつけても、位置が変わらない…という現象がおきます。
center に relative をつけて、その内側に sidebar を入れるとどうなるでしょう?
sidebar のすぐ外側が center になるので、center の左上を基準として、絶対位置で表示、ということになります。
#left {
position:absolute;
top:110px;
left:5px; ←左端余白分
...
}
と直せば左サイドバーは直ります。右側は次のようにします。
#right {
position: absolute;
top:110px;
right:5px; ←これが大事
...
}
right は、右側の余白になります。
これで center をいくらいじっても、その左右にサイドバーが張り付いた状態になるはずです。
relative は直前の囲みタグに対して相対的に、 absolute (上、スペル間違っています)は直前の relative からの絶対位置に表示…と文章にするとカンタンですが、結構厄介。
ムズかしいと思うので、結論から。左右のサイドバーが離れてしまっているのは、sidebar が center の外側に書かれているから。つまり、banner -> center -> sidebar という順に書かれており、かつ、sidebar のひとつ外側はなに?となったときに、body がその外側にあるから、ということに。
図にすると
body
+- banner
|
+- center
| +- contents
|
+- sidebar
となっているのを
body
+- banner
|
+- center
| +- contents
| |
| +- sidebar
|
+- ...
とすれば直ります。
つまり、sidebar の外側にあるくくりが body なので、「relative がない場合等は、ページの原点を基準とする」 というルールに従って、左上から表示している、ということになります。故に、sidebar に absolute や relative をつけても、位置が変わらない…という現象がおきます。
center に relative をつけて、その内側に sidebar を入れるとどうなるでしょう?
sidebar のすぐ外側が center になるので、center の左上を基準として、絶対位置で表示、ということになります。
#left {
position:absolute;
top:110px;
left:5px; ←左端余白分
...
}
と直せば左サイドバーは直ります。右側は次のようにします。
#right {
position: absolute;
top:110px;
right:5px; ←これが大事
...
}
right は、右側の余白になります。
これで center をいくらいじっても、その左右にサイドバーが張り付いた状態になるはずです。
- 2005/01/13(Thu) 17:45:36 |
- URL |
- V.J.Catkick #qbIq4rIg
- [ちょと手直し]
うう。スペルも間違えてましたです。
たぶん、これ以上ないというくらい
やさしく説いてくださってるお師匠さんのご説明が、
びおのにぶい頭に、入ってこない〜。
じっくり、取り組ませていただきます。
ので、お時間ください。。
むっ。むづかしい。。
たぶん、これ以上ないというくらい
やさしく説いてくださってるお師匠さんのご説明が、
びおのにぶい頭に、入ってこない〜。
じっくり、取り組ませていただきます。
ので、お時間ください。。
むっ。むづかしい。。
- 2005/01/13(Thu) 22:16:49 |
- URL |
- びおびお #-
- [ちょと手直し]



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