人気ブログランキング | 話題のタグを見る

ブログ活用のヒントを満載
by vlsasaki2
S M T W T F S
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31

id属性の意味
ヘッダー上部に表示している画像(愛犬タク)の配置はしゃんくさんの記事を参考に行いましたが、ほとんど理屈が分からず見よう見まねって感じでした。
ミツケン先生にclassやidのことを教えてもらっているうちに少し分かるようになってきましたのでこれまでの途中経過を報告します。

●実際の配置
id属性の意味_a0034054_14364294.jpg
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タグの指定により、
id属性の意味_a0034054_14551821.jpg

のようになる。

これが画像本来の位置であるから、ここから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;
}


by vlsasaki2 | 2004-09-20 14:41 | HTMLとCSS編集 Top↑
<< marginとpadding CSS勉強会 >>