div全体をリンクにしたい

Question

div全体をリンクにする時、

<div>
	<a href="#" style="display: block; width: 100%; height: 100%;">
		<p>hoge</p>
		...
	</a>
</div>

のようにすると、div全体はリンクになってくれますが、div要素内のテキスト hoge を選択できません。
div要素内のテキストを選択できるようにしつつ、div全体をリンクにするにはどうしたらよいでしょうか。ご教授ください。

Answer 1

質問で挙げられているコードでは、div全体をリンク対象にしているのではなく、ブラウザの表示領域全体ですね。本来、div全体をリンクするだけなら <a><div /></a> のような構造の方が正しいでしょう。

一般的なブラウザのアンカータグの挙動としては、リンク対象の内側の選択はリンクそのものの反応として扱われるようですから、テキストなどの内容を選択したいのであれば、利用者にリンクの外側から選択範囲を広げるような使い方をさせれば、目的は果たせるはずです。そのため、選択させるならばデザイン的に無駄なリンク対象の範囲拡大は避けるべきではないでしょうか？

質問の意図は『利用者に上記のような強要をさせず、リンクの内側から内容を選択したい』ということでしょうか？もし、そうであれば、HTML と CSS だけだと実現は無理なように思います。

JavaScript も併用すれば一応可能だと思います。ただし、選択範囲の完了とリンク操作を見分ける明確な仕様を定める必要が出てきます。利用者の操作に対して、選択されたのか？リンクが押されたのか？の判別が必須となるため、単純に押されたら片方の挙動をする。というような実装では実現できません。

上記のような押し付けがましい複雑な挙動の場合、想像以上に使い勝手が良くなるならば、是非導入すべきでしょうが、個人的には実現も面倒そうだし、一般的な挙動から逸脱するので根本的にその問題自体を避けるべきで、ページデザインで解決すべき問題なのではないか？と考えます。本文なりが選択できて、リンクもできることが目的であれば、別途リンク項目だけ解りやすい位置に置くなり、選択とリンクを分けて解決するデザインを考えたほうがゴールは取りやすいのではないでしょうか？

以上、ご参考になれば幸いです。

Comments

[og24715]

なるほど。回答ありがとうございます。
イメージとしては、ECサイトの商品一覧で、画像と説明を含むボックスが複数あり、ボックスそのものは商品の詳細ページへのリンクがついてるような感じです。
リンクのついたボックス内のテキストをコピーして検索窓にペースト、ということが出来たら便利では？という思いつきでした。
しかし、ps13zierさんの仰る通り挙動が複雑になりかえって操作性を悪くしそうなので、やめておこうと思います。
HTML+CSSでは難しいとのことなので、いつか勉強がてらJSで組んでみようと思います。

Answer 2

<div>
    <a href="#" style="display: block; width: 100%; height: 100%;pisition:relative;z-index:0;">
        <p style="position:relative;z-index:1;">hoge</p>
        ...
    </a>
</div>

これでどうでしょう。
z-indexでpタグのみを最前面にするよう指定しました。