はじめに
div要素全体にリンクをつける方法を二つ紹介します。
- 親要素を
position:relativeにし子要素のaタグをposition:absoluteにする方法 - リンクにしたい要素をaタグで囲う方法
1.親要素をposition:relativeにし子要素のaタグをposition:absoluteにする方法
実際に適用したものをみるのが良いと思いますのでCodePenを貼っておきます。
See the Pen Qiita1 by 野原直人 (@Nnohara) on CodePen.
ポイントは
- div要素の中にaタグを入れる
- 親要素を
position:relativeにし、aタグをposition:absoluteにする -
top:0とleft:0にすることで親要素左上にaタグを固定 -
width:100%とheight:100%にしaタグの大きさを親要素の大きさと同じにする
2.リンクにしたい要素をaタグで囲う方法
これは単純でリンクを付けたい要素をaタグで囲うと、要素全体にリンクをつけることができます。もちろんこの中に文章や画像を入れてもリンクがつきます。
1と全く同じものをこの方法で作ったものです。
See the Pen Qiita1-2 by 野原直人 (@Nnohara) on CodePen.
参考
1つ目の方法
2つ目の方法
-【CSS】DIV要素全体にリンクを効かせる⽅法