|
 |
|
画像を用いずにリンク領域を作成する
サンプルと機能
スタイルシートを用いれば、TABLEタグ内にリンク領域を作ることが可能です。
メニューに画像は使いたくないけど、
テキスト上だけでは範囲が狭すぎるという場合にオススメです。
→ サンプル
サンプル・ソース
緑の文字が変更箇所で、赤い文字が対応するスクリプトです。
"//"以下はコメントです。削除しても影響ありません。
必要な箇所をコピー＆貼り付けして編集してください。
→ サンプル
<HTML>
<HEAD>
<TITLE></TITLE>
<STYLE type="text/css">
A.lnk {
display: block;
width: 100%;
height: 100%;
text-decoration: none;
color: #ffffff;
}
A.lnk:active { text-decoration: none; color: #ffffff;}
A.lnk:visited { text-decoration: none; color: #ffffff;}
A.lnk:hover { text-decoration: none; color: #ffffff; background-color: #ff0000;}
</STYLE>
</HEAD>
<BODY
bgcolor="#ffffff">
<TABLE border="0" cellspacing="0" cellpadding="0">
<TR>
<TD width="120" height="40" bgcolor="#666666">
<A class="lnk" href="http://javascript.eweb-design.com/index.html" target="_blank">JavaScript</A>
</TD>
<TD width="120" bgcolor="#999999">
<A class="lnk" href="http://css.eweb-design.com/index.html">Style Sheet</A>
</TD>
</TR>
<TR>
<TD height="40" bgcolor="#999999">
<A class="lnk" href="http://usability.eweb-design.com/index.html">Usability</A>
</TD>
<TD bgcolor="#666666">
<A class="lnk" href="index.html">Technics</A>
</TD>
</TR>
</TABLE>
</BODY>
</HTML> |
解説・注意点など
リンクを"display: block;"で透明なブロックとして、
その大きさを、"width: 100%;"、"height: 100%;"にすることで実現しています。
color: #ffffff;には、テキストの色を、
background-color: #ff0000;には、カーソルを上に乗せたときの背景色を指定します。
スタイルシートについて、詳しくはこちらをご覧ください。
← Webデザインテクニックに戻る
|
|
|
