submitボタンのデザインについて

質問

ホームページ作成中で、CGIへデータを送るためのボタンを取り付けているところです。
valueを長くしたい(ボタンの表示名が長い)のですが、長くするとボタン枠が横に引き伸ばしたようになってしまいます。(縦横比を固定にせず横に伸ばした感じ)
どうにかして角丸部分の縦横比を変えずに長いボタンを作成したいのですが、良い方法はないでしょうか?

やはり画像で作るしかないんでしょうか…

回答No.9

noname#16352

>見る人は仲間だけで、すべてXPユーザーです。
>その為ボタンデザインにも固執してます。
>他の環境は気にしてない。
そういう限定的な用途なら拘るのも無理ないかもしれませんが、
XP だからといって全員が Internet Explorer を使っているとも限りませんし、
今後 Firefox などに切り替えたい人も出てくるかもしれません。
そういうところを多少なり束縛してしまう事になりますけど？

ま、無視すると仰っているのだからそれも踏まえた上での事でしょう。
当然、同じ IE でも設定すら同じ条件で見てもらう事が前提でしょうから、
そこまで拘るんだったら『画像』を使った方が遥かに理にかなっていると思います。

回答No.8

koutarou504

画像で作るしかないでしょうねぇ～。

＞あのボタンデザインが今はほしい所
で、長いと崩れるのがあのデザインですから。
というかあの仕様（機能）に乗っかるならそれを選択しているという事でもあり・・・。

で、基本に戻ると、望むデザインがあるなら画像が基本かと思いますが。
（特に曲線は・・・）

それから、仮にＸＰでも設定が異なれば見え方も違います。使うブラウザが違えば見え方も違ったりします。

回答No.7

goldfox

＞縦横比を変えずに長いボタン
よく分かりませんが、すごく大きなボタンになりそうですね。
value=""の中で改行して調整するのはどうですか。
<input type="submit" name="test" value="
Long Long Long Long

Long Submit!!
">
あるいは<button>を使うとか。
こちらはボタンの中の文字がかなり自由にできますよね。
<BUTTON TYPE="submit" name="test">
<span style="font-size:15pt; color:#FF0000; line-height:50%;"><br>
Long Long Long <br>
Long Long Long <br>
Long <br>
Submit!!<br></span>
</BUTTON>

回答No.6

noname#16352

Style Sheet で設定する方法もあるようですが、
その命令が機能しない（対応していない）ブラウザも世の中にはありますし、
ブラウザによってはボタンのデザインもそれぞれ違いますよ…。

特定環境の特定ブラウザの特定現象に拘って悩むくらいなら、
どの環境でもほぼ同じように表示される"画像”を利用した方が私は賢明だと思うんですけど…。

補足

見る人は仲間だけで、すべてXPユーザーです。その為ボタンデザインにも固執してます。
他の環境は気にしてないので、今回の件ではそれについては無視の方向でお願いします。

回答No.5

Chronos198

＃１です。

もしや、WindowsXPのIEで見た場合でしょうか？確かXPからボタンの角が丸くデザインが変わっていた気がします。
＞と打っている内に補足が・・・。
その場合ですと申し訳ありませんが、自分のPCはWin2kを入れている為、その現象を確認出来ません。

代わりと言ってはなんですが、ボタンに画像を使用する(<input type="image">)場合でもvalueは設定出来ますし、値を取得する事も出来ます。画面には表示されませんが。(Win2k、IE6.0で確認)

補足

#4でも書き込みましたが、あのボタンデザインが今はほしい所です。何か方法があればいいのですが…

回答No.4

asahina02

#2です。

で回答ですが、こんな感じでいかがでしょうか？

<input type="submit" style="background-color:#FFFFFF" name="test" value="Long Long Long Long Long Long Long Long Long Long Long Submit!!">

補足

うーん。
ルナデザインを残したいので、この方法だとちょっと難しいです。

やはり無理なような…(つД`)

回答No.3

asahina02

#2です。
とりあえず現象は分かりました。

ＸＰのデザインの問題のようですね。
普段はクラシックデザインだから分からなかった・・・

回答No.2

asahina02

質問を読んだ限り、#1さんと同じ回答しか思い浮かびません。
補足を読んでみても、意味が分かりません。

submitボタンっていうのは通常、
　<input type="submit" value="ボタン名">
のことですよね？
この場合、絵がどうのっていう話にはならないと思うのですが・・

可能な範囲で、デザインしているボタン周りのソースを載せることをお勧めします。

補足

そのままhtmlファイルに貼り付けて、IEで確認してください。
<INPUT type="submit" value="ここをずーーーーーーーーーーーーーーーーーーーっと長くすると左右の端が変なんです!!">

<INPUT type="submit" value="短いと綺麗!">

こういう事です。
XPのルナデザインのボタンにすると、角丸が横伸びするんです。これをどうにかしたいなと。
とりあえず、私が何を言っているのかがわかっていただけたら返答は後でもOKなので何か返答をお願いします。

回答No.1

Chronos198

縦横比の固定の方法はわからないのですが・・・。

スタイルシートを利用して縦横の高さを指定する方法ではどうでしょう？
<input type="submit" value="Long Long Long Submit !!" style="width:200px; height:60px;">
等のようにstyleのwidthとheightを指定すれば、好みの縦横比にカスタマイズ出来ます。

補足

すみません、説明の方法が悪かったかな?
ボタンの縦横比ではなく、ボタン画像の縦横比といえば良いでしょうか?
一度ボタンを作ってみてください。で、valueを長く取ってみてください。そうすると、ボタンの角がぼやけるんです。
多分これは、ボタンを絵として保存してあるからだと思うんです。(右側・中央部分・左側と分けてない)
これをどうにかしたいんです。

ちなみに、絵は使えないことが判明しました。valueに変数を載せるのでそれぞれでボタン名称が変わってくるからです。

何か方法があればお願いします。