- 締切済み
HTMLに関する質問
- みんなの回答 （5）
- 専門家の回答
みんなの回答
- key-child
- ベストアンサー率54% (25/46)
HTMLで行うならcenter要素で行うのが妥当なのかな。 また、div要素のalign属性にcenterを設定するのでも同様の処理が行われるよう。 【HTML 4.01仕様書邦訳】配置 http://www.asahi-net.or.jp/~SD5A-UCD/rec-html401j/present/graphics.html#edef-CENTER その際は文書型宣言に注意。Strictでは使えません。 文書型宣言については下記を参照。 【HTML 4.01仕様書邦訳】HTMLバージョン情報 http://www.asahi-net.or.jp/~SD5A-UCD/rec-html401j/struct/global.html#h-7.2 スタイルシートを使えるなら下記のようにするのが妥当。 p { margin: 0 auto; padding: 8px; width: 800px; text-align: center; background-color: #ccc; } input { width: 120px; } <p><input type="submit" value="Aタイプ"><input type="reset" value="Bタイプ"></p> IE6の場合は標準モードでないとセンターに表示されません。 標準モードについては下記を参照。 【TAG index】表示モードについて http://www.tagindex.com/html_tag/basic/doctype.html#t03 質問とは直接関係はないですが、p要素のwidthプロパティについては単位を付けましょう。 800→800px
#3です。 下書きの転記ミスです、最後の行が抜けていました。 </TBODY>の後に</TABLE>を入れて下さい。 失礼しました。 ついでに、ご存知だと思いますが、テーブルの長所ですけどこのリンク行の高さを指定することが出来ます。 TDの中身に高さ要素を加えますと <TD style="text-align:center; height:22px;"> など。
こんばんは。 画面いっぱいに拡がる見えない表を作ってその中にセンタリングさる方法は如何ですか。 ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ <TABLE border="0" width="100%"> <TBODY> <TR> <TD style="text-align:center;"> <P style="padding: 8px; width: 800; background-color:#CCC; "><INPUT type="submit" value="Aタイプ" style="width: 120px"><INPUT type="reset" value="Bタイプ" style="width: 120px"></P> </TD> </TR> </TBODY>
- leap_day
- ベストアンサー率60% (338/561)
<center> <P style="padding: 8px; width: 800; background-color:#CCC;" align="center"> <input type="submit" value="Aタイプ" style="width: 120px"><input type="reset" value="Bタイプ" style="width: 120px"> </P> </center> <div style="text-align:center;"> <p style="padding: 8px; width: 800; background-color:#CCC;" align="center"> <input type="submit" value="Aタイプ" style="width: 120px"><input type="reset" value="Bタイプ" style="width: 120px"> <p> </div> どちらでもできます（＾＾）
- gura_
- ベストアンサー率44% (749/1683)
<center>～</center>で囲うのはだめですか↓ <center> <P style="padding: 8px; width: 800; background-color:#CCC" align="center"> <input type="submit" value="Aタイプ" style="width: 120px"><input type="reset" value="Bタイプ" style="width: 120px"> </P> </center>
関連するQ&A
- htmlでインプットボックスを横並びに表示したい。
ホームページを作成しておりますが、tdの中にinput type="text"にてテキストボックスを4つ作成したいと考えております。 こちらで拝見いたしましたチェックボックスの右側に文字を表示される方法をご参考にさせていただき、下記を作成しましたが、縦並びになってしまいます。 何とかして縦2×横2に置き換えることはできないでしょうか？ ブラウザはIE11を使用しており、コードはVisualStudioCodeを使用しております。 <div style="top : 161px;left : 8px; position : absolute; z-index : 4; width : 847px; height : 252px; " id="Layer5"> <div style="background: white; padding: 10px; margin-bottom: 10px; border: 1px solid #333333"> <table border="1" height="252" width="818"> <tr bgcolor="gray" style="color:white" height="50"> <th height="42" width="92"><b>列1</b></th> <th height="42" width="212">列2・列3<br>列4・列5</th> <th height="42" width="137">列7/列8</th> <th height="42" width="189"><b>列9/列10</b></th> </tr> <tr bgcolor="lightyellow"> <td align="center" height="47" width="92"> <input type="text" name=列1 style="background:white; color:#000000;" align="middle" value="83行目"> </td> <td align="center" height="47" width="312"> <input type="text" name=列2 style="background:white; color:#000000;" align="middle" value="86行目"> <input type="text" name=列3 style="background:white; color:#000000;" align="middle" value="87行目"> <input type="text" name=列4 style="background:white; color:#000000;" align="middle" value="88行目"> <input type="text" name=列5 style="background:white; color:#000000;" align="middle" value="89行目"> </td> <td align="center" height="47" width="137"><input type="text" name=列7 style="background:white; color:#000000;" align="middle" value="92行目"> <span> <input type="text" name=列8 style="background:white; color:#000000;" align="middle" value="93行目"> </span> </td> </div> <td align="center" height="47" width="189"><input type="text" name=列9 style="background:white; color:#000000;" align="middle" value="96行目"> <input type="text" name=列0 style="background:white; color:#000000;" align="middle" value="97行目"> </td> </tr> <tr> <td align="center" height="47" width="92"></td> <td align="center" height="47" width="212"></td> <td align="center" height="47" width="137"></td> <td align="center" height="47" width="189"></td> </tr> </table> </div> </div> 【上記で表示させた場合】 ーーーーー｜ 86行目 ｜ーーーーー｜ ーーーーー｜ 87行目 ｜ーーーーー｜ 96行目 83行目 ｜ 88行目 ｜ 92行目｜ 97行目 ーーーーー｜ 89行目 ｜ーーーーー｜ 【やりたいこと】 ーーーーー｜ーーーーーーーーーー｜ーーーーー｜ ーーーーー｜ 86行目｜87行目 ｜ーーーーー｜ 96行目 83行目 ｜ 88行目｜89行目 ｜ 92行目 ｜ 97行目 ーーーーー｜ーーーーーーーーーー｜ーーーーー｜
- ベストアンサー
- JavaScript
- 入力判定についての質問
フォームから送信ボタンをクリックしたときにテキストが空なら送信画面に表示されませんと表示するプログラムを考えているのですがうまくいきません（行き詰まりました）どなたかヒントになるコードなど教えてほしいです <input type = "button" name="bot"style="WIDTH: 100px; HEIGHT: 30px" VALUE ="ID"><input type="text"name="example" style="WIDTH: 100px; HEIGHT: 30px"value=><br><p> <input type = "button" name="bot"style="WIDTH: 100px; HEIGHT: 30px" VALUE ="パス"><input type="text" name="sample"style="WIDTH: 100px; HEIGHT: 30px" value=><br><p> <%String strAns = request.getParameter("example"); String MyAction = request.getParameter("MySubmit"); %> <% if (MyAction=="Toroku"||strAns==("")){ out.println("未入力です"); } %> <form method="post" action=""> <input type="submit"name="text"style="WIDTH: 100px; HEIGHT: 30px" value="送信"onClick="func('Toroku');" > <input type="reset" style="position:relative;left:100px;WIDTH: 100px; HEIGHT: 30px"value="リセット"> </form> <script language="JavaScript"> function func(MyCommand){ document.MyForm.MySubmit.value=MyCommand; document.MyForm.submit(); } </script>
- ベストアンサー
- Java
- form action ボタンの作り方
form actionでボタンを作っているのですが、 a href リンクではないためか、カーソルを合わせても矢印の表記が変わりません。 具体的には以下のようなコードになっています。 <FORM ACTION="#" METHOD="POST"> <INPUT TYPE="HIDDEN" NAME="aid" VALUE=" "> <INPUT TYPE="HIDDEN" NAME="pt" VALUE=" "> <INPUT TYPE="HIDDEN" NAME="iid" VALUE=" "> <center><INPUT style="width: 200px; padding: 15px 15px; font-size: 1.2em; background-color: #2e2e2e; color: #fff; border-style: none; border-radius: 5px; border-bottom: 3px solid #000;" TYPE="submit" NAME="submit" VALUE=" "></center> </FORM> カーソルを合わせたときに矢印表記が変わるようにするためには、どのようにコードを直せばいいでしょうか。
- 締切済み
- JavaScript
- テーブルの中にiframe
テーブルの中にiframeをしているのですが どうしてもボタンが右側に少しはみ出ますし iframeは縦400pxを超えるページを表示すると 縦スクロールバーが表示されますが それも右側にはみ出ます。 どうにか800pxの中に収まらないものでしょうか？ また、ボタンのボーダを下記ソースでは消していますが デフォルトで表示される立体感のあるボタンのまま 800pxの中に収めたいです。 HTML5、CSS2.1です。 ご相談お願いします。 <table> <tr style="width: 800px; height: 50px"> <td><input type="button" value="1"/></td> <td><input type="button" value="2"/></td> <td><input type="button" value="3"/></td> <td><input type="button" value="4"/></td> <td><input type="button" value="5"/></td> </tr> <tr style="width: 800px; height: 400px"> <td colspan="5" style="width: 800px; height: 400px"> <iframe src="hoge.htm"></iframe> </td> </tr> <tr style="width: 800px; height: 50px"> <td colspan="5" style="width: 800px; height: 50px"> <p>hoge</p> </td> </tr> </table> ------------------------------------------------------------ table { padding: 0px; margin: 0px; border-style: none; border-width: 0px; } tr td { padding: 0px; margin: 0px; border-style: none; border-width: 0px; } input { border-style: none; border-width: 0px; padding: 0px; margin: 0px; color: Red; width: 160px; height: 50px; font-size: 20px; font-family: HGS明朝B; background-color: transparent; } iframe { padding: 0px; margin: 0px; border-style: none; border-width: 0px; background-color: transparent; width: 800px; height: 400px; }
- ベストアンサー
- HTML
- メールフォームについて質問です。
メールフォームについて質問です。 <h3>ご注文ご依頼メール</h3> <span style="font-weight: bold;"></span> <center> <form style="margin-left: 0px; width: 800px;" method="post" action="当方アドレス" enctype="text/plain" name="メールフォーム"><br /> <table style="width: 694px; height: 202px;"> <tbody> <tr> <td style="text-align: center;"><b>お名前</b></td> <td style="width: 599px; text-align: left;"><input size="40" name="name" type="text" /></td> </tr> <tr> <td style="text-align: center;"><b>郵便番号</b></td> <td style="text-align: left;"><input size="20" name="郵便番号" /></td> </tr> <tr> <td style="text-align: center;"><b>ご住所</b></td> <td style="width: 599px; text-align: left;"><input size="80" name="jyusho" type="text" /></td> </tr> <tr> <td style="text-align: center;"><b>お電話番号</b></td> <td style="text-align: left;"><input size="40" name="電話番号" type="text" /> <font color="#ff0000">（記入例）000-0000-0000</font></td> </tr> <tr> </tbody> </table> <br /> ご希望の商品名・数量などをお書き込みください。<br /> <table> <tbody> <tr> <td colspan="2" align="center"><b><font color="#ff00ff">ご記入内容に問題がなければ、送信するのボタンをクリックして下さい。</font></b></td> </tr> <tr> <td style="text-align: center;" colspan="2"> <input value="送信する" type="submit" /> <input value="取り消す" type="reset" /></td> というメールフォームを作ったのですが、送信ができません。 どこが間違っているのでしょうか？ 全くの素人なのでどこが違うのか見当もつきません。 それから、送信後に送信確認ページを表示させたいのですが、どうしたらよろしいでしょうか？
- ベストアンサー
- その他（メールサービス・ソフト）
- 一部スクロール表示が含まれる画面を印刷する方法
ホームページ画面の一部に縦スクロールの設定をしております。 画面上に印刷ボタンを作成し、プリントアウトしたいと考えておりますが、ファイル→印刷と押すと表示された部分のみしか印刷されません。 どなたかご存じでしたらご教示願います。 【HTML】 <div style="top : 161px;left : 8px; position : absolute; z-index : 4; width : 847px; height : 252px; " id="Layer5"> <div style="background: white; padding: 10px; margin-bottom: 10px; border: 1px solid #333333;" class="test"> <table border="1" height="252" width="818"> <tr bgcolor="gray" style="color:white" height="50"> <th height="42" size=10><b>注文日</b></th> <th height="42" width="212">品物・オプション<br>注文先・単価</th> <th height="42" size=10>金額/個数</th> <th height="42" size=20><b>発注者/入力者</b></th> </tr> <% for(var i in content) { %> <tr bgcolor="lightyellow" > <% var obj = content[i]; %> <td align="center" height="47" size="10"> <input type="text" name=注文日 size="10" style="background:white; color:#000000;" align="middle" value="注文日" disabled="disabled"> </td> <td align="center" height="47" width="10" style="white-space:nowrap;" > <input type="text" name=品物 size=4 style="background:white; color:#000000;" align="middle" value="<%= obj.品物 %>" disabled="disabled"> <input type="text" name=option size=1 style="background:white; color:#000000;" align="middle" value="" disabled="disabled"> <input type="text" name=品物2 size=4 style="background:white; color:#000000;" align="middle" value="<%= obj.品物2 %>" disabled="disabled"> <input type="text" name=option2 size=1 style="background:white; color:#000000;" align="middle" value="" disabled="disabled"> <input type="text" name=品物3 size=4 style="background:white; color:#000000;" align="middle" value="<%= obj.品物3 %>" disabled="disabled"> <input type="text" name=option3 size=1 style="background:white; color:#000000;" align="middle" value="" disabled="disabled"><br> <input type="text" name=tyumonsaki size=4 style="background:white; color:#000000;" align="middle" value="<%= obj.order_destination %>" disabled="disabled"> <input type="text" name=単価 size=1 style="background:white; color:#000000; text-align: right;" align="middle" value="<%= obj.単価 %>" disabled="disabled"> <input type="text" name=tyumonsaki2 size=4 style="background:white; color:#000000;" align="middle" value="<%= obj.order_destination2 %>" disabled="disabled"> <input type="text" name=単価2 size=1 style="background:white; color:#000000; text-align: right;" align="middle" value="<%= obj.単価2 %>" disabled="disabled"> <input type="text" name=tyumonsaki3 size=4 style="background:white; color:#000000;" align="middle" value="<%= obj.order_destination3 %>" disabled="disabled"> <input type="text" name=単価3 size=1 style="background:white; color:#000000; text-align: right;" align="middle" value="<%= obj.単価3 %>" disabled="disabled"> </td> <td align="center" height="47" size=10> <input type="text" name=合計金額 size=10 style="background:white; color:#000000; text-align: right;" align="middle" value="<%= obj.合計金額 %>" disabled="disabled"> <input type="text" name=合計数 size=10 style="background:white; color:#000000; text-align: right;" align="middle" value="<%= obj.合計数 %>" disabled="disabled"> </td> <td align="center" height="47" size=20> <input type="text" disabled="disabled" name=発注者 size=20 style="background:white; color:#000000;" align="middle" value="<%= obj.発注者 %>"> <input type="text" disabled="disabled" name=入力者 size=20 style="background:white; color:#000000;" align="middle" value="<%= obj.入力者 %>"> </td> </tr> <% } %> </table> </div> </div> 【CSS】 .test { height: 250px; overflow-y: scroll; }
- 締切済み
- JavaScript
- htmlで行数が増えた場合に自動的に範囲を広げる
現在、ホームページを作成しておりますが、htmlで表示させた場合に一行だけですと画面内に収まりますが、行数が増えていくとその下にあるボタンにかぶさってしまいます。 表示する行数が増えた場合に自動的に下に伸ばす方法はございますでしょうか？ HTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="justsystems:HPB-Input-Mode" content="mode/flm; pagewidth=940; pageheight=1200"> <meta name="GENERATOR" content="JustSystems Homepage Builder Version 20.0.6.0 for Windows"> <title>タイトル</title> <link rel='stylesheet' href='/stylesheets/style.css' /> </head> <body bgcolor="#a9a9a9"> <table border="1" height="252" width="818"> <tr bgcolor="gray" style="color:white" height="50"> <th height="42" size=10><b>注文日</b></th> <th height="42" width="212">注文名/オプション<br>注文先・個数</th> <th height="42" size=10>合計金額/合計個数</th> <th height="42" size=20><b>注文者/入力者</b></th> </tr> ーーーここでテーブルから複数行取得 <% for(var i in content) { %> <tr bgcolor="lightyellow"> <% var obj = content[i]; %> <td align="center" height="47" size="10"> <input type="text" name=注文日 size="10" style="background:white; color:#000000;" align="middle" value="注文日"> </td> <td align="center" height="47" width="10" style="white-space:nowrap;" > <input type="text" name=注文名 size=4 style="background:white; color:#000000;" align="middle" value="注文名"> <input type="text" name=オプション size=1 style="background:white; color:#000000;" align="middle" value="無"> <input type="text" name=注文先 size=4 style="background:white; color:#000000;" align="middle" value="注文先"> <input type="text" name=単価 size=1 style="background:white; color:#000000;" align="middle" value="単価"> <input type="text" name=個数 size=1 style="background:white; color:#000000;" align="middle" value="個数"> </td> <td align="center" height="47" size=10> <input type="text" name=合計金額 size=10 style="background:white; color:#000000;" align="middle" value="合計金額"> <input type="text" name=合計数 size=10 style="background:white; color:#000000;" align="middle" value="合計数"> </td> <td align="center" height="47" size=20> <input type="text" name=注文者 size=20 style="background:white; color:#000000;" align="middle" value="注文者"> <input type="text" name=入力者 size=20 style="background:white; color:#000000;" align="middle" value="入力者"> </td> </tr> <% } %> <div style="width : 468px;height : 16px;top : 486px;left : 441px; position : absolute; z-index : 2; " id="Layer7" align="right"> <input type="submit" value=" 結果 "> <input type="button" value=" キャンセル "> <input type="button" value=" 戻 り "> </div> </form> </div> </body> </html>
- ベストアンサー
- HTML
- HTMLで入力フォームがOS、ブラウザによってサイズが違います。
HTMLで入力フォームがOS、ブラウザによってサイズが違います。 どのOS、ブラウザでも同じサイズで表示したいのですが、上手くいきません。 OS：Windows７ ブラウザ：IE8、Sleipnir、Firefox、Chrome、Opera、Safari 状況：ALL OK OS：WindowsXP ブラウザ：IE8、Sleipnir、Firefox、Chrome 状況：Sleipnirのみフォームの縦のサイズが他と比べて大きいです 詳しく：それぞれのフォームの周りの余白がSleipnirだけ微妙に広いです 画像を添付しました [HTML] 抜粋・省略しました <form action="#" method="post" class="contact"> <table width="405" id="table1"> <tr><th width="75"> 会社名<span style="color : #cc0000; font-size:10px;">(*必須)</span></th> <td width="318" style="padding: 6px 3px;"><input class="text2" type="text" name="name"></td></tr> <tr> ****省略***** <th> 住所</th> <td><input class="text4" type="text" name="zyusyo">（都道府県） <input class="text5" type="text" name="zyusyo">（市区町村） <input class="text5" type="text" name="zyusyo">（町名、番地） <input class="text6" type="text" name="zyusyo">（アパート・マンション名）</td> </tr> ****省略***** </table> </form> [CSS] 抜粋・省略しました .text2 { width: 180px; background-color: #99cccc; padding: 0px; font-size: 12px; height: 15px; border-width: 1px; } .text4 { width: 100px; padding: 0px; background-color: #99cccc; font-size: 12px; height: 15px; margin: 6px 0 3px; border-width: 1px; } .text5 { padding: 0px; height: 15px; width: 180px; background-color: #99cccc; margin: 3px 0; border-width: 1px; } .text6 { padding: 0px; height: 15px; width: 180px; margin: 3px 0 6px; background-color: #99cccc; border-width: 1px; } .contact #table1 th { background-color: #ccffff; font-weight: normal; text-align: left; vertical-align: top; margin: 0px; padding: 5px 0 0; line-height: 12px; } .contact #table1 td { background-color: #ccffff; vertical-align: middle; font-size: 10px; margin: 0px; padding: 3px 0 0; }
- ベストアンサー
- HTML
- seesaaブログで検索窓のラジオボタンのデフォルト値を変えるには？
seesaaブログでブログを書いています。 ブログに検索ウィンドウをつけているのですが、デフォルトではラジオボタンのチェックが ウェブの方にはいっています。 これを記事の方にチェックを入れるにはどうすればいいでしょうか。 seesaaのサポートにも聞きましたが、具体的な操作は案内できないとのことでした。 ------------------------------------------------------------ <script type="text/javaScript"><!-- function sfcheck(){ if (document.seesaaform.vs[0].checked){ document.seesaaform.action='http://search.yahoo.co.jp/search'; document.seesaaform.keyword.name='p'; } if (document.seesaaform.vs[1].checked){ document.seesaaform.action='<% blog.page_url %>pages/user/search/'; document.seesaaform.keyword.name='keyword'; } return true; } //--></script> <div class="sidetitle"><% content.title %></div> <div class="side"> <% content.header -%> <form method="get" action="http://search.yahoo.co.jp/search" style="margin:0;padding:0;" name="seesaaform" onSubmit="return sfcheck()"> <input value="" name="keyword" type="text" size="20" /> <input value="検索" type="submit" class="input-submit" /><br> <div align="left" style="padding-top:2px;"> <div style="float:left;width:20px;"><input type="radio" name="vs" value="" id="radio1" checked="checked" style="border:none;background:none;" /></div> <div style="float:left;width:63px;padding-top:2px;"><IMG src="<% site_info.blog_url %>/img/ico_y.gif" border="0" style="vertical-align:baseline;" /> <label for="radio1">ウェブ</label></div> <div style="float:left;width:20px;"><input type="radio" name="vs" value="<% blog.page_url %>" id="radio2" style="border:none;background:none;" /></div> <div style="float:left;width:65px;padding-top:2px;"><label for="radio2">記事</label></div> <div style="clear:left;"></div> </div> <% content.footer -%> </div> <input type="hidden" name="fr" value="sb-sesa" /><input type="hidden" name="ei" value="Shift_JIS" /> </form> ------------------------------------------------------------ ご回答よろしくお願いします。
- ベストアンサー
- ブログ
- yahooの検索窓の色の変え方
自分のホームページにyahooの検索窓を設置したのですが検索窓の行が白くなってしまいます。バックの色と同じにするにはどうしたらいいでしょうか？内容はこんな感じです。 <!-- Begin Yahoo Search Form --> <div style="margin:0;padding:0;font-size:14pt;border:none;background-color:#FFF;"> <form action="http://search.yahoo.co.jp/search" method="get" target="_blank" style="margin:0;padding:0;"> <p style="margin:0;padding:0;"><a href="http://search.yahoo.co.jp/" target="_blank"><img src="http://i.yimg.jp/images/search/guide/searchbox/ysearch_logo_110_22.gif" alt="Yahoo!検索" style="border:none;vertical-align:middle;padding:0;border:0;"></a><input type="text" name="p" size="28" style="margin:0 3px;width:50%;"><input type="hidden" name="fr" value="yssw" style="display:none;"><input type="hidden" name="ei" value="▲▲▲" style="display:none;"><input type="submit" value="検索" style="margin:0;"></p> </form> </div> <!-- End Yahoo! Search Form --> よろしくお願いします。
- ベストアンサー
- その他([技術者向] コンピューター)
