HTML/CSSのしごとをしていると、表題の通りの実装をクライアントからお願いされることがたまにあるかと思います。とりあえず、HTMLでハイパーリンクのなかにはハイパーリンクを定義してみますが、外側のリンクが優先されるのでうまくいきません…ああ、困ったな。となったことが１度はあるのでは？この問題、多くの方はどのように解決しているのでしょうか？
少し話が代わりますが、バナー広告（イメージ）の上にリンクボタンを置いて欲しいと言われたことがあります。この場合はimgタグの中に文字を内包したHTMLを書くことができないので別に定義した文字なりボタンを画像にかぶさるように配置して画像の上にリンクを置くことで解決することができます。ただ、レスポンシブデザインなども考慮すると、この方法は全体の調和をとることが難しい気がします。画像の特定領域のみリンクにするというような指定などもできるかもしれませんが…。flexboxなどなくfloatを使ってデザインを作っていた時はフロートが自然でしたが…。
いまのところ自分の最善の改善策は「js」を使うことになります。
クリックされた要素を見てリンクの飛び先を見てリンクを決めるという数法です。
clickイベント→判定（要素AならリンクA、要素BならリンクB）という具合。
これだとデザインが崩れないので実装がしやすいです。
ただ、バナー広告の上にリンクを配置するオーダーには使えない手法です。
以上。
コメント