マンガでよめる痔のこと・薬のこと

ホームページで、ボタンを横に3つ等間隔に、適度な余白をもって並べ、
さらにその3つがちょうどページの中央に表示されるようにしたいです。
cssをどのように記述すればいいですか?
↓下記のようなイメージにしたいです。

--------------------
--------------------
    □ □ □  ←これがボタンです


↓htmlファイルです↓
<div class="button">
<input type="submit" value="<< 戻る <<" />
</div>

<div class="button">
<input type="submit" value="選択リセット" />
</div>

<div class="button">
<input type="submit" value=">> 進 む>>" />
</div>

↓CSSファイルです↓
div.button {
padding-right:35px;
float:left;
}

上記設定で、ボタンの左右間隔はいい感じにあいたのですが
全体的に左に寄ってしまってます。

よろしくお願いいたします。

このQ&Aに関連する最新のQ&A

A 回答 (7件)

<div class="button">


<input type="submit" value="<< 戻る <<" />
<input type="submit" value="選択リセット" />
<input type="submit" value=">> 進 む>>" />
</div>

div.button {
text-align:center;
}
div.button input {
margin: 0px 20px;
}
    • good
    • 6
この回答へのお礼

ありがとうございます!

これだとボタンとボタン間隔が設定できませんよね?

そのあたりで悩んでいます。

お礼日時:2013/08/05 10:51

<body>


<div style = "text-align:center">
<input type="submit" value="<< 戻る <<" />
<span style="margin-left:100px"><input type="submit" value="選択リセット" /></span>
<span style="margin-left:100px"><input type="submit" value=">> 進 む>>" /></span>
</div>
</body>

とりあえず適当に書きました。インデントきると改行でおかしくなるので、つけてません。
はっつけて実行してみてください。
    • good
    • 3
この回答へのお礼

ありがとうございます!
<span
↑このやりかたもありますね。
勉強になります。
ありがとうございました!

お礼日時:2013/08/05 13:21

#3です。


>これだと、ボタン同士の間隔は設定できませんよね?
えっと……「適度」ってのがどれくらいなのかはあなたしか知らないので「marginで調節してください」って書いたんですけど。
思ったことをそのまま投稿する前に一度試すようにしてもらいたいものです。
    • good
    • 2
この回答へのお礼

ありがとうございます!

お礼日時:2013/08/05 13:20

> これだとボタンとボタン間隔が設定できませんよね?



ボタンのマージン(div.button input { margin: 0px 20px; } の部分)で調整できます。
    • good
    • 1
この回答へのお礼

大変失礼しました!
div.button input
↑見落としていました・・・。
理想の配置ができました。
ありがとうございました!

お礼日時:2013/08/05 13:19

★HTMLをデザインのために書かない!!!これ最も大事な事です。

検索エンジンもナビゲーションとして理解してくれません。
 先でデザイン変えたくなったとき、困るのは自分です。

[HTML]タブの代わりに全角スペースでインデントさせています。
<div class="header">
 <div class="nav"><!-- divはclass名やidで文書構造を示すためのもの -->
  <ol>
   <li><a href="/">Top</a></li>
   <li><a href="./p4.html">Prev</a></li>
   <li><a href="./p6.html">Next</a></li>
   <li><a href="./appendix">Appendix</a></li>
  </ol>
 </div>
</div>
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』

 その文書構造に基づいてスタイルシートで
(注)フロートを使うとブラウザやウィンドウサイズによって崩れる

スタイルシート
div.header div.nav{/* headerDIV内のnavDIV */
text-align:center;
line-height:1.8em;
}
div.header div.nav ol,div.header div.nav ol li{
list-style:none;
text-align:center;
margin:0;padding:0;
}
div.header div.nav ol li{
width:22%;
display:inline-block;
margin:3px;
}
div.header div.nav ol li a{
background-color:white;
display:block;
width:100%;height:100%;
border:outset 4px silver;
border-radius:8px;
text-decoration:none;
}
div.header div.nav ol li a:hover{
background-color:yellow;
}
div.header div.nav ol li a:active{
border-style:inset;
}

参考
ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HT … )
    • good
    • 0
この回答へのお礼

ありがとうございます!

いくら細かく設定したところで、
そのページを見るブラウザや設定によって見え方が変わってしまうのは重々承知なのですが・・・
そのまま書くと、どうもボタンどうしの余白がせまいのが気になってしまってます。

ありがとうございました!

お礼日時:2013/08/05 10:55

<input />はインライン要素だからわざわざ<div>でfloatとかしなくていいです。

並べて書けば横に並びます。
うろ覚えとかコピペじゃなく、ちゃんと理解しないとそういう無駄なことをしてしまいますので、講座サイトでいいですからきちんと確認しましょう。

で、インラインなので中央寄せは
text-align:center
でできますよね。
三つのボタンを囲うボックスに設定すればそれでセンタリングできます。

「適度な余白」についてはあなたのさじ加減なのでこちらでは何もいえません。
marginでお好みで調整してください。
    • good
    • 0
