画像をリンクボタンにして文字を重ねる方法

質問

こんばんは。
画像をリンクボタンにして文字を重ねる方法を教えていただきたいのですが。
どういえば良いのかわからなかったので、こういう題名になりましたが、ちがうかもしれないので、まねしたいページのアドレスを置いときます。
http://open2.sesames.jp/bananag/html/_TOP/
このページの「サービス一覧」のランにある「ＪＩＦＴ」ですが、
画像の上に文字がかかってます。それでもって画像,文字をクリックするとURLへジャンプするみたいなのです。
これをまねしたいです。
やり方を教えてください。

回答No.2

ORUKA1951

そのサイトは、HTML的には参考にされないほうがよいと思います。酷いソースです。
Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html )

　それはさておき、これは簡単に出来ます。
たとえば、リンクの一覧(リスト)ですと、くかもりは正しくは、
<ol>
<li><a href="[URI]">リンク先1</a></li>
<li><a href="[URI]">リンク先2</a></li>
<li><a href="[URI]">リンク先3</a></li>
</ol>
となるべきですね。
　それをスタイルシートで
ol{
width: 300px;
border: solid 2px red;
}
li{
display:block;
margin:5px,10px;
padding:0px;
}
ol>li>a{
display:block;
border:outset 4px red;
・・・・
と指定していけばよい。
　とても良く使われる方法です。ポインターを上に乗せると色が変わったり、背景画像を入れ替えたり・・・

　とても良く使われるテクニックなので
【参考サイト】
リンクリストを画像ボタンに CSS OR スタイルシート - Google 検索
　 http://www.google.co.jp/search?hl=ja&q=%E3%83%AA%E3%83%B3%E3%82%AF%E3%83%AA%E3%82%B9%E3%83%88%E3%82%92%E7%94%BB%E5%83%8F%E3%83%9C%E3%82%BF%E3%83%B3%E3%81%AB+CSS+OR+%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%82%B7%E3%83%BC%E3%83%88&btnG=Google+%E6%A4%9C%E7%B4%A2&lr=lang_en%7Clang_ja&aq=f&oq=
　で検索してみてください。

お礼

ありがとうございました。参考にさせていただきます。