• ベストアンサー

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

宜しくお願いします。 現在HP上に設置した送信ボタンの修正を行っているのですが、どうも旨くいきません。 行いたいことは、メールフォームの送信ボタンをデフォルトより大きいボタンにしたいのですが、サイズを大きくするとボタン自体のデザインが崩れてしまいます。 崩れるというのは、ボタンの特に角4つが解像度を越えた画像のように粗くなってしまい、綺麗ではなくなってしまいます。無理やり引き伸ばした感じでしょうか・・・。 やり方は、直接HTMLに <input type="submit" name="submit" value="送信する" style="width:200px;hight:30px"> といった感じで記述したり、CSSでも同様にサイズの定義を行ってみるのですが、なぜか綺麗に出来ず、角の部分が伸ばしたように汚く粗い感じのボタンになってしまいます。 どなたか、綺麗に大きなボタンを作る方法をご存知の方いらっしゃいましたら、アドバイス頂けますと幸いです。 よろしくお願いいたします。

  • HTML
  • 回答数2
  • ありがとう数2

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

  • ベストアンサー
  • tanaka07
  • ベストアンサー率66% (2/3)
回答No.1

IE8、firefox3だとスタイルで拡大したボタンの角も綺麗に表示されました。 おそらく、IE6、IE7では無理かと思います。 ブラウザを限定したくないのであれば、 <input type="image">などを使ってボタンを画像にしてみてはどうでしょう？

参考URL：
http://www.tagindex.com/html_tag/form/input_image.html
apple_mango
質問者

お礼

ありがとう御座います。 そうですか、今のブラウザでは難しいのでしょうか？ちなみに、確認にはIE6・7で試してみていました。 ただ、こちらのページでは綺麗に表示されているように、現在のブラウザでも思うのですが、同じ定義を行ってみても綺麗にいかないので、何か特殊な指定などがあるのかな？と、思う次第です。 http://www.tagindex.com/stylesheet/form/width_height.html 恐れ入りますが、引き続きですがよろしくお願いいたします。

その他の回答 (1)

回答No.2

＞角の部分が伸ばしたように汚く粗い感じのボタンになってしまいます。 ＞確認には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さんのおっしゃるように画像にするのがいいかと思います。画像でも拡大すれば粗くなりますが・・。

apple_mango
質問者

