ネットで検索しても解決しない事を見つけると、世紀の新発見をしたかのような気分になる、ユゲタです。
それだけ、すでにネット上には、何でも情報がアップロードされていて、ネットで見つからない情報というのは、
自分の調べ方が悪いのか、本当に誰も気がついていないネタなのだと改めて思いました。
でも、今回のタイトルにある「Aタグの中にAタグ」というのは、ネットで検索するとめちゃくちゃ情報が得られるので、この事を言っているのではないですけどね。
Aタグ内にAタグを書いてはいけません。
先日コーディングをしていて、摩訶不思議な状況に遭遇しました。
それは、とあるWEBシステムを作っていた時に、画面上部に横並びのメニューを設置して、その中の一つが、サブメニューが表示するプルダウン形式になっているという仕様だったのですが、
想像通り、タイトルからもわかると思いますが、メニューのAタグの中に、プルダウン表示させるULタグを書いていて、その中にさらに、Aタグが存在してリンク設置をしていたという、
非常になんとも、おサブい構造になっていた事に、ブラウザに表示するまできがついていませんでした。
なんとなく、Aタグの中にあるAタグは、仮想タグが優先されるので、「想像ではうまくいくかも・・・」と思ってしまいますが、
そもそもブラウザ側で禁止しているということが今回発覚しました。
まず、サンプルとして次のコードを用意してみました。
<!DOCTYPE html>
<head>
<meta charset="utf-8">
</head>
<body>
<a href="#a">aaa
<a href="#b">bbb</a>
</a>
</body>
</html>
Aタグ(aaa)の中にAタグ(bbb)という構造になっているのがわかりますか？
それをブラウザで表示して、デバッグコンソールのelement状態を見ると
Aタグが２つ同階層で横並びになっているのが確認できました。
この状態では、スタイルシートもタグの階層が変更されていて、
a a{
border:1px solid red;
}
a[href="#b"]{
border:1px solid blue;
}
こんなcssを適用すると、 上のスタイルは適用されません。
DOM構造で、aタグの外にはじき出されているようです。
これは、わかりやすくするために、A タグの直下にAタグを書いたんですが、深い階層のAタグを書いても同じように処理されてしまいます。
そして、チェックしたブラウザは、GoogleChromeでしたが、firefoxやsafariでも、同じ状態でレンダリングされていることも確認できました。
色々な不具合を招く事になってしまうので、Aタグ内にAタグは、気をつけたほうがよさそうですね。
当たり前だけど、よく考えたらわからないことこそが重要
ベテランプログラマーになってくると、何が良くて何が悪いかを理解していて、
それが頭の中で判断できますが、今回のように、どんな結果になるかは、実際に説明できない人の方が多いようです。
実際に、キーワード検索をして表示された記事を読んでも、重複したタグが横並びに表示される事を解説しているサイトは見つけられませんでした。
こうした実際にどうなるかを知りたいと思うのが、初心者の方が好奇心が強く、できれば、自分で調べて内容を確認すればいいんですが、
ベテランになると、「駄目なもんはそもそも駄目なので、調べる価値なし」というような思考になりがちだということも、
色々なプログラマと話をして理解することができました。
好奇心が、スキルを育てる
こうした、失敗の先の状態を具体的に知ることって、類似障害を防いだり、失敗しないためにどうすればいいかという思考につながるので、
改めて、こうした症状を知りたいと強く思うことこそが、その先の自分のクオリティアップに繋がるということを実感することができました。
ありがとう！オレの失敗！
