Q&A
> 下図のように<a>タグを入れ子にしたいです。
<a> は入れ子に出来ません。
https://pg.kdtk.net/2028 を読むと、「<a>を入れ子にせずに、入れ子にしたかのような挙動を実現する方法」と読み取れますが、タイトルと質問文がその意にそぐわないものになっています。
誰が見ても誤解のないタイトルと質問文に修正をお願いします。
###実現したいこと
下図のように<a>タグを入れ子にしたいです。
下図のように<a>タグを入れ子にせずに、入れ子にしたかのような機能にしたいです。
###3つの方法
aタグの中でaタグを利用する方法というブログ記事に次の3つの方法があります。
1 objectタグを利用する方法
2 cssのpositionを利用する方法
3 javascript(onclick)を利用する方法
しかしいずれもSEO的に不利とのこと。
そんな中でどれがマシだと思いますか？
###自分の考え
SEOに詳しくない自分の考えでは、次のようなデメリットのない1がマシと思いました
しかし見落としや別の意見を伺いたいです。（1はSEO的に圧倒的に不利だ、など。）
ご助言宜しくお願い致します。
1 objectタグを利用する方法
→マークアップ的に微妙だが、下記1や2の実用デメリットが見当たらない点でマシ
2 cssのpositionを利用する方法
→CSSで無理やり変えているためHTMLを見たときに階層がわかりにくいデメリット
3 javascript(onclick)を利用する方法
→右クリック時に「新しいタブで開く」などメニューがカーソルのものとズレてしまう点が使いにくいデメリット
→ホイールクリックやユーザー定義の操作は<a>タグで囲まれていないと起動できないデメリット（※追記）
###補足
すべての<a>タグはpjaxでの遷移を予定しています。
『出来ません』というのが『マークアップ的な意味でおかしい』という解釈をなさっているのであれば同意です。
しかし文字通り『可能か不可能か』ということであれば質問の1の方法で可能です。
さて、より適当なタイトルがあれば受け入れる姿勢ですが、具体的にいかがでしょうか。以下の変更はどうですか？
<a>タグの入れ子を実装するとき、何がいい方法なのか？
↓
リンクの入れ子を実装するとき、何がいい方法なのか？
> しかし文字通り『可能か不可能か』ということであれば質問の1の方法で可能です。
それは「HTMLの文法違反を許容する」という事でしょうか。
https://validator.w3.org/ で下記HTMLをcheckするとErrorになります。
<!DOCTYPE html>
<title>sample</title>
<a href="https://yahoo.co.jp/"><div>yahoo（要素全体）<br /><object><a href="https://google.com/">google</a></object></div></a>
あるいは、採用するHTMLのバージョンが異なると、エラーにならないのでしょうか。
採用するDOCTYPE宣言も明らかにしたほうが良いと思います。
> リンクの入れ子を実装するとき、何がいい方法なのか？
「リンク」抽象的な概念なので理解するには本文を確認する必要があります。
そのタイトルにする場合は、質問文内で条件を正確に定義すべきと思います。
例えば、
1. リンクとは「リンク範囲をクリックするとリンク先に遷移する機能」を差す(<a>と同様の機能)
2. リンクを入れ子にする
3. 深部のリンクは浅部のリンクよりも優先される
「リンクの入れ子」はHTMLにない概念ですので、プログラミングで実装するなら、要件定義はしっかりしておきたいところです。
WCAGを読んで改めて思いましたが、質問文の
<a href="https://pg.kdtk.net/2028" rel="nofollow" target="_blank">こちらのリンク</a>
も好ましいマークアップではないと思います。
リンクテキストを修正することをお勧めします。
https://waic.jp/docs/WCAG-TECHS/F84
許容性を意味して『出来ません』だったのですね。意図を掬い取れずすみません。
タイトルとリンクテキストの訂正を致しました。ありがとうございます。
> 許容性を意味して『出来ません』だったのですね。意図を掬い取れずすみません。
良し悪しの基準が「kurazushiさんの頭の中にしかない」ことを問題視しています。
SEOを気にされていたので、HTMLの文法に準拠する事は大前提だと思いましたが、
---
https://support.google.com/webmasters/answer/35769?hl=ja&ref_topic=9456575
「訪問者がページを利用しやすいよう手助けする」より
→すべてのリンクが実際のウェブページにアクセスできることを確認します。有効な HTML を使用します。
→https://validator.w3.org/
---
文法違反を許容する旨の発言をされていたので、戸惑っています。
目的にマッチした回答が得られるよう、ご自身で方針を明確にする必要があると思います。
ちなみに、回答でアクセシビリティに触れたのも、Googleが「アクセシビリティを考慮する」ことを推奨しているからです。
https://support.google.com/webmasters/answer/100782
> タイトルとリンクテキストの訂正を致しました。ありがとうございます。
タイトルは修正されましたが、本文に「下図のように<a>タグを入れ子にしたいです。」があり、タイトルと本文が矛盾しています。
> 良し悪しの基準が「kurazushiさんの頭の中にしかない」こと
ですか…
すみませんなんのことかまたもや意図を掬い取れませんでした。
以下にその主観を2通り挙げましたのであっているといいのですが。
まず良し悪しの基準は常に制作者やチームの主観ですが今回判断材料に乏しく、そこに客観を取り入れるべく質問をしています。もしこの主観を問題視されているのであれば、「主観を問題視している本人に、主観が問題だ」と改めて突き付けるようなものですから、問題視の対象はこの主観では…ないですよね？
戸惑ったという根拠に鑑みますとおそらく問題視の対象である主観とは「HTMLの文法に準拠する事は大前提としながらも、文法違反を許容する」を突いて矛盾だと仰っているのでしょうか。でしたら「SEOを気にされていた」から「HTMLの文法に準拠する事は大前提」を導出してしまったミスリードです。それが大前提になるためにはSEOが最優先だという基準が論理的に必須ですが、そのような基準はございません。
現状はSEO（1）も気にしているし、HTML構造（2）も気にしていますし、操作性（3）も気にしているという状態で、基準がないために質問に至ったわけでございます。
伝わるといいのですが…
難しいところがあったり、「kurazushiさんの頭の中にしかない」という主観が上記二通りのいずれもでなければまたどうぞご指摘くださいませ。
最後に、タイトルと本文が矛盾のご指摘をありがとうございます。修正しておきました。
私が気になったのは、
> 許容性を意味して『出来ません』だったのですね。意図を掬い取れずすみません。
で、「HTML文法違反を許容しているのか、許容してないのか」がはっきりしないと感じました。
質問時点で分からない事が多くて基準が曖昧なのは仕方がありませんが、情報が寄せられた後も「決めない」というのは、回答者目線では方向性がつかめなくて困ります。
> 現状はSEO（1）も気にしているし、HTML構造（2）も気にしていますし、操作性（3）も気にしているという状態で、基準がないために質問に至ったわけでございます。
これだけ読むと「HTML文法違反は許容できない」と読めますが、「1 objectタグを利用する方法
」を撤回するわけでもないようですし、何をどうしたいのか、が私には理解できていません。
>情報が寄せられた後も「決めない」というのは、回答者目線では方向性がつかめなくて困ります。
回答者が完璧な情報をお持ちだとは思っていませんので、判断材料を多く集めたいと思う点はご容赦頂けるかと思います。その集めようという心理を「方向性がつかめなくて困る」と責めるのであれば、次の例でその理不尽さがご理解いただけるでしょう。すなわち、道を知るべく道標を尋ねる者にまず方向性を「決めろ」と仰るのでしょうか。
>これだけ読むと「HTML文法違反は許容できない」と読めますが
それもまたミスリードです。それだけではもちろん、質問の内容に鑑みてもそうは帰結いたしません。どのような論理を辿って導出されましたか。その帰結に至るための隠れた前提がthin49様の中にあるはずです。
>何をどうしたいのか、が私には理解できていません
質問にありますように、見落としや別の意見を伺いたい。に尽きます。ご回答くださったmaisumakun様、hatena19様は、そういったご意見を下さっていますし、think49様もそうなのではないでしょうか。まだhatena19様のご回答から派生した問題に取り組んでいるためにthink49様のご回答はきちんと読めていませんが（すみません）、ご回答はとても勉強になる内容ばかりでした。
回答3件
0
ベストアンサー
リンク先の2より引用
この方法でもaタグの対象が本来の対象と違い要素が存在しないaタグとなっている為SEO的に不利になる可能性があります。
リンク先の2の方法でSEO的に不利というのは、aタグに要素がない空の要素になる点ですよね。
また、リンクの入れ子という概念もHTMLにはないものです。
つまり、
作品へのリンク
著者へのリンク
タグへのリンク
は並列に並べるべきだと思います。
そのうえで、CSSで作品へのリンクを下記の方法を利用して拡張すればいいかと思います。
[CSS]クリック可能な範囲を広げるスタイルシートのテクニック、a要素はボタンだけでもカード全体をクリック可能に | コリス
html
1<div class="card"> 2 <img src="https://placehold.jp/250x200.png"> 3 <div class="card-body"> 4 5 <h3 class="card-title"> 6 <a href="#title" class="stretched-link">画像タイトル</a> 7 </h3> 8 <p class="card-author"> 9 <a href="#author">著者名：ふかみ</a> 10 </p> 11 <p class="card-tag"> 12 <a href="#tag">タグ ：夜景・ビル・綺麗</a> 13 </p> 14 </div> 15</div>
css
1.card { 2 position: relative; 3 width: 250px; 4} 5.stretched-link::after { 6 position: absolute; 7 top: 0; 8 right: 0; 9 bottom: 0; 10 left: 0; 11 z-index: 1; 12 content: ""; 13 background-color: transparent; 14} 15.card-author > a, .card-tag > a { 16 position: relative; 17 z-index: 2; 18}
スマホ（タッチデバイス）向けには、著者へのリンク、タグへのリンクの境界線が分かるようなデザインにすべきです。その辺を考慮してデザインする必要はありますね。
投稿2020/10/11 03:17
編集2020/10/11 03:33
総合スコア33715
横槍すみません。
このテク、知ってか知らずか、自ずと使ってました・・・。
かなり有用なテクだと思います。
どうもありがとうございます。absoluteを使うとは膝を打ちました。こちらの方法は123のデメリットをクリアできあれこれ思い悩む必要がなさそうです。
改めて色々と試しておりましたが、やはりhatena19様の方向性ですべて解決いたしましたので、やりとりが途中の方には恐れ入りますがこれにてベストアンサーとさせていただきます。有用なテクをどうもありがとうごいます。
miyabi_takatsuk様もコメントありがとうございます。
0
要件
下図のように<a>タグを入れ子にしたいです。
少なくとも、HTML Standard(通称HTML5)において、<a> は入れ子に出来ません。
ですので、要件を「<a>を入れ子にせずに、入れ子にしたかのような挙動を実現する方法」に読み替えて、回答します。
※HTML上の制約(<a>は入れ子に出来ない)を回避して、実現方法を模索する人をたまにみかけますが、多くの場合は間違った手段だと思います。理由を後述します。
アクセシビリティ (WCAG)
この達成基準の意図は、利用者がリンクを辿りたいかどうか決めることができるように、各リンクの目的を理解することを助けることである。可能な限りいつでも、追加のコンテキストを必要とせずに、リンクの目的を特定するリンクテキストを提供すること。支援技術は、ウェブページにあるリンクの一覧を利用者に提供することができる。可能な限り意味を持たせたリンクテキストは、このリンクの一覧から選択したい利用者の助けとなる。意味のあるリンクテキストはまた、リンクからリンクへと Tab キーで移動したい利用者にとっても役に立つ。意味のあるリンクは、ページを理解するために複雑な戦略を必要とせずに利用者が辿るリンクを選択するのに役立つ。
この基準に則り、実装結果イメージを読みます。
- 著者名をクリック -> 著者ページへ遷移
- タグをクリック -> タグページへ遷移
これは問題ありません。リンクテキストとリンク先が一致しています。
- 画像のタイトルをクリック -> 作品ページへ遷移
- 画像をクリック -> 作品ページへ遷移
- 外側の罫線と各リンク先間の余白部分をクリック -> 作品ページへ遷移
「画像」をクリックして「作品」に遷移するのは手段と結果が一致していません。
下記のようになるべきでしょう。
- 作品のタイトルをクリック -> 作品ページへ遷移
- 作品画像をクリック -> 作品ページへ遷移
最後に、「余白部分をクリック -> 作品ページに遷移」ですが、これは「余白 = 作品」の明示が行われていないので、実装すべきではありません。
仮にこの問題をlegend要素あたりで解消したとしても、実装すべきではないと考えます。
最近、スマートフォンが普及してタッチ操作も一般化してきましたが、操作に不慣れな方はタッチする範囲に苦労しているようです。
ありがちなのは、
- 指先で押したつもりで、指の腹が接触した為、想定したより下がタップした状態になってしまう
というもので、本ケースに当てはめると、
- 「タグ」をタップしたつもりが「余白」をタップしてしまう
- 意図せぬ「作品ページ」に遷移してしまう
- 新規タブで開いたなら [閉じる]、同一タブで開いたなら [戻る]
-
- からやり直す
「1.」も問題ですが、「3.」も苦労すると思います。
Android端末なら、[戻る] ボタンで何とかなりますが、iPhoneに [戻る] ボタンはないので、両者を区別しないといけないのではないでしょうか(未所持なので想像です。間違ってたら、指摘下さい)。
こうした事態を防ぐためには、
- 別のリンク同士の間に余白を設ける
- リンクの境界が明らかになるようデザインを工夫する
が考えられますが、本質問の要件では余白がゼロなので、誤クリックを防げません。
Re: kurazushi さん
投稿2020/10/11 03:11
編集2020/10/11 03:35総合スコア18164
なるほど、余白部分をクリックしてそのクリック周辺のメインコンテンツに飛ぶという挙動はよく見かけますが、仰るような考え方ですと不合理と言えるかもしれませんね。
指の腹が接触という問題も知りませんでした。余白についてよく考えるきっかけになりました。ありがとうございます。
0
しかしいずれもSEO的に不利とのこと。
画像をクリックすれば作品ページにリンクする、というような、SEO対応用の<a>タグを別に設置すれば、後は好きにやっていいのではないかと思います。
投稿2020/10/11 01:07
総合スコア145184
ご回答ありがとうございます。<a>タグを別に設置ということは、1か2ということでしょうか。自分はその比較だと1がマシと質問に挙げましたが、それでも好きにやっていいという風に2のデメリットを許容するのはどうしてですか？
2のHTMがの見にくいというデメリットは「見にくくてもいいなら好きにやっていい」という投げやりな許容なのか、それともそのデメリットと同等程度のデメリットが1にもあるのか、恐れ入りますがご発言の真意を知りたいです。
> <a>タグを別に設置ということは、1か2ということでしょうか。
いえ、3を考えていました。
<a>タグを入れ子にして3を使うとHTMLの構造が壊れてしまうと思いますが、壊れないテクニックがあるのでしょうか？
ひょっとして『<a>タグを別に設置』と仰ったのは、『入れ子にする』ではなく『別のところに設置する』という意味ですか？であればそれは質問に挙げた3のデメリット（右クリックのズレ）を解消するようなテクニックなのでしょうか？
> <a>タグを入れ子にして3を使うとHTMLの構造が壊れてしまうと思いますが
入れ子にはしません。
なるほど、どうするのか教えて頂くことはできますか？それは質問に挙げた3のデメリット（右クリックのズレ）を解消するようなテクニックなのでしょうか？
「右クリック時に「新しいタブで開く」などメニューがカーソルのものとズレてしまう点が使いにくいデメリット」をデメリットだと考えていませんでした、すみません。
そういうことでしたか。見解の違いがわかってよかったです。自分はそのデメリットを負担に思うのですが、そう感じなければ3がいいですね。
引き続きいろいろな方のご意見をお聞かせいただきたく思いますので、宜しくお願い致します。
> 自分はそのデメリットを負担に思うのですが
素朴な疑問ですが、どのような状況で負担となるのでしょうか？一般の利用者がそのような動作をできることを期待させる必要もそうないかと思いますし、内側の人間であれば、「画像がリンクになっているのでそこを右クリックすればOK」ということを周知しておけばいい話だと思います。
（別タブで開くのをホイールクリックでやっていた場合、JavaScriptでそれを検知させて相当の処理を行う、ということは、実装したことがあります）
よく新しいタブで開くことはありますよね？
左手をキーボードに置いているときか、または表示中のページから大量に新しいタブを開くときは、【Ctrlを押しながら左クリック】で新しいタブを開きます。
しかし液晶で論文などを読みながら考え事をしているとき、かつ大量に新しいタブを開くわけではないときは、左手を顎の下に置いていてCtrlまで手を伸ばすのが億劫なので、右手だけでできる【右クリックメニュー】で新しいタブを開きます。
後者は珍しい状況なのかもしれませんね。
たしかにホイールクリックやユーザー定義の操作は<a>タグで囲まれていないと起動できないので、おっしゃる通りJavaScriptの検知では限界がありますよね。このデメリットは質問の3に（※追記）とさせて頂きます。
「ホイールクリックで別タブで開くJavaScriptが実装されているが、通常のホイールクリック時と異なり開いたタブに移動してしまう」サイトがあったのを思い出しました。(Twitter)
ブラウザの設定によっても変わりますし、ホイールクリックの動作を完全に再現するのは不可能ではないかなと思っています。URLが出ないのも不便ですし。
やはりその点のデメリットがあると3は厳しそうですよね。今回はhatena19様から<a>タグで入れ子にしているように見せる疑似要素テクを教えて頂きまして、そちらであればホイールクリックにも対処できそうに思います。お気遣いコメントありがとうございます。
あなたの回答
tips
プレビュー
