要素(div)の重なり｡〜ﾘﾝｸ＜A＞ﾀｸﾞの有効範囲?〜[PC関係]
(2009-06-10 21:21:04) by くろひつじ

ﾍﾞﾈﾌｨｯﾄﾎｰﾑﾍﾟｰｼﾞのｿｰｽを表示してみてもらうとわかると思うけれど､だいたい50行目くらいかな〜?
同じﾘﾝｸの同じ画像が2つあります｡

このﾊﾞﾅｰの画像はheader要素のﾊﾞｯｸｸﾞﾗｳﾝﾄﾞとして表示されているのですが､この画像の一部､つまり｢BENEFIT｣の部分だけにindexﾍﾟｰｼﾞへのﾘﾝｸを入れる場合､僕がする方法は(まぁ古いか新しいか､はたまた良いのか悪いのか知りませんが)透過率100％の透明のgif画像を絶対配置などでﾘﾝｸしたい場所に置き､その画像にﾘﾝｸを貼るというもの｡

いつもならわざわざ二枚画像を設置する事など必要ないのですが､今回はこうしなければこの方法を使ってﾘﾝｸをさせる事ができなさそうだったからなんですね｡
というのは背景の｢BENEFIT｣の文字がheader要素(div id="header")とheader-inner要素(div id="header-inner")の二つの要素の範囲にまたがっていたからなんです｡

最初はheaderだけに画像とﾘﾝｸを設置してやってみたのですが(位置を合わせるために最初は完全に透明ではなく白い画像で位置を確かめながら設置した)画像は間違いなく表示されているけど､ﾘﾝｸがなぜか｢B｣の部分にしか効かない｡
なんだこりゃ?と思い､ためしに今度はheader-innerだけに画像とﾘﾝｸを設置｡
やはり同じように画像はちゃんと表示されているけど､今度は｢ENEFIT｣の部分にしかﾘﾝｸが効かない｡
これはとても単純で簡単なことなんですが､一人でやっていてはまるとなかなか単純なことでも気がつかなかったりして無駄に時間を使ってしまったりするんですが｡
そうするに例えるならば､大きな透明な入れ物とそれより小さな透明な入れ物があるとします｡
まぁ料理用のｶﾞﾗｽのﾎﾞｳﾙとかを想像していただければいいかな?
大きい入れ物を｢header要素｣小さい入れ物を｢header-inner要素｣としてﾊﾞﾅｰ画像はheader要素のﾊﾞｯｸｸﾞﾗｳﾝﾄﾞとして設定してあるので､たとえとしては大きい入れ物の外側にﾌﾟﾘﾝﾄされた柄を内側から見ているような感じですかね?
で､その柄の一部にﾘﾝｸを貼る画像を設置しますね｡
たとえるならばまぁ何かしら食材なんかをﾎﾞｳﾙに入れる感じ?
最初に僕がしたのは大きい入れ物に食材をいれて､その上に小さい入れ物を重ねた状態｡
入れ物はどっちも透明なので､大きい入れ物の柄の上に食材があるのがそのまま見えます｡
だけど､もし箸でその食材を取ろうとしても大きい入れ物と小さい入れ物の隙間からしか食材に触ることができません｡
この箸で触るという事がﾘﾝｸ＜a＞ということと考えてみてください｡
次に僕がしたのは大きい入れ物には何もいれず小さい入れ物を重ねて､その小さい入れ物に食材を入れた状態｡
小さい入れ物の中では箸は触れられますが､大きい入れ物(入れ物と入れ物の隙間)からは食材に触れる事ができません｡
見た目では同じように食材が入っていても､箸で触れるようにするには二つの入れ物にそれぞれ食材
､つまりﾘﾝｸ付き画像を設置しなければならないという｡

非常に当たり前のことなんですが､ﾘﾝｸﾀｸﾞ(<a>)などはそれを記述した同じ要素(div)内にしか効かないということです｡
それに対して見た目というのは透けたりするのでﾘﾝｸの範囲と同じとは限らないという事ですね｡
というわけで今回は2枚画像をいれて(それぞれ同じように重なっているので見た目は一枚ですが)それぞれでﾘﾝｸをさせるという処理をしたというわけ｡

<画像：ﾍｯﾀﾞｰの画像ﾘﾝｸについて>

下は実際の状態､透明のgif画像は見た目は一枚ですが2枚あります｡

<画像：divの重なりについて>

まぁこんなﾒﾝﾄﾞｸｻｲ事をしなくても､普通ならheaderのﾊﾞｯｸｸﾞﾗｳﾝﾄﾞには｢BENEFIT｣のﾛｺﾞを除いた柄だけを指定して､header-innerに｢BENEFIT｣ﾛｺﾞの画像を入れ､その画像にindexﾍﾟｰｼﾞへのﾘﾝｸをすればいいと思います｡(その場合｢BENEFIT｣の位置がもっと右､上の画像での緑の線から右に表示されることになります)
ｺﾒﾝﾄ投稿
次の記事へ >
< 前の記事へ
TOPへ戻る

Powered by
MT4i 3.0.8