中央に等間隔なボタンを配置する方法とは？
- ホームページで複数のボタンを横に3つ等間隔に配置し、さらに中央に表示する方法について教えてください。
- 提供されたHTMLとCSSを使用してボタンを配置すると、全体的に左に寄ってしまっています。どのように修正すればいいでしょうか？
- 要約文3つ
- ベストアンサー
複数のボタンを等間隔に、かつ中央に配置する
ホームページで、ボタンを横に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; } 上記設定で、ボタンの左右間隔はいい感じにあいたのですが 全体的に左に寄ってしまってます。 よろしくお願いいたします。
- masunona
- お礼率93% (244/261)
- HTML
- 回答数7
- ありがとう数7
- みんなの回答 （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; }
その他の回答 (6)
- s806099d
- ベストアンサー率34% (17/49)
<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> とりあえず適当に書きました。インデントきると改行でおかしくなるので、つけてません。 はっつけて実行してみてください。
お礼
ありがとうございます！ <span ↑このやりかたもありますね。 勉強になります。 ありがとうございました！
- play_with_you
- ベストアンサー率37% (112/301)
#3です。 ＞これだと、ボタン同士の間隔は設定できませんよね？ えっと……「適度」ってのがどれくらいなのかはあなたしか知らないので「marginで調節してください」って書いたんですけど。 思ったことをそのまま投稿する前に一度試すようにしてもらいたいものです。
お礼
ありがとうございます！
- t_ohta
- ベストアンサー率38% (5071/13248)
＞ これだとボタンとボタン間隔が設定できませんよね？ ボタンのマージン（div.button input { margin: 0px 20px; } の部分）で調整できます。
お礼
大変失礼しました！ div.button input ↑見落としていました・・・。 理想の配置ができました。 ありがとうございました！
- ORUKA1951
- ベストアンサー率45% (5062/11036)
★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-html401j/struct/global.html#h-7.5.4 )』 その文書構造に基づいてスタイルシートで (注)フロートを使うとブラウザやウィンドウサイズによって崩れる スタイルシート 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/HTML/nav/navigation1.html )
お礼
ありがとうございます！ いくら細かく設定したところで、 そのページを見るブラウザや設定によって見え方が変わってしまうのは重々承知なのですが・・・ そのまま書くと、どうもボタンどうしの余白がせまいのが気になってしまってます。 ありがとうございました！
- play_with_you
- ベストアンサー率37% (112/301)
<input />はインライン要素だからわざわざ<div>でfloatとかしなくていいです。並べて書けば横に並びます。 うろ覚えとかコピペじゃなく、ちゃんと理解しないとそういう無駄なことをしてしまいますので、講座サイトでいいですからきちんと確認しましょう。 で、インラインなので中央寄せは text-align:center でできますよね。 三つのボタンを囲うボックスに設定すればそれでセンタリングできます。 「適度な余白」についてはあなたのさじ加減なのでこちらでは何もいえません。 marginでお好みで調整してください。
お礼
ありがとうございます！ これだと、ボタン同士の間隔は設定できませんよね？ そのあたりで悩んでいます。
- s806099d
- ベストアンサー率34% (17/49)
全体を<div style = "align:center"></div>で囲んでしまうか、 個人的には嫌いなのですが、<center>タグで囲んでしまうとか、どうでしょうか？
お礼
ありがとうございます！ これだと、ボタン同士の間隔は設定できませんよね？ そのあたりで悩んでいます。
関連するQ&A
- html css 検索ボタン 検索窓 余白
検索ボタン、検索窓のＨＴＭL，ＣＳＳについての質問をさせていただきます。 どこかから引っ張ってきた検索ボタン・検索窓のＨＴＭLを自分のサイトに埋め込んでみたら、bottomにけっこう広い邪魔な余白ができてしまいます。 padding,margin,valign...など、持ってる知識をふりしぼりましたが改善されません。その記述内容は以下の通りです。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <table> <tr><td> <div> <form action="http://search-web.○○○○○.○○/cgi-bin/search" name="form" id="form" onsubmit=" return f_submit(); "> <input name="site" value="○○○○○.○○" type="hidden"> <input name="query" value="○○○○○" maxlength="300" type="text" class="cw"> <input value="検索" class="button" type="submit"> </form> </div> </td></tr> </table> ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 上記内容を書かない場合は高さ・余白の調節ができるのですが、書き込むと何もできず、下部に余白がかなりできてしまいます。 heightで高さを指定しても改善されません。 １．何か原因があるのか教えてください。 ２．また、良い記述内容、改善策を教えてください。 ３．全てのブラウザで同じように表示できる記述内容があれば教えてください。 初歩的な質問かもしれませんが、困ってますのでどうぞよろしくお願いします。
- 締切済み
- HTML
- 2度押し防止ボタン
HTML5 + CSS3 でスマートフォンゲームを作っています。 回線が混雑している状況でボタンを2度押ししても1回しかカウントされないボタンを作りたいと考えています。 【基本的な知見】 下記であれば要望に沿ったボタンになります。(ボタンはCSS3の標準ボタンを使用) <form action="form.cgi" method="post"> <input type="hidden" name="point" value="1" /> <SCRIPT TYPE="text/javascript"> <!-- //submitの2度押し防止 function disableButton(){ document.form1.button1.disabled = true; submitForm(); } function submitForm(){ document.form1.submit(); } // --> </SCRIPT> <input type="button" value="購 入" onClick="disableButton()" name="button1"> </form> 【やりたいこと】 「ボタンに数量を表示したいことと、ボタン上の数値表記とCGIに渡すvalueが異なることがある」ため、CSS3の標準ボタンを止め下記のオリジナルCSSのボタンを使用します。 <button class="button8" type="submit" name="point" value="1050" onClick="disableButton()"><div>50ポイント</div></button> このオリジナルCSSのボタンを使用した場合の2度押し防止のjavascriptはどのように改造すればいいか教えてください。 上記に示したjavascriptの 「document.form1.button1.disabled = true;」のbutton1をpointに変更したところ、数値をCGIに渡せませんでした。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- 複数ボタンを制御出来る2度押し防止ボタン
HTML5+CSS3でゲームを作っています。 フォームがあり、ボタンが複数並んでいます。 <SCRIPT TYPE="text/javascript"> <!-- function sendform(){ submitForm(); } function submitForm(){ document.form1.submit(); } // --> </SCRIPT> <FORM action="buy.cgi" method="post" name="form1" id="form1"> <button class="button8" type="submit" name="d4_buy" value="300 onclick="sendform()">300購入</button> <button class="button8" type="submit" name="d4_buy" value="400" onClick="sendform()">400購入</button> </FORM> 上記で正常に作動しますが、3G環境など通信状態の悪い時に、「300購入ボタンを押した直後に400購入ボタンを押す」と700購入が出来てしまいます。 【希望事項】 2つのボタンを連続して押しても2つ目が無効になるようにしたいというのが希望です。 ネットで調べたところ ****************************************** http://okwave.jp/qa/q627484.html ****************************************** <HTML><BODY> <FORM method="get" action="http://www.google.com/search"> <INPUT type="submit" value="submit1" onclick="this.form.q.value=this.value;this.disabled=true;this.form.submit()"> <INPUT type="submit" value="submit2" onclick="this.form.q.value=this.value;this.disabled=true;this.form.submit()"> <INPUT type="hidden" name="q" value="" > </FORM></BODY></HTML> ****************************************** という例があったため、この例に従って <SCRIPT TYPE="text/javascript"> <!-- function sendform(){ submitForm(); } function submitForm(){ document.form1.submit(); } // --> </SCRIPT> <FORM action="buy.cgi" method="post" name="form1" id="form1"> <button class="button8" type="submit" value="300 onclick="this.form.q.value=this.value;this.disabled=true;this.form.sendform()">300購入</button> <button class="button8" type="submit" value="400" onclick="this.form.q.value=this.value;this.disabled=true;this.form.sendform()">400購入</button> <INPUT type="hidden" name="d4_buy" value="" > </FORM> としてみたのですが、うまく数値の引き渡しが出来ません。(NULL となります) どのように改造すればいいか教えてください。 よろしくお願いいたします。
- 締切済み
- JavaScript
- 中央に配置
CSSで下記の各タグのwidthはパーセントで設定してテキストボックス、ボタン、リンクを中央に配置したいのですがどうしたらいいのでしょうか。 <form id="form1" action="" method="post" name="form1"> <div id="topCouponSearch"> <span class="topCouponSearcha"> <input id="address" class="topCouponSearcha2" type="text" value="（例）住所・駅名・郵便番号・ランドマークを入力" name="address" style="color: #999999;"> <button id="getad">検索</button> <span class="topCouponSearcha3"> <a href="?act=u05">店舗一覧</a> </span> </span> </div> </form>
- 締切済み
- CSS
- ボタンを中央寄せするには？
画面を<div>で左側、中央、右側と3分割して左側には選択済み機能一覧、右側には選択可能な 機能一覧を持ちます。 中央divには「＞＞」ボタンと「＜＜」ボタンを配置して右側の選択可能一覧から選択または 解除を出来るようにしています。 やりたい事は、「＞＞」ボタンと「＜＜」ボタンを水平方向で中央、垂直方向で中央に 配置したいのですが、添付画像の通り水平方向は中央なのですが垂直方向が下側に 配置されてしまいます。 水平方向で中央かつ垂直方向で中央に配置するにはどのようなhtml,cssにすれば良いでしょうか？ css,html抜粋を示します。 アドバイスお願いします。 div.l_list,div.r_list { display: inline-block; width:30%; height:70% ; } div.button_area { display: inline-block; text-align: center; vertical-align: center; width:30%; height:100% ; } select { width:100%; height:100% } <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="ChooseSecondlyRole.css"> <script type="text/javascript" src="ChooseSecondlyRole.js"></script> <title>Choose Secondly Role</title> </head> <body> <div class="wrap"> <div class="cur_role"> <select id="l_select" name="l_select" size="25"> <option value='aa'>aa</option> <option value='admin'>admin</option> <option value='admin-gui'>admin-gui</option> <option value='webdavfs-admin'>webdavfs-admin</option> </select> </div> <div class="button_area"> <div class="button_base"> <div> <input type="button" class="add_button" value="<<" onClick="onClickAdd()" /> </div> <div> <input type="button" class="remove_button" value=">>" onClick="onClickRemove()" /> </div> </div> </div> <div class="selectable_role"> <select id="r_select" name="r_select" size="25"> <option value='aa'>aa</option> <option value='admin'>admin</option> <option value='admin-gui'>admin-gui</option> <option value='bbb'>bbb</option> <option value='guest'>guest</option> <option value='role0101'>role0101</option> <option value='role0102-001'>role0102-001</option> <option value='role0103'>role0103</option> <option value='sdk-soft'>sdk-soft</option> <option value='webdavfs-admin'>webdavfs-admin</option> </select> </div> </div> </body> </html>
- ベストアンサー
- CSS
- formに複数ボタンを配置し、それぞれのボタンに対して、別の複数の値を
formに複数ボタンを配置し、それぞれのボタンに対して、別の複数の値をPHPに受け渡したいのです。 例としは下記のような命令をしたいのですが、どうしても解決策がわかりません。 1.jpgで作成したボタンをクリックすると、textの"コンニチワ"、textの30、1.jpgが1.phpへ送られる。 2.jpgで作成したボタンをクリックすると、textの"コンバンワ"、textの50、2.jpgが1.phpへ送られる。 下記は、一応自分で作成したものです。 ●sample.html <form method="post" action="1.php"> <input name="namae"type="text"value="コンチニワ"> <input name="namae"type="text"value="コンバンワ"><br> <BUTTON type ="submit"name="submit1"> <IMG src="1.jpg"> </BUTTON> <BUTTON type ="submit"name="submit2"> <IMG src="2.jpg"> </BUTTON><br> <input name="price"type="text"value="30"> <input name="price"type="text"value="50"> -------------------------------- 【sample.htmlの希望表示】 namaeテキスト namaeテキスト ボタン画像 ボタン画像 priceテキスト priceテキスト -------------------------------- ●1.php <?php $namae=$_POST['namae'] $kakaku=$_POST['price'] $image=&_POST['image'] ?> もしかしたら、imageについては表示させないテキストに隠して値だけ送るという 手もあるかもしれません。やり方がわかりませんが。
- 締切済み
- PHP
- HTML・CSS ボタンの表示
<div class="item"> <tr> <td><input type="button" value="サンドウィッチ" onclick="get_calc(this)"></td> <td><input type="button" value="おにぎり" onclick="get_calc(this)"></td> <td><input type="button" value="お茶" onclick="get_calc(this)"></td> <td><input type="button" value="お弁当" onclick="get_calc(this)"></td> </tr> </div> ボタンを画面の50％の幅に均一の大きさで表示したです． CSSわかる方，教えてください！お願いします！
- ベストアンサー
- CSS
- input typeでボタンが出現しません
inputで記述してもボタンが出ないです。何がおかしいのでしょうか？ <div class="register"を削除したら出たのですが、書き方が変ですか？ その部分のコードは以下の通りです。 HTML側 <div class="register" <input type="submit" name="registering" value="会員登録（無料)"></div> CSS側 .register{ height:60px; }
- ベストアンサー
- HTML
- submitボタン上の文字とvalue=の数字
CSS3 + HTML5 でゲームを作っています。 Formのsubmitボタンを設置する必要があるのですが、ボタン上に表示する文字とvalue=の文字を分ける必要があります。 <input type="submit" name="point" value="送信する"> 上記では本来であれば数値を入れたいvalue=に、「ボタン上に表示する文字」を入れなければならないため使えません。 <button type="submit" name="point" value="10050">購入する</button> であれば、valueに数値を置き、ボタン上に文字を置けるため当方のニーズに叶うのですが、HTML5上で見るとボタンの大きさが<input type="submit>の3分の1くらいになってしまいます。 従い<button type="submit" name="point" value="10050">購入する</button> のボタンの大きさを変更する方法がわかればいいと思いますが、この方法でなくても構いません。 HTML5上で、当方のニーズに合うボタンを作るためにはどうしたらいいでしょうか?
- ベストアンサー
- HTML
- 複数ボタンのvalueを送れない
ひとつのフォームで複数のボタンを使う方法を探していたら 次のような方法があるとのことでした。 <form method="post" name="MyForm"> <INPUT TYPE="BUTTON" VALUE="aaa" onClick="MyForm.action='hoge.cgi';MyForm.submit();"> <INPUT TYPE="BUTTON" VALUE="bbb" onClick="MyForm.action='hoge.cgi';MyForm.submit();"> </form> これで、ボタンによってVALUEを渡せるのかと思いきや、 飛んでいきませんでした・・・ 複数ボタンを用意して、ボタンによってその VALUE値を渡す方法がありませんでしょうか？
- ベストアンサー
- CGI
お礼
ありがとうございます！ これだとボタンとボタン間隔が設定できませんよね？ そのあたりで悩んでいます。