[B]RLMの作り方・その2-2
この記事は「[B]RLMの作り方・その2-1」という記事の続きです。
XHTMLソースについては先の記事に書いてありますので、そちらを参考に。
CSSソース部分の巻
#sitelogo{
width:459px;
height:313px;
background: url(xxx.jpg) no-repeat;
}
#sitelogo a{
width:330px;
height:63px;
position:absolute;
top:213px;
left:101px;
text-decoration:none;
}
#sitelogo a img{
position:absolute;
top:0px;
left:0px;
}
「#sitelogo」で何をしているかの巻
まず一番上の部分『#sitelogo』で指定している内容がh1タグ全体への指定です。ここでは幅・高さ・背景画像を指定しました。no-repeatってのは別にここでは要らないんですが、癖で書いてしまいました。幅と高さを指定してて中身が拡張しない状態ならno-repeatはなくて大丈夫です。
ここで指定している背景画像は左の画像です。この状態ではまだサイトのロゴっていうか「RedlineMagazine」と書いてある部分は入ってません。
「#sitelogo a」で何をしているかの巻
次に『#sitelogo a』の部分。ここでは「h1 id="sitelogo"」に含まれているaタグに対しての指定をしています。つまり<h1 id="sitelogo"><a href・・・>略</a></h1>のaタグに対しての指定です。
aタグに、この画像の幅・高さを指定しています。
まず幅と高さを指定。ここでは「RedlineMagazine」っていうテキストが入ってる部分の画像(左画像)に合わせて大きさを決めました。
次にposition:absolute;でaタグが部分をどこに配置するのかを指定しています。ここでは赤い横線部分に置きたいのでそこにaタグが来るような位置を指定しました。(top:213px;left:101px;ってやつです。)
ここでのposition:absolute;ですが、何を基準に位置を指定しているのかというと、ページの左上を基準にしています。というか、任意の基準点を自分で指定しない限り、左上が基準になります。
以前「CSSビギナー向け 陥りがちな罠Vol.01」という記事でも触れましたが、中央寄せの場合はposition:absolute;に対してはposition:relative;で基準となる点を指定しておかないとうまく位置を合わせることができない場合があります。が、このサイトは左寄せレイアウトなので・・・楽です。
で、少し前の部分に戻りますが、なぜaタグをテキストの入った画像のサイズ合わせたかというと、aタグ内に入っている普通のテキストに画像をかぶせて隠したかったからなんです。もっと分かりやするために「Redline...」って書いてある画像を一旦消してみます。
すると、こんな風に画像の背面にほんとはテキストが入っています。テキストサイズが小さいのはこちらの記事「bodyにfont-size:62.5%を指定すると・・・」に書いた内容を実験してみたのでbodyに指定したサイズを継承しているだけの話です。h1にフォントサイズをちゃんと指定していればそれはそれで変わります。
見て欲しいのはちゃんとaタグに指定した幅のはみ出た部分が改行している部分。ここは上に書いたとおり、aタグ全体の幅と高さは「Redline...」と書いてあるテキストの入った画像の幅高さに合わせておきました。従ってその幅より長くなる部分は改行され、上にかぶせた画像の下にちゃんと隠れてくれるという仕組です。
「#sitelogo a img」で何をしているかの巻
最後にそのテキストの入った画像をかぶせる部分のcss。それが『#sitelogo a img』という部分です。ここはid「sitelogo」の中のaタグの中のimgに対してという指定、つまり<h1 id="sitelogo"><a href・・・><img src・・・略・・・/></a></h1>このimg部分に対してです。
やってる内容はposition:absolute;でaタグで指定したボックスの左上の位置にimgで入れた画像を合わせているだけです。ここでの位置あわせの基準ですが、先に出てきた『#sitelogo a』にもposition:absolute;を指定していました。従ってこの『#sitelogo a img』に指定したabsoluteの基準となる点は『#sitelogo a』で幅や高さを指定したそのボックスの左上になります。
ということで、『#sitelogo a img』に対してはtop:0px;left:0px;を指定して、ぴったりかぶさるように指定しました。これで左上部分の作業はおしまいです。
ちょっとだけ補足。
もしかしたら基準点の話は言葉足らずで、なんでここが基準になるのーと思われるかもしれないですが、ここのケースの場合img君の立場に立って考えるとして自分が包まれてるタグに対して値がstatic以外のpositionが指定されてたらそいつが基準になると考えてください。
ここは<h1 id="sitelogo"><a href・・・><img src・・・略・・・/></a></h1>こういう入れ子になってます。img君を包んでるタグはaタグ、その外側にh1。こういう風に自分が包まれてるタグにcss側でstatic以外のpositionが指定されてたら、そこが基準となります。上にも書いたとおり、この部分のaタグに対してはposition:absolute;が指定してあります。従って上の図のようにimgの基準点はaタグのボックスの左上になるというわけです。
追記・・・
あ。忘れてました。その2-1で書いた画像置換の問題の話の続きなんですが、以前書いた「画像置換問題その後。」という記事にそれでどうなったんやという話を書いてますのでそちらを参考に。。
さらに言うと今回はh1の中にテキストと画像両方入れてみましたが、別に画像(imgタグ)だけでもいいです。このサイトは実験的にいろいろやってるのでややこしい事してますが、h1の中にロゴ画像をimgで入れてるっていうサイト多いです。
<< [B]RLMの作り方・その2-1 | [B]RLMの作り方・その3-1 >>
トラックバック
このエントリーのトラックバックURL:
http://redline.hippy.jp/cgi/mt/mt-tb.cgi/140