- ベストアンサー
スペースの取り方について
お世話になります。さっそく質問させていただきます。 Web画面の作成をしておりますが、 フォームに2つのボタンを配置し、２つのボタンの間にスペース(間隔)を設けたい場合は、どのような記述をすればよいでしょうか？ 初歩的な質問で申し訳ないのですが、 ご教授願えますか？
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
#1、#3です。 ＞<asp:Button></asp:Button>タグは ＞HTMLの<Button></Button>に変換されたかたちで ご提示のソースはご説明とちょっと違うようですが、 試みに<asp:Button ～～ />を<button ～～>実行</button>のように変換したHTMLファイルを作って表示してみると、かなり離れて表示されます。 （windows: IE6 FireFox3.5 Opera10) ＃3にも書きましたが、タグ名で指定するよりは必要な要素を限定できる指定方法のほうがよろしいかと思います。 ご提示の場合はtable内にあるので、tdにclass指定してあげるとかすればいけるでしょう。 あるいは、直接buttonにclass指定をするか、そのidを利用するとか。 tableの他の部分の構成がご提示のソースだけではわかりませんが、1つのセルに入れないで <td><button>～</button></td> <td><button>～</button></td> みたいにしてtdにwidthを設定することでも可能ですよね。 （CSSで指定しても、要素の属性指定で行っても可能） どのような指定方法が適切なのかは、全体のページ構成とレイアウトがどのように決められているのかによって判断されるものと思います。
その他の回答 (5)
- kalkichi
- ベストアンサー率64% (22/34)
実際に最終的にブラウザに出力されたソースを見ればわかるとASP.NETの<asp:Button～で出力されるタグは <input type="button"～ です。なので、スタイルの指定はform input { ～ となります。 ただしこれでは、テキストボックスもチェックボックスも全て影響を受けますのでCssClassプロパティで限定する必要があります。 例） <asp:Button～ CssClass="button" ～/> CSS側 form input.button { margin-right:2em; }
- dell_OK
- ベストアンサー率13% (766/5721)
２つのボタンの間に全角スペースを入れるとか、 <td></td>を３つに分けて、１つめと３つめにボタンを入れて、２つ目の幅で調整するとか、 そんなのではだめでしょうか。
- fujillin
- ベストアンサー率61% (1594/2576)
#1です。 #1はあくまでもCSSの例としてあげたものです。 通常はタグ名で指定すると、他の同じタグもすべて同じスタイルになってしまうので、特定するためにclassやidも利用して指定しています。 ASP.NETはわかりませんが、それから生成されるHTMLはどのようになるのでしょうか？（ご質問の対象はブラウザ上での表示ですよね？） 補足を見るとtableの中に入れているようですが、<button>要素が生成されているのでしょうか？ 以下あたりをご参考になさってください。 http://www.htmq.com/style/index.shtml http://www.scollabo.com/banban/ref/css.html http://www.tohoho-web.com/css/index.htm http://hp.vector.co.jp/authors/VA022006/css/
- pasocom
- ベストアンサー率41% (3584/8637)
ご質問の意味が少々不明です。 「フォームに2つのボタンを配置し、」とのことですが、フォームとは文字入力のための入力スペース（窓）かと思います。そこにボタンを配置するとは・・・？。 また、ボタンとは画像ですか。それとも、<input type="button">で生成されるボタンのことですか。
- fujillin
- ベストアンサー率61% (1594/2576)
一例です。（他にも方法はいろいろ） <html> <head> <style type="text/css"> form button { margin-right:2em; } </style> </head> <body> <form> <button type="button">button1</button> <button type="button">button2</button> <form> </body> </html>
お礼
早々のご回答ありがとうございます。 補足ですが、ASP.NETにおける.aspxファイル(画面デザイン用ファイル) の中での話になります。(失礼しました。) 現在は、以下のような記述をしています。 ------------------------------------------------- <html> <head> <style type="text/css"> form button { margin-right: 10em; } </style> </head> <body> <form> <table cellpadding="0" cellspacing="0" width="100%"> <tr> <td align="center"> <asp:Button ID="btn_実行" runat="server" Text="実行" TabIndex="-1" Height="35px" Width="76px" /> <asp:Button ID="btn_戻る" runat="server" Text="戻る" TabIndex="-1" Height="35px" Width="76px" /> </td> </tr> </table> <form/> </body> </html> -------------------------------------------------- 上記内容で実行しましたが、現状は変化なし(２つのボタンがくっついて表示される状態)です。。。。
補足
>ASP.NETはわかりませんが、それから生成されるHTMLはどのようになる>のでしょうか？（ご質問の対象はブラウザ上での表示ですよね？） > はい、ブラウザ上に表示させます。 ASP.NETでは、Form上にボタンを配置すると、<asp:Button></asp:Button>タグが使用されます。 但し、 Webサーバ側で処理された結果、 <asp:Button></asp:Button>タグは HTMLの<Button></Button>に変換されたかたちで クライアント側のブラウザに表示される仕組みです。