submitボタンを大きくすると粗くなってしまいます・・・。

質問

宜しくお願いします。

現在HP上に設置した送信ボタンの修正を行っているのですが、どうも旨くいきません。

行いたいことは、メールフォームの送信ボタンをデフォルトより大きいボタンにしたいのですが、サイズを大きくするとボタン自体のデザインが崩れてしまいます。

崩れるというのは、ボタンの特に角4つが解像度を越えた画像のように粗くなってしまい、綺麗ではなくなってしまいます。無理やり引き伸ばした感じでしょうか・・・。

やり方は、直接HTMLに
<input type="submit" name="submit" value="送信する" style="width:200px;hight:30px">

といった感じで記述したり、CSSでも同様にサイズの定義を行ってみるのですが、なぜか綺麗に出来ず、角の部分が伸ばしたように汚く粗い感じのボタンになってしまいます。

どなたか、綺麗に大きなボタンを作る方法をご存知の方いらっしゃいましたら、アドバイス頂けますと幸いです。

よろしくお願いいたします。

回答No.1

tanaka07 · ベストアンサー

IE8、firefox3だとスタイルで拡大したボタンの角も綺麗に表示されました。
おそらく、IE6、IE7では無理かと思います。

ブラウザを限定したくないのであれば、
<input type="image">などを使ってボタンを画像にしてみてはどうでしょう？

参考URL：

http://www.tagindex.com/html_tag/form/input_image.html

お礼

ありがとう御座います。

そうですか、今のブラウザでは難しいのでしょうか？ちなみに、確認にはIE6・7で試してみていました。

ただ、こちらのページでは綺麗に表示されているように、現在のブラウザでも思うのですが、同じ定義を行ってみても綺麗にいかないので、何か特殊な指定などがあるのかな？と、思う次第です。

http://www.tagindex.com/stylesheet/form/width_height.html

恐れ入りますが、引き続きですがよろしくお願いいたします。

回答No.2

font_color

＞角の部分が伸ばしたように汚く粗い感じのボタンになってしまいます。
＞確認にはIE6・7で試してみていました。

＞サイズを大きくすると
・・とは拡大表示で見たらということでしょうか？

検証したところ、style指定ありの場合は拡大レベルを変更すると確かに粗くなりますね。

<input type="submit" name="submit" value="送信する" style="padding:10px 50px;" />

上記の方法でも粗くなりました。
ちなみに
http://www.tagindex.com/stylesheet/form/width_height.html
でも拡大レベルを150％にすると粗くなりますね。

これは、IEの使用かと思います。
気になるようなら＃1さんのおっしゃるように画像にするのがいいかと思います。画像でも拡大すれば粗くなりますが・・。

お礼

ありがとう御座います。

そうですか、やはりブラウザの仕様なのですね。
アドバイス通り、画像などを用いて対応したいと思います。