ヘッダー上部に表示している画像(愛犬タク)の配置は
しゃんくさんの記事を参考に行いましたが、ほとんど理屈が分からず見よう見まねって感じでした。
ミツケン先生にclassやidのことを教えてもらっているうちに少し分かるようになってきましたのでこれまでの途中経過を報告します。
●実際の配置
HTMLの本文・最上部
<DIV CLASS=POST>
<center><img src="http://www2u.biglobe.ne.jp/~t-sasaki/blog/pic/bg/02.jpg" style="position: relative;top: 0px;right: 116px"><$prepage type=1$> <$nextpage type=1$><img src="http://www2u.biglobe.ne.jp/~t-sasaki/blog/pic/bg/03.jpg" style="position:relative;top:0px;left:117px"></center>
●ソースの意味
<center> ← 中央揃え
<img src="http://www2u.biglobe.ne.jp/~t-sasaki/blog/pic/bg/02.jpg" ← 画像表示
style="position: relative;top: 0px;right: 116px"> ← 表示する位置の指定
●位置指定の意味
position: relative; ← 本来の位置からの相対位置指定
top: 0px; ← ブロックの上端
right: 116px; ← 右からの距離が116px。ということは現在の位置から左に116px移動した位置ということ。
style="position: relative;top: 0px;right: 116px"がなかったらcenterタグの指定により、
のようになる。
これが画像本来の位置であるから、ここから116px分左へ移動させることになる。(左の画像)
ところで、
style="position: relative;top: 0px;right: 116px"
はCSSのインライン表記であるからid属性を使いCSSの部分に記述することができる。
●タグとCSS
HTMLタグからCSSのインライン表記を外しid属性に置き換えると、
<center><img src="http://www2u.biglobe.ne.jp/~t-sasaki/blog/pic/bg/02.jpg" id=taku1><$prepage type=1$> <$nextpage type=1$><img src="http://www2u.biglobe.ne.jp/~t-sasaki/blog/pic/bg/03.jpg" id=taku2></center>
id属性に対応したCSS
#taku1{
position: relative;
top: 0px;
right: 116px;
}
#taku2{
position:relative;
top:0px;
left:117px;
}