この回答へのお礼

ありがとうございます!
これだと、ボタン同士の間隔は設定できませんよね?

そのあたりで悩んでいます。

お礼日時:2013/08/05 10:53

全体を<div style = "align:center"></div>で囲んでしまうか、


個人的には嫌いなのですが、<center>タグで囲んでしまうとか、どうでしょうか?
    • good
    • 0
この回答へのお礼

ありがとうございます!
これだと、ボタン同士の間隔は設定できませんよね?

そのあたりで悩んでいます。

お礼日時:2013/08/05 10:52

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qボタンを横に並べて表示させる方法

<input type="button"> ←このボタンを、並べて表示させるにはどうしたら良いでしょうか? (tableは使わない方法で) よろしくお願いいたします

Aベストアンサー

ソースをください。

inputはインライン要素なので改行は入らないです。

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

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

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

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

Aベストアンサー

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

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

#1、#3です。

><asp:Button></asp:Button>タグは
>HTMLの<Button></Button>に変換されたかたちで
ご提示のソースはご説明とちょっと違うようですが、
試みに<asp:Button ~~ />を<button ~~>実行</button>のように変換したHTMLファイルを作って表示してみると、かなり離れて表示されます。
(windows: IE6 FireFox3.5 Opera10)

#3にも書きましたが、タグ名で指定するよりは必要な要素を限定できる指定方法のほうがよろしいかと思います。
ご提示の場合はtable内にあるので、tdにclass指定して...続きを読む

QHTMLフォームのSELECTの幅を一定にするためには?

HTMLフォームのSELECTの幅を一定にするためにはどのようにすれば
いいのでしょうか?

CSS等で設定できるとありがたいのですが、やり方がわかりません。

Aベストアンサー

<select style="width: 200px">

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか?
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、3つ以上なら
別途function化したほうが、可読性が高くなると
思います。

Qテーブル内の文字サイズを変更したい。

HTMLのテーブル内の文字サイズを変更したいのですが。
イマイチ上手くいかずに悩んでいます。
出来れば全体的に<TABLE></TABLE>のほうでいじれますか?
<TD>タグや<TR>タグのところでいじくるのですか?

Aベストアンサー

いろいろやり方はありますが
文字単位でサイズを変更するには
#2の方法ですね。

テーブルごとやセル(<TD>)ごとにサイズを変更するには
スタイルシート(CSS)を使用します。

テーブルごとにサイズを変更する場合
<TABLE style="font-size : 20px;">

セル(<TD>)ごとにサイズを変更する場合
<TD style="font-size : 20px;">あああ</TD>

#1の方法だとページ内の全てのセル(<TD>)に設定することになります。

スタイルシート(CSS)はこれら以外にも
いろいろな設定方法があります。

Qform input テキストを上下中央に表示したい

お世話になります

フォームのテキストボックスに表示する文字(value)を「上下左右中央」にしたいのですが
「上下中央」ができずに困っています(IE6、firefox) ※safari3では中央になりました

以下のhtmlを書いています。
paddingやverticalなど試してみたのですが…
(buttonのvertical-align:bottom;は、これが無いと上へズレてしまうので、書きました。
 これも意味がわかりません。。)

とても基本的なことなのですが
検索しても解決策を見つけられませんでした。よろしくお願いします。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style><!--

form input {
margin-bottom:10px;
color:#fff;
border:none;
font-size:12px;
}

form input.mlmg-text {
width:150px; height:26px;
background-color:green;
padding:2px 5px;
text-align:center;
vertical-align:center;
}

form input.mlmg-buttton {
width:50px; height:30px;
color:#fff; background-color:blue;
vertical-align:bottom;
}
--></style>
</head>

<body>
<form method="post">
<input type="text" class="mlmg-text" name="user_mail" value="上下中央に配置したい"><input type="button" class="mlmg-buttton" name="join" value="GO"><br />
<input type="text" class="mlmg-text" name="user_mail_resign" value="上に寄っちゃう"><input type="button" class="mlmg-buttton" name="resign" value="GO">
</form>
</body>
</html>

お世話になります

フォームのテキストボックスに表示する文字(value)を「上下左右中央」にしたいのですが
「上下中央」ができずに困っています(IE6、firefox) ※safari3では中央になりました

以下のhtmlを書いています。
paddingやverticalなど試してみたのですが…
(buttonのvertical-align:bottom;は、これが無いと上へズレてしまうので、書きました。
 これも意味がわかりません。。)

とても基本的なことなのですが
検索しても解決策を見つけられませんでした。よろしくお願いします。

...続きを読む

Aベストアンサー

