ベストアンサー

角丸画像を使ってボタンを作りたい

2012/01/03 14:23

ホームページのボタンの背景として使う角丸の画像を作りました。しかし、ボタンの画像を文字の長さに合わせて短くしたり長くしたりしたいのですが、角丸部分は拡大・縮小しないで、真ん中の部分だけ伸ばす(?)ということはCSSでどうやったらできますか? ちょうどMS Officeのホームページの各記事の下にある「この記事は役に立ちましたか?」に対する回答用ボタンが例になると思います。

livedoorgo
お礼率21% (11/52)

CSS
回答数3
ありがとう数0

みんなの回答 （3）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/01/03 16:42 回答No.2

簡単な方法・文字まで含んだ色々なサイズのボタン画像を作成する。　a) <input type="image"> 　あるいは　b) <a href=""><img></a> 　c) 画像をスタイルシートで置く。　　<a href="">テスト</a> ・CSS3で画像を伸縮させる background-image:url(); background-size:contain; -moz-background-size:contain; -webkit-background-size:contain; -o-background-size:contain; -ms-background-size:contain; ・画像を使わない <p class="navigation">これは、<a href="">テスト</a>です。</p> に対して p.navigation a:link{ display:inline-block; padding:0.2em 0.5em; border: solid 1px gray; -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; background: -moz-linear-gradient(white, silver); background: -webkit-gradient(linear, left top, left bottom, from(white), to(silver)); text-decoration:none; } p.navigation a:hover{ border-color:red; }

その他の回答 (2)

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/01/03 17:46 回答No.3

　他の方法・CSS2.1で、:before,:afterの擬似要素で、画像を追加して、その画像をblockにして、親コンテナブロックのサイズを参照して伸縮させる。・画像と文字を<a></a>で囲み、aに対してrelativeを指定して、imgをabsoluteで置く　他にも色々方法はあるでしょうが・・　実際の画像、使用場所その他で選択しましょう。

cell1900
ベストアンサー率50% (3/6)

2012/01/03 16:41 回答No.1

htmlとcssのそれぞれで、テーブルの幅と、幅を可変にする中央の<td>にwidthを記述しなければ、文字の長さに合わせて幅が変化します。左右のセルは幅20px,高さ10pxで指定、画像に対応する背景色を<td>ごとにcssで割り当てました。 css上で画像を割り当てて、html上で中央セルのテキストにリンクを指定すれば、ボタンの見栄えになるのでは。参考になるかどうか、下にソースをのせました。解決に一番近い方法は、＞ちょうどMS Officeのホームページの各記事の下にある「この記事は役に立ちましたか?」に対する回答用ボタンが例になると思います。の部分のソースを見ることだと思います。 ----- /*コードここから*/ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <title>無題ドキュメント</title> <style type="text/css">  </style> </head> <body> <table border="0"> <tr> <td width="20" class="cell_left"></td> <td class="cell_center">マーケット</td> <td width="20" class="cell_right"></td> </tr> </table> <table border="0"> <tr> <td width="20" class="cell_left"></td> <td class="cell_center">市場</td> <td width="20" class="cell_right"></td> </tr> </table> <table border="0"> <tr> <td width="20" class="cell_left"></td> <td class="cell_center">market</td> <td width="20" class="cell_right"></td> </tr> </table> </body> </html> /*コードここまで*/