お礼

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

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • submitボタン上の文字とvalue=の数字

    CSS3 + HTML5 でゲームを作っています。 Formのsubmitボタンを設置する必要があるのですが、ボタン上に表示する文字とvalue=の文字を分ける必要があります。 <input type="submit" name="point" value="送信する"> 上記では本来であれば数値を入れたいvalue=に、「ボタン上に表示する文字」を入れなければならないため使えません。 <button type="submit" name="point" value="10050">購入する</button> であれば、valueに数値を置き、ボタン上に文字を置けるため当方のニーズに叶うのですが、HTML5上で見るとボタンの大きさが<input type="submit>の3分の1くらいになってしまいます。 従い<button type="submit" name="point" value="10050">購入する</button> のボタンの大きさを変更する方法がわかればいいと思いますが、この方法でなくても構いません。 HTML5上で、当方のニーズに合うボタンを作るためにはどうしたらいいでしょうか?

    • ベストアンサー
    • HTML
  • 昔風のsubmitボタンにする方法

    <input type="submit" value="送信"> 　　　　　↑　↑　↑　↑ これをIE5以前のブラウザで表示されるようなボタンの見栄えにCSSか何かでできたような気がするのですが。。。グレー色のオーソドックスなボタンです。わかる方がいらっしゃれば教えてください。

    • ベストアンサー
    • HTML
  • submitについて

    「　<input type=submit value="送信">　」について。 ボタンの役割というのは分かりますが、submitの使い方がよく分かっていません。このボタンを押した時の処理というのはどこで行うものなのですか。サンプルソースなど、ボタンはsubmitが多く使われているようなのですが・・・。どのようなときに役立つのか教えてください。

    • ベストアンサー
    • HTML
  • 2つのsubmitボタンがあるときに

    最初に書いたボタンが優先され 単にリターンキーを押したときに 最初のsubmitボタンが反応します。 後のsubmitボタンが反応するようにするにはどうしたらいいのでしょうか？ つまり下記のＰＨＰをブラウザに表示させているときにリターンキーを押したときには submit2 is pushed. と表示させるにはどうしたらいいのでしょうか？ <form method="post" action="<?=$PHP_SELF?>"> <input type="text"/><br/> <input type="checkbox"/><br/> <input type="radio" name="radio"/><br/> <input type="submit" name="submit" value="submit1" tabindex=-1/><br/> <input type="submit" name="submit" value="submit2" tabindex=1/><br/> </form> <?php if(isset($_POST['submit'])) { echo$_POST['submit'].' is pushed.'; } ?>

    • ベストアンサー
    • PHP
  • submit image サイズ変更

    submit imageで画像を送信ボタンにしたら画像のサイズ変更が出来なくなってしまいました。これを変更したいです 以下ソース ===php=== <form action="detail.php"> echo '<input type="image" src="./画像/', $row["id"], '.png" class="product-img" '; ===css=== img.product-img{ width: 260px; height: 300px; }

    • ベストアンサー
    • CSS
  • 参照ボタンの横に大きさを揃えて送信ボタンを置きたい

    質問させてください。 下記のように、参照フォームと送信ボタンを横並びで設置したいのですが、 ブラウザ毎で参照ボタンと送信ボタンのサイズがずれてしまいます。 IE7・IE8・Firefox3.6でボタンの大きさ（高さや文字位置）をCSSで合わせるにはどうしたらいいでしょうか・・・。 完全に合わせるのは不可能なんでしょうか？ <input type=file name=""><input type=submit value="送信する"> 何かいい方法がございましたら、教えていただけますでしょうか。

  • 複数のラジオボタン選択肢によりsubmitを押せなくする

    初めて質問させていただきます。 ラジオボタンが下記の選択状態の時だけ「送信（submit）」ボタンを enable で表示させたいです。 １：●　２：○ １：●　２：○ それ以外の選択肢では「送信（submit）」ボタンを disabl で押せないようにしたいです。 調べて、近い動作にはなりましたが、javascriptに関して 殆ど知識がないため、これから先がさっぱりわかりません。 ぜひ教えを乞いたく参りました。お知恵をお貸しください<(__)> どうぞ宜しくお願い致します。 <HTML> <HEAD> <script type="text/javascript"><!-- function unlock1(el){el.form.send.disabled=false;} function unlock2(el){el.form.send.disabled=true;} //--> </script> <form> 1:<input type="radio" name="radio1" value="1" onClick="unlock1(this)"> 2:<input type="radio" name="radio1" value="2" onClick="unlock2(this)"><br> 1:<input type="radio" name="radio2" value="1" onClick="unlock1(this)"><br> 2:<input type="radio" name="radio2" value="2" onClick="unlock2(this)"><br> <input name="send" type="submit" value="送信" disabled > </form> </BODY> </HTML>

  • 送信ボタン

    ホームページでアンケートを取ろうと思っているのですが送信ボタンを押すとメッセージ作成画面になってしまいます。ＨＴＭＬは<INPUT type="submit"value="送信">にしています。書き込んでもらった内容を送信ボタンによって送信したいのにできません。誰か教えてください。

  • submitについて

    <script type="text/javascript"> <!-- function go() { document.getElementsByTagName("input")[3].value+="text"; } //--> </script> <form name="NAME1" action="#" method="get" onSubmit="go()"> <input type="submit" name="submit1" value="送信１" > <input type="submit" name="submit2" value="送信２"> <input type="button" name="submit3" value="送信3" onClick="go()"> <input type="text" name="text1" size="10"> </form> なのですが、送信２のsubmitを４回クリックすると以下のように表示されるのですが、どういう感じで実行されているのかわかりませんので教えていただけないでしょうか？ 一応一回目はtext1=textとなるのですがテキストボックスには空になります。 ２回目はtext1=textとなりテキストボックスにはtextが入ります。 ３回目はtext1=texttextとなりテキストボックスには空になります。 ４回目はtext1=textとなりテキストボックスは空になります。 以上よろしくお願いします。

  • 1つのsubmitボタンで2つのCGIを呼び出すことは可能ですか？

    今は、htmlで <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP"> </head> <body> <form action="abc.cgi" method="get"> 以下省略 <input type="submit" value="送信"> </form> <form action="xyz.cgi" method="get"> 以下省略 <input type="submit" value="受信"> </form> </body> </html> という感じで書き、2つのボタンで個々に2つのCGIを呼び出していますが、 これをメールの送受信のように、1つのボタンで2つのCGIを呼び出すことは可能なのでしょうか。 教えてください。お願いいたします。

    • ベストアンサー
    • CGI

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する