少々マークアップから変えてみましたが、以下のサンプルで検証したところ、IE6/7、Firefox2/3、Safari3、Opera9.61等での結果はほぼ同じになりました。
----------------------------------------------------------------------
【サンプル】
----------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>サンプル</title>
<style type="text/css">
<!--
ul.hoge {
list-style: none;
margin: 0;
padding: 0;
}
ul.hoge li {
zoom: 100%;
margin-bottom: 10px;
}
ul.hoge li:after {
display: block;
clear: left;
height: 0;
visibility: hidden;
content: "";
}
ul.hoge input {
float: left;
margin: 0;
padding: 0;
text-align: center;
line-height: 100%;
border: none;
color: #fff;
font-size: 12px;
}
ul.hoge input.mlmg-text {
width: 150px;
height: 1em;
padding: 0.5em;
background-color: green;
}
ul.hoge input.mlmg-buttton {
width: 50px;
height: 2em;
background-color: blue;
}
-->
</style>
</head>

<body>

<form method="post" action="#">
<ul class="hoge">
<li><input type="text" class="mlmg-text" name="user_mail" value="上下中央に配置したい" /><input type="button" class="mlmg-buttton" name="join" value="GO" /></li>
<li><input type="text" class="mlmg-text" name="user_mail_resign" value="上に寄っちゃう" /><input type="button" class="mlmg-buttton" name="resign" value="GO" /></li>
</ul>
</form>

</body>
</html>
----------------------------------------------------------------------
ポイントは以下の様な点です。

・inputをulの子要素としてマークアップ(内容を見たところ、送信ボタンのリストの様ですので)。
・inputの余白や行の高さ等を初期化して、textタイプとbuttonタイプのベースのスタイルを揃える。
・inputをfloatで横並びにさせるので、親要素のliで回り込み状態をクリア。
・textタイプとbuttonタイプの高さを揃える。高さは相対的に計算ができる様にemで指定。
buttonタイプの場合は描画領域の高さに対して自動的にセンタリングされるので2emとし、textタイプの場合は要素(valueの値の文字部分)の高さを1emと考え、残りの1emを半分づつ上下paddingとして追加。

いかがでしょうか?

※今回の場合、"vertical-align: middle;"はinputの描画領域(ボックス)とvalueの値の文字部分との位置関係を示すものではないので、実現したいスタイルの為に適切なプロパティではありません。

少々マークアップから変えてみましたが、以下のサンプルで検証したところ、IE6/7、Firefox2/3、Safari3、Opera9.61等での結果はほぼ同じになりました。
----------------------------------------------------------------------
【サンプル】
----------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" ...続きを読む

Qテーブル内の文字列を改行させたい

<TABLE border="1">
<tr> <TD>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</TD>
</tr>
</TABLE>

これを、ある一定の幅を指定して改行させたいのですが、
CSSを使おうが使わず指定しようが、反映されません。
全角文字だと反映されます。

IE6、IE7で対応させたいと思っています。

CSSでも何でも良いので、どうすれば対応出来るのか
ご教示下さい。

Aベストアンサー

英数半角文字だと、続けて入力した場合、一つの単語とみなして禁則処理をしてしまうんだと思います。
なので、<br>で改行するのがいいのかと思いますが、
IEで対応したいということなので、IE7で動作するかはわかりませんが、
word-break:break-all;
の指示で単語の切れ目を無視して改行してくれると思います。

参考URL:http://www.htmq.com/style/word-break.shtml

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Qリンクをクリックした時にformからPOST送信したい。

HTML、PHP、JavaScript等でサイトを作っているのですが・・・。

【実現出来ている例】
<form name="form1" method="post" action="Next.php" onSubmit="return InputCheck()">
 <input type="submit" value="送信">
</form>
 submitボタンを一つ置いて、それがクリックされた場合に
formの内容をPOSTで送信する。

【実現したい例】
<form name="form1 method="post">
 <a href="Next.php" onClick="???">???</a>
</form>
 formの中のリンクをクリックされた場合に、formの内容を
POSTで送信したいのですが、その実現方法がわかりません。
GETで送るという手もあり得ますが、今回はどうしてもPOST
したいのですが。

Aベストアンサー

<form name="form1" method="post" action="Next.php">
<a href="#" onClick="document.form1.submit();">???</a>
</form>

onclick内の対象がform1としてあてているので、
アンカータグは別にform内に記述しなくても大丈夫です

form内にhidden等でnameとvalueを持ったパラメータがあればそれも送られます

アンカータグから動的にvalueを変更したい場合は、
document.form1.hogename.value = 'hoge';
等をsubmit()の前に行えば可能です

ただしform内に
<input type="hidden" name="hogename" value="">
を記述する等、変更先パラメータの元を用意する必要がありますのでご注意下さい

QINPUTのボタン周囲のスペース

htmlページでINPUTのボタンを設置していますが、ボタン内部はWIDTHで余白を無くすことができますが、ボタンの両サイドに発生するスペースをなくす、または調整する方法はないでしょうか?
そのスペースが非常に邪魔で困っています。。

Aベストアンサー

inputは、インライン要素なので、一定の間隔はあきます。
スタイルシートで、ブロックにしてからmarginを0にして、floatで並べ替えるとか。表中のセルに置くなら、border:none;にすればよいのでは?


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング