Box全体にリンクを効かせるのはaタグで囲まなくてもCSSの設定で可能
コラム一覧や商品一覧でよく見るこんなページ
PCサイトなら、「詳しくを見る」部分だけがリンク領域でも問題なさそうだけど、スマホサイトの場合はBOX全体がリンク領域である必要があります。
【HTML】
1 | <li> |
2 | <img src="img.jpg" alt="" /> |
3 | <h2>タイトル</h2> |
4 | <span>説明が入ります。<br /> |
5 | 説明が入ります。<br /> |
6 | 説明が入ります。<br /> |
7 | 説明が入ります。 |
8 | </span> |
9 | <a href="">詳しく見る</a> |
10 | </li> |
HTMLだけで考えれば、＜li＞タグのすぐに＜a＞タグを入れればいんでしょうが、通常＜a＞タグはインライン要素なので、中に＜h＞や＜p＞のブロック要素を入れてはいけません。
なので、CSSで設定するのが一般的です。
CSSのpositionを使ってリンク領域をBOX全体に
【HTML】
1 | <li> |
2 | <img src="img.jpg" alt="" /> |
3 | <h2>タイトル</h2> |
4 | <span>説明が入ります。<br /> |
5 | 説明が入ります。<br /> |
6 | 説明が入ります。<br /> |
7 | 説明が入ります。 |
8 | </span> |
9 | <p>詳しく見る</p> |
10 | <a href="">詳細ページへ</a> |
11 | </li> |
【CSS】※余計なCSSプロパティは割愛
1 | ul li{ |
2 | position: relative; |
3 | } |
4 | ul li a{ |
5 | position: absolute; |
6 | width: 100%; |
7 | height: 100%; |
8 | top:0; |
9 | left: 0; |
10 | text-indent: 100%; /*テキスト非表示*/ |
11 | white-space: nowrap; /*テキスト非表示*/ |
12 | overflow: hidden; /*テキスト非表示*/ |
13 | } |
14 | ul li a:hover{ |
15 | opacity:0.6; |
16 | filter: alpha(opacity=60); |
17 | -ms-filter: "alpha( opacity=60 )"; |
18 | background: #fff; |
19 | } |
これで、ボックス内が全部リンク領域にする事ができます。