ボックスにリンクを設定するスタイルシート(CSS)の技

ボックスにリンクを設定

　以下の例のようにボックスをマウスオーバーした際に、文字だけでなくボックス全体にリンクを貼る方法を紹介します。かきくけこ　ボックス全体がリンクになります。ポイントは <A><DIV>～</DIV></A> の構造にせずに。 <A><SPAN>～</SPAN></A>にし、本来インライン要素であるSPANをスタイルシート上でボックス要素に(display:block;)します。理由としては、<A>～</A>タグの中に<DIV>などのブロック要素を基本的に入れないように注意して下さい。

CSS

// spanをdisplay:block;でブロック要素にします
.span2box {
　background-color:white; display:block;
　border:1px solid gray; padding:5px; margin:5px; 
}
// リンクの見栄えを設定します。
a .span2box { background-color:#f0f0ff; font-weight:bold; }
a:hover .span2box { background-color:skyblue; color:blue; }

HTML

//.span2box のリンクなしバージョンです。
<span class="span2box">あいうえお</span>

// .span2box に リンクを設定しました。
<a href="./blank.html">
<span class="span2box">かきくけこ</span>
</a>

実行例

//.span2box のリンクなしバージョンです。あいうえお

// .span2box にリンクを設定しました。かきくけこ

スタイルシート(CSS)の技

ボックスにリンクを設定

CSS

HTML

実行例

リンクに関するスタイルシートの技