CSS イメージボタン
HTML で作成されるフォームのボタンは、OS やブラウザによってデザインが異なる。サイトのデザインとボタンを統一させたい時や、ボタンに文字ではなくアイコンを使用したい時がある。そんな時まず思いつくのは image ボタンを使用する方法だ。
<input type="image" src="button.png" alt="検索" />
この方法は、src 属性で画像の URI を指定して画像を表示するが、画像を使わない方法でボタンを作成し、そのボタンを CSS で image ボタンのように見せることはできないだろうか。CSS でサイトのデザインをする際、見出しなどのテキストと背景画像を置き換えるテクニックがよく使用される。同様にこのテクニックをボタンにも使用できないか試みた。
表示確認は IE 6、Firefox 1.5、Netscape 7.1、Opera 9、Safari 2、Mac IE 5.2 で行った。
input 要素ボタン
input 要素の type 属性の値を submit に指定したボタンを使う。type 属性の値が reset や button の場合でも同じ。
<input type="submit" value="検索" class="button" />
CSS でボーダーを消し、背景に画像を表示し、テキストを text-indent で見えない位置へ移動する。cursor の値を pointer にすれば、カーソルを画像ボタンにマウスオーバーした時と同じ形状にすることができる。
.button {
width: 46px;
height: 20px;
border: 0;
background: url(button.png) no-repeat 0 0;
text-indent: -9999px;
cursor: pointer;
}
ボタンのラベルとして表示するテキストは、value 属性の値なので text-indent は適用されないと思っていたが、IE、Firefox、Netscape では適用され背景画像と置き換わった。
しかし、Opera と Mac IE ではテキストが見えたままで、Safari では背景画像も表示できない。テキストはそのままラベルとして使うほうが良さそう。
次に input 要素の代わりに button 要素を使用したボタンで試した。
button 要素ボタン
button 要素は、ボタン専用の要素で input 要素で作成されるボタンと機能的には同じ。この要素は内容をラベルとして表示する。
<button type="submit" class="button">検索</button>
CSS は input 要素ボタンの時と同じスタイルを指定する。
.button {
width: 46px;
height: 20px;
border: 0;
background: url(button.png) no-repeat 0 0;
text-indent: -9999px;
cursor: pointer;
}
button 要素を使えば Safari でも背景画像が表示でき、Opera でもテキストが見えなくなった。しかし、まだ Mac IE 5 ではテキストが表示されたままなのでバックスラッシュハックを使って Mac IE にだけ letter-spacing を指定する。
/*\*//*/
.button {
letter-spacing: -9999px;
}
/**/
この方法で表示確認を行ったすべてのブラウザでテキストを背景画像に置き換えることができた。
実際に作成したイメージボタンのサンプル。
CSS でボタンをデザインする際、背景画像を表示してテキストをそのままラベルとして使う時は input 要素を使用し、テキストを見えなくする時は button 要素を使用するのが良さそう。しかし、button 要素は Netscape 4 に対応していないので注意。
コメント
面倒なこと考えるなぁ。
PHP とかやってるとそのうち面倒になるよ!!
2006-10-01 01:35
まじでか。
これあかんかな～
あ、PHP 教えてな。
2006-10-02 01:18
Don't have money to buy a house? Don't worry, because that is real to take the personal loans to resolve such kind of problems. Therefore get a consolidation loan to buy all you want.
2010-04-25 02:20
Hey im new on here, I found this message board quite helpful & it has helped me out loads. i hope to be able to contribute & help others like it has helped me.
I enjoy watch family guy episodes online this help burn some of time.
Thank You, See you about.
2010-04-29 02:28
Hi people, fab chat board I find It quite useful & its helped me out so much
I hope to be able to contribute & assist other people like this board has helped me
_________________
pwnage unlock
2010-07-21 03:17
Hi-ya i'm fresh here. I came upon this site I find It quite accommodating and it's helped me out a lot. I hope to give something back & help other people like its helped me.
Thanks, Catch You Around
2010-07-23 23:41
Aloha everyone, nice website I find It extremely accommodating and it's helped me alot
I hope to be able to contribute and assist other people like this board has helped me
_________________
buy dreambox 800 hd
2010-07-29 02:31
Hello all, neat forum I find It extremely accessible & it has helped me so much
I hope to be able to contribute & assist other users like this forum has helped me
_________________
ga homes for sale
2010-07-30 06:50
Good Day everybody, lovely site I find It truly accommodating and its helped me alot
I hope to give something back & help others like this site has helped me
_________________
organic baby products
2010-07-30 07:25
Hi-ya all, fine site I have found It very accommodating & it has helped me a lot
I hope to be able to give something back & support other users like this chat board has helped me
_________________
electronic cigarette
2010-07-30 07:49
コメントする