-
ID:dosrfF さんの質問

position、z-indexなどを使って、全面背景画像の上に 文字や フロートの為の透明ボックスなど配置している状況で、
全面背景部分のリンクを設置したと思っております。

そのままだと、重なり部分がリンクできなくなってしまいます。
(フロートの為の透明ボックスエリアが)

フロートの為の透明のボックスなので、透明部分は、背景画像のリンクをクリックさせたいのですが、そんな時って一般的にどうするべきでしょうか?

みんなの回答 6 件

ID:dosrfF さんの回答

ちなみに、一般的にインライン要素のaタグにブロック要素を入れるのはNGだと思うのですが、cssでブロック要素に変更すれば、OKという扱いになるのでしょうか?

ID:cKnUxI

aタグにブロック要素を入れるのはhtml5ではOKです。

ID:dosrfF

今回はxhtmlなのですが、cssでブロック要素にしても、NGって事ですよね?

ID:yadevq

CSSでブロック要素にするのはNGではありません。

ID:dosrfF

補足しますと、xhtmlで、aタグをcssでブロック要素にしてから、そのaタグの中にブロック要素を入れるという意味ですが、aタグにブロック要素を入れるという意味で、問題ないのでしょうか?

ID:yadevq

aタグにブロック要素を入れるのはNG。
aタグにインライン要素を入れてCSSでブロック要素にするのはOK。

ID:dosrfF

やっぱそうですよね。ありがとうございます。。

ID:U9mD4k さんの回答

こういう方法は?
ttp://www.kikins.jp/notebook/codesnippets/snippets/script-04.html

ID:dosrfF

なるほど、jsで背面のaを取得するってことですかね?
しかし今回の場合、書き忘れてましたが、背景画像は、いくつか切り替わっていく仕組みになっているのです。。。

でも頑張ればできそうですね。。

ID:dosrfF さんの回答

あと文書構造的にNGなものを作ると、なにか不都合ってあるんでしょうか?Googleでペナルティがあるとか?

ID:28125V さんの回答

a要素のbeforeやafterで範囲を作ればいいと思うよ

ID:28125V

ちなみに、cssでa要素をblock扱いにするのは何も問題ないですよ。

ID:dosrfF

すいませんbeforeやafterをあまり使わなくて。。。
beforeやafterの使い方はわかるのですが、どういう風に応用するのでしょうか?

ID:28125V

質問を完全に理解していないのであれなんだけど、↑に挙がったjsで解決するような目的であれば、a要素のafter/beforeでできると思うよ。after/beforeに設定した箇所は、a要素のマウスイベントをそのまま拾うってこと。

ID:ST.sRc さんの回答

その「フロートのための透明ボックス」にも背景と同じリンクを貼ればいい。

ID:dosrfF

なるほど!確かにw
その場合、上にも書きましたが、
xhtmlにおいて、aタグをcssでブロック要素にしてから、そのaタグの中にブロック要素を入れるのは、htmlのルール的に問題ないのでしょうか?

ID:ST.sRc

問題ない。HTMLの文法チェッカはあくまでタグのチェックのみで、スタイルは無視する。

ID:dosrfF

これが問題ないって事ですよね?

<a href="">
<div>〜</div>
</a>

css
a{display:block;}

ID:ST.sRc

あー悪い、HTML5より前のバージョンではNG。

ID:dosrfF

そうですよね〜。ありがとうございますTT

ID:PUg5Ra さんの回答

aの中にブロック要素を入れるのが悩ましいなら

<a href=""><span></span></a>
span {
display: block;
}

ではだめ?

ID:dosrfF

いえ、ダメではないです。
一度納品したデータにaタグを追加という依頼でして、できればそのまま構造を活かしたいなと思っただけです。
レスポンシブなので、面倒でしてTT

ありがとうございます。

最終更新日:2015-12-07 (3,079 views)

関連するトピックス

ページ上部に戻る