- ベストアンサー
フォームをリセットボタンのボタンの周りの余白を消したい！
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
その隙間はレンダリングにおいて完全にブラウザ依存なので、 全てのブラウザに対応して隙間を一切なくすということは不可能でしょう IEやOpera等でしたら、 <BUTTON type="reset" style="border-style : none; background-color: #FFFFFF;width:50px;height:100px;"><IMG src="image.gif" alt="リセット" width="50" height="100"></BUTTON> のようにbuttonタグのstyle設定で width(横幅) height(縦幅)を 内包している画像(image.gif)と同じ幅に設定してあげれば可能かと思います 上記例では、画像の横幅が 50px 縦幅が 100px と仮に設定したものです それとvalue値の視覚的表示は無効になるブラウザがほとんどですので、 今回の場合マウスを載せた際や、画像非表示の際に文字を表示したいのならば <img>タグ内にvalueではなく代替テキストの alt となります (title="～"もあれば尚良し) ちなみに本来 value="～" を記述するのは内包されているものではなく、<button>タグそのものにです 例 <button type="button" name="hoge" value="foo">～</button>
関連するQ&A
- <div>この余白は・・・
<div>で作ったボックスの中に、さらに<div>のボックスを二つ（box、box2）並べたいのですが、float:leftでboxを左に寄せると、次に回り込んで表示されるbox2との間にかなりの余白があります。 CSSでbox、box2にmarginは指定していないのですが、この余白は何なんでしょうか？ また、このbox、box2をある程度間に余白を持たせた上でセンタリングしたいのですが、これもなぜかうまくいきません・・・。 ▼HTML <div class="out"> <div class="title"> <img src="img/title.jpg" width="700" height="75" border="0"> </div> <div class="main"> <img src="img/main.jpg" width="700" height="375" border="0"> </div> <div class="menu"> <img src="img/home_a.jpg" width="100" height="35" border="0"> <img src="img/first.jpg" width="100" height="35" border="0"> <img src="img/info.jpg" width="100" height="35" border="0"> <img src="img/order.jpg" width="100" height="35" border="0"> <img src="img/support.jpg" width="100" height="35" border="0"> <img src="img/link.jpg" width="100" height="35" border="0"> <img src="img/question.jpg" width="100" height="35" border="0"> </div> <div class="area"> <div class="box"> <h5>AAAAAAAAA</h5> <img src="img/kari.gif" width="250" height="100" border="0"> </div> <div class="box2"> <h5>BBBBBBBBB</h5> <img src="img/kari2.gif" width="250" height="100" border="0"> </div> </div> </div> ▼CSS div.out{ width:700px; background-color:#ffffff; } div.main{ border-style:solid none solid none; border-width:10px; border-color:#666666; } div.menu{ margin-bottom:50px; } div.area{ text-align:center; padding:0.7em; border:solid; border-color:red; } div.box{ float:left; width:250px; border-style:none solid solid solid; border-width:1px; border-color:#99ccff; background-color:#99ccff; } div.box2{ width:250px; border-style:none solid solid solid; border-width:1px; border-color:#99ccff; background-color:#99ccff; } h5{ margin-bottom:0px; padding:0.5em; } どなたか知恵をお貸しください。よろしくお願いいたします。
- ベストアンサー
- HTML
- 【HTML/CSS】ボタンの枠が伸びてしまいます
htmlでコーディングをしています。 ボタン作成の部分で、どうしても解決できないことがあり、 投稿させて頂きました。 大変お手数ですが、ご教授頂けたらと思います。 input typeが「submit」のボタンに、画像を重ねて、機能はそのままにうまく配置するところまで できました。 ところが、Iceweaselというブラウザで見るとボタンの枠線は消えているのですが、 IE(バージョン11)で見ると、添付の画像のように、枠線が表示されてしまいます。 問題のボタンのhtml側とcss側の記載は以下の通りです。 ※<br>のタグは見易くするため、以下では省略しています。 *************************************************** 【html側】 <button input type="submit" value="検索"><img src="button_suche.gif" border="0"></button> <button input type="submit" value="決定"><img src="button_bestimmen.gif" border="0" style="width: 75px; height: 30px; margin-right:200px"></button> <button input type="button" value="全選択" onclick="chkAll_form(true)" /><img src="button_allegewaehlt.gif" border="0"></button> <button input type="button" value="全解除" onclick="chkAll_form(false)" /><img src="button_ganzefreilassung.gif" border="0"></button> 【css側】 button{ /*width: 75px;*/ /*height: 30px;*/ width:auto; padding:0; margin:0; background:none; border:none; font-size:0; line-height:0; overflow:visible; cursor:pointer; } *************************************************** なお、Iceweasel側でも、枠線は消えているのですが、 クリックすると、iEで伸びている分(margin-right:200pxの分)も含めた 幅の点線が表示されます。 またIE側は、そういうコーディングはしていないのに、 ボタンのマウスを充てると、まわりの枠が水色に反転します。 ※添付の図の「決定」ボタンの状態です。 どのようにすれば、IE側のこの枠は消えるのでしょうか。
- ベストアンサー
- HTML
- border: noneでボタンの境界線が消える
ｃｓｓは全くの初心者です。教本で勉強しながらサンプルを動かしています。 reset.cssとstyle.cssの二つを利用し、 resetでブラウザの設定をリセットする形をとっています。 resetの内容は下記です。 ------------------------- @charset "UTF-8"; * { margin: 0; padding: 0; list-style: none; font-size: 100%; border: none; } img { vertical-align: top; } ------------------------- ところが、実験的に検索ボタンを設けようと <input Type="submit" name="subm" value="検索"> を追加したら、ボタンの境界線が消えてしまいました。 これを回避するにはどうしたらいいのでしょうか？ ちなみに<div>で囲って個別に境界線を設定する、という方法もあり、やってみましたが、 ボタンらしく見えませんでした。検索ボタンだけreset.cssの「border: none;」を 適用しない、なんて方法はあるのでしょうか？
- ベストアンサー
- HTML
- イラストのボタンを押したときの画像の表示
イラストをクリックしたとき、ボタンに応じた文章と画像を、同時にそれぞれ決まった場所に表示したいです。 表示する場所の設定と、文章のほうはなんとかできました。 ですが、画像の表示(入れ替え)がうまくいきません。 色々調べてみたのですが、方法はいろいろあったものの恥ずかしながら理解できませんでした。 下に該当する部分のコードを書きます。 どうか、アドバイスよろしくお願いします。版権を利用している部分は伏せます。 setumei は文章を表示する部分 です。 setumei2 は画像を表示させる部分 にしたいです。 syoukai.png を gpikumin3.pngに画像を入れかえる部分がわかりません。 課題用であり、HP制作用のものではないです。 function button1(){ var div = document.getElementById('setumei'); div.innerHTML = "簡易説明"; div.style.background = "#ffffff"; div.style.border = "1px solid #000000"; var div = document.getElementById('setumei2'); ←わからない部分 dav.src = "gpikumin3.png"; div.style.background = "#ffffff"; div.style.border = "1px solid #000000"; <input type="image" onclick="button1()" src="mimin11.png" height="300" width="300"/> ↑クリックで文章と画像を表示させるイラスト型のボタン <div id="setumei"> 上記の１、２、３のイラストを押すと、簡易説明がここに表示されます。 </div> <div id="setumei2"><img src="syoukai.png"> ↑上が文章、下が画像の表示場所です。
- ベストアンサー
- JavaScript
- 画像 表示について質問です。
画像 表示について質問です。 <?php echo '<a href="A.php"><img src="img/advance.gif" wwidth="80" height="80" style="border-style:none;" onmouseover="this.src="img/returen2.gif";" onmouseout="this.src="img/returen.gif";" /></a>'; ?> と考えたのですが、画像は表示されるもののONマウスの時に画像が変化しません。 どうしてなのでしょうか。
- ベストアンサー
- PHP
- 画像をクリックして別の画像を変えたい
ボタン画像をクリックしたときに同一ページ内にある画像が変わるようにしたいのですが、下のように描くと、ボタン画像（button.gif)自身が2.pngなどの画像に変わってしまいます。 <HTML> <HEAD> <TITLE>スワップイメージ</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function changeImage(imageUrl){ document.images[0].src = imageUrl; } // --> </SCRIPT> </HEAD> <BODY> <A HREF="#" onClick="changeImage('1.png')" ><IMG SRC="button.gif" border="0"></A> <A HREF="#" onClick="changeImage(2.png')" ><IMG SRC="button.gif" border="0"></A> <A HREF="#" onClick="changeImage(3.png')" ><IMG SRC="button.gif" border="0"></A> <TABLE BORDER="0"> <TR> <TD>ボタンを押すと下に画像が表示されます。</TD> </TR> <TR> <TD><IMG SRC="1.png"></TD> </TR> </TABLE> </BODY> </HTML> 原因を私なりに考えたところ、設定した変数mageUrlをボタンを表示させるために使った<img src="button.gif">で受け取ってしまっているというのはわかりました。（確認のため <IMG SRC="1.png"> を<A HREF>～</A>より上に持ってきたら思っていた動きになりました。） けれどそれからどう修正したらもとの順番でもちゃんと動くのかがわかりません。過去ログの似た質問も拝見したのですが、今の自分では理解できませんでした‥。すみませんがよろしくお願いいたします。
- ベストアンサー
- JavaScript
- カーソルを重ねたときのボタン
<input Style="background-color:#00ff00; color:#ffffff; border-style:solid; border-color:#ffffff; border-width:0 2;" type="button" value="メルマガ" onclick="javascript:window.location.href='URL'" title="ボタンです。クリックしてね"> ■デザイン「ボタン」の作り方を知りましまた。^^ でも、カーソルを乗せたただけでは、なにも変わらないので、 「ポタン」なのかどうか、文中などにあると、「ボタン」だと気がつきにくいです。 質問です。 デザイン「ボタン」の場合に、カーソルを乗せた(重ねた)とき、なんでもいいのですが、背景でも、文字でもいいのですが、「色」変わりませんか? やり方がありましたら教えてください。お願いいたます。 (ちなみに、今は、title="ボタンです。クリックしてね の方法くらいしか思いつかないのですが、これ以外で。。。)
- ベストアンサー
- JavaScript
- プルダウンメニューの表示
+のgifをクリックすると-のgifと詳しい表示が出る様にHTMLを書いたのですが、 表示された後で閉じると、その+のgifが再表示されません。 何が足りなくてそうなってしまうのでしょうか？ また、親メニューの+が-になっている時、gifの-を表示させる方法を教えてやって下さい…。 よろしくお願いします。 <body bgcolor="#000000" text="#ffffff" link="#000000" alink="#808080" vlink="#ff0000"> <div id='div1' style="position:absolute; left:10; top:100; width:250;"> <a id="menu1" href="#" onClick="onmenu(this,'menu11');return false" style="text-decoration:none;"> <img src="p.gif" alt="+" border="0"></a><font size="+2">BBS</font> <div id="menu11" style="position:absolute; left:-2; top:16; visibility:hidden;"> ├<a href="http://…" target="_top" style="text-decoration:none;"> <img src="m.gif" alt="-" border="0"></a> aBBS<br> ├<a href="http://…" target="_top" style="text-decoration:none;"> <img src="m.gif" alt="-" border="0"> </a> bBBS<br> └<a href="http://…" target="_top" style="text-decoration:none;"> <img src="m.gif" alt="-" border="0"></a> cBBS </div></div></div> </body>
- ベストアンサー
- HTML
- imgの下に余白が出来てしまう
1週間位悩んでいますが、わかりません。 どなたか助けてください。 下のようなHTMLを書いています。 <table border="0" cellspacing="0" cellpadding="0"> <tr><td><img src="img/head.bmp" border="0"></td></tr> </table> で、画像の上下左右に余白が出来ると困るのですが、 下側だけに3～4dot程度の余白が出来てしまいます。 ちなみに、画像のサイズは762x63dotです。 試しに <tr height="90"><th valign="bottom"> <img border="1" ... とやると、画像がテーブルの中で下の方に配置されますが、やっぱり下に3～4dot程度の余白ができます。 また、余白はimgのborderの外側にあります。 どうか、宜しくお願いいたします。
- ベストアンサー
- HTML
- HTML <td></td>タグ セル内余白を無くす方法
次の様なプログラムで画像(a.gif 30x30ピクセル)を表示させると、画像とセル枠線との上下の間に余白ができる。この余白を無くす方法？ <table border="1"> <tr><td rowspan="2"><img src="a.gif"></td><td><br></td></tr> <tr><td rowspan="2"><img src="a.gif"></td></tr> <tr><td rowspan="2"><img src="a.gif"></td></tr> <tr><td rowspan="2"><img src="a.gif"></td></tr> <tr><td><br></td><td> </table> テーブル内を２列にして、画像を縦方向に画像高さの半分だけズラして表示したい。 セル結合をしないで、ごく普通に２行２列にすると画像とセル枠との間には余白が生じない。 セル結合した場合に生ずる余白を無くす方法を教えて下さい。エディタは「メモ帖」、ＯＳはWinXP、ブラウザはInternet Explorer６です。
- ベストアンサー
- ホームページ作成ソフト
お礼
ありがとうございます。無事に解決しましたー（*^ワ^*） >value値の視覚的表示は無効になるブラウザがほとんど altとtitleをつけるんですねー。 こちらのほうがイメージにカーソルを合わせるとテキストが付くので良いです。 色々とありがとうございます。また何かありましたらよろしくお願いします。