iStudio 2|21 ロゴ

Extra

CSS スタイルシート雑技 No. 6

画像を使わずボタンのようなリンクを作る (1)

画像も JavaScript も使わず、ボタンのようなリンクを作ってみましょう。

解説

一般的な角ボタンならば、 border を使う事で、 <img> による画像も、 onMouseOver による JavaScript も使わずに表現する事が出来ます。

<style type="text/css">

 a{
  background-color: #aaaaaa;
  border-style: outset;
  border-width: 2px;
  border-color: #aaaaaa;
  
  padding-left: 5px;
  padding-right: 5px;
  
  text-decoration: none;
 }
 
 a:hover{
  background-color: #cccccc;
 }
 
 a:active{
  background-color: #cccccc;
  border-style: inset;
 }
 
</style>


<a href="url">ボタンのようなリンク</a>



ポップアップウインドウに代表される、煩わしい JavaScript の使用方法なども影響し、通常は JavaScript をオフにしている利用者も増加しています。言ってみれば、「たかだかボタン画像の変化のためだけに、 JavaScript をオンにしなければいけないのは煩わしい」と考えている利用者にもリンクをボタンらしく見せる事が出来、かつ、 HTML 的にもシンプルに表現出来るというメリットを持っています。
この border と background を :link, :hover, :active, :visited で制御する方法を使うと、色々な応用が考えられますので、興味を持たれた方は研究を深めてみて下さい。