aタグの中にaタグを入れて思いもよらないレイアウトになった時の回避方法を考えてみた

# WEB制作

2020.03.28

みなさま、こんにちは。

先日案件の中でがっつり組み終えた後に、レイアウトが崩れていることを確認しました。

特別難しいことをしていたわけではありません。

不思議に思いながらデベロッパーツールで調べてみると、ソースが崩れて吐き出されていることがわかりました。

aタグの中にaタグは入れられません

正直、今までこのような組み方をしたことがなかったので、全く気が付きませんでした……。

実現したかったこと

まずやりたかったことを一言で説明すると、リンクエリアの中にモーダルリンクを入れようとしていました。

その際のソースを再現してみたものがこちら。
Colorboxを使用してモーダルウィンドウを実現していました。

次にブラウザで吐き出されたソースがこちら。

よく見ると吐き出されたソースでは、

<a> が何も囲わずに閉じてる。

これではレイアウトが崩れてしまっても仕方ありません。

対処方法は?

対処方法としては2つ。

ひとつは対象の <a><span> に変更し、Javascriptでリンク先に飛ばす方法。

Javascriptの記述自体はシンプルで特に導入コストもかからないのですが、なんとなく気持ち悪いので使っていません。

もうひとつは <object> を使用する方法。

こちらの方がおすすめですので、こちらを解説していきます。

objectタグを使用しaタグ同士の入れ子を防ぐ方法は?

まずは先ほどのソースに <object> を加えたソースどうぞ。

で、ブラウザで認識されるソースがこちら。

<a> が何事もなく、吐き出されていることが確認できました。

ただ、こちらは文法エラーになりますので、自己責任でご使用ください。

ちなみに私は使用しませんでした。

レイアウトで対処しました

文法エラーが出るのであればやめたほうがいいと思い、レイアウトで調整することにしました。

作成したソースはこちら。

<a> でボックスを囲うことを諦め、テキスト箇所だけを囲うことにしました。

で、テキストリンクをhoverした時にボックス全体にhover時のアニメをつけることにしました。

子要素にイベントがあった時に親要素を反応させたい

まずは参考に、動作確認をしてみてください。

See the Pen
RwPExWy
by sank (@sank_f)
on CodePen.

子要素にhoverした時に、親要素が反応しているのが確認できましたでしょうか。

そのために必要なソースがこちら。

親要素に pointer-events: none; を与え、hover時動作を書き、子要素に pointer-events: auto; を付与する。

たったこれだけで子要素にイベントがあった時に親要素を反応させることができます。

もし上記のようなシチュエーションが起きた時、試してみてください。

webサイトの制作、お任せください。

あくまでも基本料金になりますので、まずはご連絡ください。

コーディング

トップページ
(ヘッダー・フッター含む)

¥8,000~

コンテンツページ(1P)
(ヘッダー・フッター含まない)

¥4,000~

ランディングページ

¥15,000~

※アニメーションはオプション料金

デザイン

トップページ
(ヘッダー・フッター含む)

¥20,000~

コンテンツページ(1P)
(ヘッダー・フッター含まない)

¥5,000~

ランディングページ

¥20,000~

※コーディングとのセット料金

サイト構築

10ページ
(お問合せページを含まない)

¥100,000~

20ページ
(お問合せページを含まない)

¥175,000~

Wordpress導入

(上記)+¥50,000~

※お問合せページは¥10,000~