スペースの取り方について

解決済

質問者：masy0312
質問日時：2009/10/22 09:59
回答数：6件

お世話になります。さっそく質問させていただきます。

Web画面の作成をしておりますが、
フォームに2つのボタンを配置し、２つのボタンの間にスペース(間隔)を設けたい場合は、どのような記述をすればよいでしょうか？

初歩的な質問で申し訳ないのですが、
ご教授願えますか？

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (6件)

ベストアンサー優先
最新から表示
回答順に表示

No.4ベストアンサー

回答者： fujillin
回答日時：2009/10/22 19:42

#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で指定しても、要素の属性指定で行っても可能）

どのような指定方法が適切なのかは、全体のページ構成とレイアウトがどのように決められているのかによって判断されるものと思います。

- 0
- 件

通報する

No.6

回答者： kalkichi
回答日時：2009/10/23 10:06

実際に最終的にブラウザに出力されたソースを見ればわかるとASP.NETの<asp:Button～で出力されるタグは <input type="button"～　です。

なので、スタイルの指定はform input {　～　となります。
ただしこれでは、テキストボックスもチェックボックスも全て影響を受けますのでCssClassプロパティで限定する必要があります。

例）
<asp:Button～ CssClass="button" ～/>

CSS側
form input.button { margin-right:2em; }

- 1
- 件

通報する

No.5

回答者： dell_OK
回答日時：2009/10/23 09:41

２つのボタンの間に全角スペースを入れるとか、

<td></td>を３つに分けて、１つめと３つめにボタンを入れて、２つ目の幅で調整するとか、
そんなのではだめでしょうか。

- 1
- 件

通報する

No.3

回答者： fujillin
回答日時：2009/10/22 11:26

#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/

この回答への補足

>ASP.NETはわかりませんが、それから生成されるHTMLはどのようになる>のでしょうか？（ご質問の対象はブラウザ上での表示ですよね？）
>
はい、ブラウザ上に表示させます。
ASP.NETでは、Form上にボタンを配置すると、<asp:Button></asp:Button>タグが使用されます。

但し、
Webサーバ側で処理された結果、
<asp:Button></asp:Button>タグは
HTMLの<Button></Button>に変換されたかたちで
クライアント側のブラウザに表示される仕組みです。

補足日時：2009/10/22 13:19

通報する

- 0
- 件

通報する

No.2

回答者： pasocom
回答日時：2009/10/22 10:13

ご質問の意味が少々不明です。

「フォームに2つのボタンを配置し、」とのことですが、フォームとは文字入力のための入力スペース（窓）かと思います。そこにボタンを配置するとは・・・？。
また、ボタンとは画像ですか。それとも、<input type="button">で生成されるボタンのことですか。

- 0
- 件

通報する

No.1

回答者： fujillin
回答日時：2009/10/22 10:10

一例です。

（他にも方法はいろいろ）

<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>

- 0
- 件

通報する

この回答へのお礼

早々のご回答ありがとうございます。

補足ですが、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>
--------------------------------------------------

上記内容で実行しましたが、現状は変化なし(２つのボタンがくっついて表示される状態)です。。。。