ボタンに画像を使うには、３通り方法があります 1) BUTTON 要素 を使う 2) INPUT 要素の type="button" を使う 3) INPUT 要素の type="image" を使う ポイント1 1) と 3) は、FORM 要素内で記述するとサーバーに送るボタンとして使用できます 2) は、FORM 要素内で記述されてもサーバーへは送られません ポイント2 1) と 2) は、画像の定義方法が同じで、どちらもボタンとしての効果があります 3) は画像が表示されるだけですが、その他の画像に対するスタイルを定義できます ( サーバーへ送る時にクリックした座標が送られます ) 3) の場合は、カーソルはポインタカーソルになりますが、ボタンでは矢印です ポイント3 ボタンにテキストを指定する場合は、INPUT要素より BUTTON 要素のほうが容易です以下の二つのボタンは、BUTTON 要素と INPUT 要素です ( ボタン画像よりエリアとして縦横 5px 大きく設定しています ) ボタン画像は、輪郭が表現されている場合が多いので、5px 大きく設定しますが、 以下は、ブラウザが自動的に付加する輪郭を省く場合の記述方法で、開始位置 を -1px として、縦横を -2px します。元の画像から考えると +3px です ( これは、IE8 でしかうまくいかないので使わないほうがいいです ) さらに、ボタン画像に含まれる輪郭を消去して使うには、開始位置をさらに マイナスにして、サイズを調整します。この場合は、開始位置が -2px で、 画像の元のサイズからすると +1px です ( これがたぶん全てのブラウザでうまくいきそうです )
上はボタン画像では無く一般の画像です。これをボタンとするには、テキストの 色もさらに設定する必要があります 以下の3つは開始位置とサイズを変化させたバリエーションですが、通常画像の為、 大きな違いはありません。逆に画像にタイル画像を使うと繰り返して表示されるの で小さな画像で背景パターンを使う事もできます ※ 少なくとも IE8 と その他のブラウザと仕様が違います。普通の画像の場合は、 幅を +5px ではなく、+4px が正解のようです 以下は、INPUT 要素の type="image" を使用しています。この場合はボタンと言うより、 「画像を使って(クリックした位置も)サーバーにデータを送信する」為に使います。 ですから、自動的にボタンとしての効果も無いので、クリックできる事を明示する為に カーソルがポインタカーソルに変化するようになっています
<pre>
<img src="http://lh4.googleusercontent.com/-t05nNNNYcUM/TthO_-NseNI/AAAAAAAAD3o/LkyqQjJKxPQ/s180/_img.png" onclick='alert("通常のボタン用画像です")' />
<button style='background:url(http://lh4.googleusercontent.com/-t05nNNNYcUM/TthO_-NseNI/AAAAAAAAD3o/LkyqQjJKxPQ/s180/_img.png);width:185px;height:35px;' onclick='alert("button要素 : ボタンサイズより縦横共に5px大きい設定で、画像全体とボタン効果を表現できます")' >実行</button>
<input type="button" style='background:url(http://lh4.googleusercontent.com/-t05nNNNYcUM/TthO_-NseNI/AAAAAAAAD3o/LkyqQjJKxPQ/s180/_img.png);width:185px;height:35px;' onclick='alert("input要素 : ボタンサイズより縦横共に5px大きい設定で、画像全体とボタン効果を表現できます")' value="実行" />
<button style='background:url(http://lh4.googleusercontent.com/-t05nNNNYcUM/TthO_-NseNI/AAAAAAAAD3o/LkyqQjJKxPQ/s180/_img.png) -1px -1px;width:183px;height:33px; ' onclick='alert("ボタンサイズより縦横共に3px大きい設定で、画像全体と一番外側のボタン効果を削除して表現できます。\n但し、開始位置(-1px)をスタイルで設定する必要があります")'>実行</button>
<button style='background:url(http://lh4.googleusercontent.com/-t05nNNNYcUM/TthO_-NseNI/AAAAAAAAD3o/LkyqQjJKxPQ/s180/_img.png) -2px -2px;width:181px;height:31px;' onclick='alert("ボタンサイズより縦横共に1px大きい設定で、画像の輪郭を1pxづつ省いて全一番外側のボタン効果を削除して表現できます。\n但し、開始位置(-2px)をスタイルで設定する必要があります")'>実行</button>
<img src="http://lh6.googleusercontent.com/-2nPp58ASA_s/TthPaa4UaoI/AAAAAAAAD3w/N52ooMu6Epo/s206/_img.png" onclick='alert("一般画像をボタン用として利用します")' />
<button onclick='alert("OK")' style='background:url(http://lh6.googleusercontent.com/-2nPp58ASA_s/TthPaa4UaoI/AAAAAAAAD3w/N52ooMu6Epo/s206/_img.png);width:210px;height:59px;color:#ffffff' onclick='alert("ボタンサイズより縦横共に3px大きい設定で、画像全体と一番外側のボタン効果を削除して表現できます。\n但し、開始位置(-1px)をスタイルで設定する必要があります")'>実行</button>
<button onclick='alert("OK")' style='background:url(http://lh6.googleusercontent.com/-2nPp58ASA_s/TthPaa4UaoI/AAAAAAAAD3w/N52ooMu6Epo/s206/_img.png) -1px -1px;width:209px;height:57px;color:#ffffff'>実行</button>
<button onclick='alert("OK")' style='background:url(http://lh6.googleusercontent.com/-2nPp58ASA_s/TthPaa4UaoI/AAAAAAAAD3w/N52ooMu6Epo/s206/_img.png) -2px -2px;width:207px;height:55px;color:#ffffff' onclick='alert("ボタンサイズより縦横共に1px大きい設定で、画像の輪郭を1pxづつ省いて全一番外側のボタン効果を削除して表現できます。\n但し、開始位置(-2px)をスタイルで設定する必要があります")'>実行</button>
<input type="image" src="http://lh6.googleusercontent.com/-2nPp58ASA_s/TthPaa4UaoI/AAAAAAAAD3w/N52ooMu6Epo/s206/_img.png" onclick='alert("input 要素で画像をボタンとして利用します\nこの方法では、テキストを利用できませんが、クリックした位置をサーバーに送る事ができます\nまた、ボタンが押された時の効果は利用できません")' />
<input type="image" src="http://lh6.googleusercontent.com/-2nPp58ASA_s/TthPaa4UaoI/AAAAAAAAD3w/N52ooMu6Epo/s206/_img.png" style='border:solid 2px #c0c0c0' onclick='alert("input 要素で画像をボタンとして利用します\n普通の画像と同じようにスタイルで見え方を変更できます\nここでは、輪郭に実線を使って太さと色指定をしています")' />
</pre>
BUTTON 要素の中に IMG 要素とテキストを記述すると以下のようにもできます
背景用のタイル画像でボタンを表現します ▼ 元画像
|
|
【HTML / CSSの最新記事】
- タイトルの背景画像を CSS でスクロールさせて雪を降らせ、after を使って画像で装飾する
- A 要素と CSS だけでボタンを表現する 『BUTTONS』
- BUTTON 要素と CSS だけでアイコンボタンを表現する 『BUTTONS』
- CENTER 要素内での position:absolute で、位置指定されていない場合の振る舞い
- INPUT type="number" の振る舞いをブラウザ間で調整する
- META 要素の viewport で content 内の区切り文字に ;(セミコロン) を使うと Google Chrome で警告が出ました。
- CSS の display に 設定する inline-table と inline-block を交互に設定して効果を確認
- ブロックレベル要素内のブロックレベル要素を常に中央に表示する jQuery のデモ
- IE9 以降での完全な「データ URI」の利用 / WEBページにバイナリデータを埋め込む / data Protocol
- CSS で、white-space に pre-line を指定している PRE 要素内の ブラウザ毎の結果の違い
- TABLE要素を使わずに DIV 要素を使って横方向にエリアを配置する
- Picasa と list-style-image を使って、リストのマークをフォントサイズに合わせて拡大・縮小して利用する
- WEB フォントの記述方法の考察
- これがいい方法かどうかは解りませんが、直観的で解りやすい UL 要素内の LI 間の改行調整
- Google Chrome で IFRAME の frameborder="yes" が動作しないのですが(一般仕様はともかくとして)、よくよくブラウザ別に比べるとかなり違います。
- CSS3 の角丸を IE8以前でも使うには( ブログで使うには )
- CSS : display / vertical-align
