• ベストアンサー
  • 困ってます

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>

共感・応援の気持ちを伝えよう!

  • 回答数6
  • 閲覧数87
  • ありがとう数5

質問者が選んだベストアンサー

  • ベストアンサー
  • 回答No.6
  • asciiz
  • ベストアンサー率71% (5099/7092)

>確認いたしましたところ、ボタンが表にかぶってしまいました。(検索結果が7行の場合) こちらでDBアクセスは実験できませんので、HTMLソースを手動でループ部分を7ブロックまで増やしてみましたが、ローカルでの表示テストはこのようになります。 (ボタンが枠にかぶってるのはちょっとカッコ悪いですが) >ちなみに2列目は縦2×横2に表示する必要があるため、修正させていただきます。 そういう変更があったなら、途中で何か影響のある変え方をしてしまったのかもしれません。 改めてソース全体を見てみる必要がありそうですね。 まあ、私の方法では基本的な考えは変わりませんけど…。 ・div での表示位置指定(ピクセル単位)を無くす。 ・ボタンもtable要素の1セル内に置くので、自動的に最終行となって追従する。

共感・感謝の気持ちを伝えよう!

関連するQ&A

  • 一部スクロール表示が含まれる画面を印刷する方法

    ホームページ画面の一部に縦スクロールの設定をしております。 画面上に印刷ボタンを作成し、プリントアウトしたいと考えておりますが、ファイル→印刷と押すと表示された部分のみしか印刷されません。 どなたかご存じでしたらご教示願います。 【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; }

  • 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行目 ーーーーー|ーーーーーーーーーー|ーーーーー|

  • 自動的に現在の時刻に変更させる

    プログラミング超初心者です。宜しくお願いします。 HTML上に今日の日付と現在の時刻をJAVAを使って、下記のソースのように表示させています。 <form name="rei7"> <p align="right">現在の日付 <input style="text-align:center; vertical-align: middle; font-size:16" size="25" type="text" name="today">  現在の時刻 <input style="text-align:center; vertical-align: middle; font-size:16" size="11" type="text" name="now"></p> </form> これだと、閲覧した時間しか反映できないので、自動的日時が変更できるようにしたいと思っています。また、このまま伸ばしていくと、ソースが長くなってしまうので、HTMLのheadに上げれたらと思っているのですが、いい方法があれば教えてください。

    • ベストアンサー
    • Java

その他の回答 (5)

  • 回答No.5
  • ngwaver
  • ベストアンサー率27% (184/665)

><div style="text-align:center;" id="Layer7">の部分が変わったと思われますが、ここだけでしょうか? </table>も追加しています。

共感・感謝の気持ちを伝えよう!

質問者からのお礼

ご回答いただきありがとうございました。 確認してみます。

  • 回答No.4
  • asciiz
  • ベストアンサー率71% (5099/7092)

>ボタンが画面右上にすっとんでしまいました。(笑) ちゃんとコピペしてます? <div> 内の座標指定はすべてなくしてますよ。 こちらではこのようになっていますが。

共感・感謝の気持ちを伝えよう!

質問者からのお礼

ご回答ありがとうございました。 再度確認させていただきます。

質問者からの補足

ちなみに2列目は縦2×横2に表示する必要があるため、修正させていただきます。

  • 回答No.3
  • asciiz
  • ベストアンサー率71% (5099/7092)

こんなのはどうですか ループ終わりの「<% } %>」以下部分をこのようにしてみます <% } %> <tr><td height="24" colspan="4"> <div style="height:16px;" id="Layer7" align="right"> <input type="submit" value=" 結果 "> <input type="button" value=" キャンセル "> <input type="button" value=" 戻  り "> </div> </td></tr> </form> </div> </table> </body> </html> まあつまりテーブルの最終行にもう一行増やして右寄せでボタンを置くと。

共感・感謝の気持ちを伝えよう!

質問者からのお礼

ご回答ありがとうございました。 ボタンが画面右上にすっとんでしまいました。(笑)

質問者からの補足

確認いたしましたところ、ボタンが表にかぶってしまいました。(検索結果が7行の場合)

  • 回答No.2

<div style="width : 468px;height : 16px;top : 486px;left : 441px;position : absolute; z-index : 2; " id="Layer7" align="right"> absolute=絶対位置指定で x=441 y=486 に固定されてるので、むしろそれをやめる方が早いのでは?

共感・感謝の気持ちを伝えよう!

質問者からのお礼

ご回答ありがとうございました。 absoluteを削除したところボタンが見えなくなってしまいました。

  • 回答No.1
  • ngwaver
  • ベストアンサー率27% (184/665)

<!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> <% } %> </table> <div style="text-align:center;" id="Layer7"> <input type="submit" value=" 結果 "> <input type="button" value=" キャンセル "> <input type="button" value=" 戻  り "> </div> </form> </div> </body> </html>

共感・感謝の気持ちを伝えよう!

質問者からのお礼

ご回答ありがとうございました。 <div style="text-align:center;" id="Layer7">の部分が変わったと思われますが、ここだけでしょうか?

関連するQ&A

  • 正解の答えを表示したいのですが・・・

    先日、ラジオボタンで解答を選択し、採点ボタンを押すと「○×」が出るように教えていただきました。 さらに、「○×」表示の横に、「×」の場合に正しい答えを(「A」)と表示するようにしたいと思っています。 ぜひ教えてください。よろしくお願いいたします。 <html> <head> <style type="text/css"> <!-- .maru{ display:inline; width:20px; border:0px solid ; color:red; font-weight:600; } --> </style> <script language=javascript> function displayScore(f){ var score = 0; var radios=new Object(); for(i =0 ; i<f.length;i++){ if(f[i].type=="radio"){ if(!radios[f[i].name]){ radios[f[i].name]=new Object() radios[f[i].name].flg=false; radios[f[i].name].name=f[i].name; } if(f[i].checked == true){ radios[f[i].name].flg=true; radios[f[i].name].score=parseInt(f[i].value); } } } for(var i in radios){ if(radios[i].flg==false){ alert(radios[i].name+"のチェックが抜けてます"); return false; } score+=radios[i].score; f["maru_"+i].value=radios[i].score==0?"×":"○"; } alert(" あなたの点数は " + score + " 点 です"); document.form1.score.value=score } </script> <META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 11.0.0.0 for Windows"> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE></TITLE> </head> <body> <FORM name="form1"> <TABLE bgcolor="#999999" cellpadding="0" cellspacing="1" height="10"> <TBODY> <TR> <TD width="193" valign="middle" bgcolor="#ffffff" align="left" height="25"><FONT color="#000000" size="2"> Q1:あいうえお</FONT></TD> <TD valign="middle" width="151" bgcolor="#ffffff" align="left" height="25"><FONT color="#000000" size="2"><input type="radio" name="q1" value="10" id="q1_1"><label for="q1_1">A</label> <input type="radio" name="q1" value="0" id="q1_2"><label for="q1_2">B</label> <input type="radio" name="q1" value="0" id="q1_3"><label for="q1_3">C</label></FONT></TD> <TD valign="middle" bgcolor="#ffffff" align="center" height="25" width="44"><FONT color="#000000" size="2"><input type="text" name="maru_q1" class="maru"><BR> </FONT></TD> <TD valign="middle" bgcolor="#ffffff" width="38"></TD> </TR> <TR> <TD valign="middle" bgcolor="#ffffff" align="left" height="25"><FONT color="#000000" size="2"> Q2:かきくけこ</FONT></TD> <TD valign="middle" bgcolor="#ffffff" align="left" height="25"><FONT color="#000000" size="2"><INPUT type="radio" name="q2" value="10" id="q2_1"><LABEL for="q2_1">A</LABEL> <INPUT type="radio" name="q2" value="0" id="q2_2"><LABEL for="q2_2">B</LABEL> <INPUT type="radio" name="q2" value="0" id="q2_3"><LABEL for="q2_3">C</LABEL></FONT></TD> <TD valign="middle" bgcolor="#ffffff" align="center" height="25" width="44"><FONT color="#000000" size="2"><INPUT type="text" name="maru_q2" class="maru"><BR> </FONT></TD> <TD valign="middle" bgcolor="#ffffff" width="38"></TD> </TR> </TBODY> </TABLE> <DIV align="left"><INPUT type="button" value=" 採 点 " onclick="displayScore(this.form)"><BR> <BR> <TABLE border="0" bgcolor="#ffff66"> <TBODY> <TR> <TD width="213" valign="middle"><FONT color="#000000" size="2"><B> あなたの点数</B>  <INPUT type="text" style="ime-mode:active;text-align : center;" size="10" name="score" readonly> <B>点</B></FONT> </TD> </TR> </TBODY> </TABLE> </DIV> </FORM> <DIV align="left"></DIV> </body> </html>

  • Input Type Buttonの色の変え方

    <INPUT type="button" name="BUTTON02" value="テスト" style="color: white;background-color:black;border-color: red;"> これ↑とこれ↓サンプルカラーで何度か試してみましたが、色が変わりませんでした。 <INPUT type="button" name="BUTTON02" value="テスト" style="color: #99CC99 ;background-color:#990033;border-color: #9933FF;">  どこが違うのでしょうか? お手数をお掛け致しますが、宜しくお願い致します。

  • 登録ボタンを押すとjspファイルが開かれてしまう

    環境は IE 8 MySQL 5.5 Java 6 です。 form method="POST" で取得したデータをDBに登録させたいと思いますが、 登録ボタンを押すとなぜかファイルを開く・保存の画面が出てしまいました。 どの部分がおかしいのでしょうか? HTML側 <html> <head> <title>情報登録</title> </head> <body> <h1 style="background:#cccccc">情報登録</h1> <form method="POST" action="p_insert.jsp"> <table border="0"> <tr> <th style="color:#FFffFF;background:#0086b2;text-align:right;">名前</th> <td><input type="text" name="nam" size="35" /></td> </tr> <tr> <th style="color:#FFffFF;background:#0086b2;text-align:right;">URL</th> <td><input type="text" name="url" size="100" /></td> </tr> <tr> <th style="color:#FFffFF;background:#0086b2;text-align:right;">入手日</th> <td><input type="text" name="gdate" size="14" />(YYYY/MM/DD)</td> </tr> <tr> <th style="color:#FFffFF;background:#0086b2;text-align:right;">ランク</th> <td> <select name="grade"> <option value="5">大変良い</option><option value="4">良い</option> <option value="3">普通</option><option value="2">悪い</option> <option value="1">非常に悪い</option> </select> </td> </tr> <tr> <th style="color:#FFffFF;background:#0086b2;text-align:right;">メモ</th> <td><input type="text" name="memo" size="100" /></td> </tr> <tr> <td colspan="2"> <input type="submit" value="登録" /> <input type="reset" value="取消" /> </td> </tr> </table> </body> </html> JSP側 <%@ page contentType="text/html; charset=Shift_JIS" import="java.sql.*,java.io.*" %> <%! public String strEncode(String strVal) throws UnsupportedEncodingException{ if(strVal==null){ return (null); }else{ return (new String(strVal.getBytes("ISO-8859-1"),"JISAutoDetect")); } } %> <% Class.forName("org.gjt.mm.mysql.Driver"); Connection db=DriverManager.getConnection( "jdbc:mysql://localhost:3306/データベース名" + "?user=jsp10&password=jsp10&useUnicode=true&characterEncoding=Shift_JIS"); Statement sttSql=db.createStatement(); sttSql.executeUpdate( "INSERT INTO aaalist(name,url,gdate,grade,memo) VALUES('" + strEncode(request.getParameter("name")) + "','" + request.getParameter("url") + "','" + request.getParameter("gdate") + "'," + request.getParameter("grade") + ",'" + strEncode(request.getParameter("memo")) + "')"); sttSql.close(); db.close(); response.sendRedirect("p_insert.html"); %>

    • ベストアンサー
    • Java
  • HTMLで入力フォームがOS、ブラウザによってサイズが違います。

    HTMLで入力フォームがOS、ブラウザによってサイズが違います。 どのOS、ブラウザでも同じサイズで表示したいのですが、上手くいきません。 OS:Windows7 ブラウザ: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">&nbsp;会社名<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>&nbsp;住所</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
  • 追加、削除について

    以前、行の追加と削除で質問をした者です。 その時、innerHTMLでのやり方を教わりましたが appendChild、removeChildという、メソッドでも 同じことができるのか教えてもらいたいです。 追加ボタンを押すと左のNOが、3,4と下に増える 削除ボタンを押すと戻るというやり方です。 <sample.html> <html> <head> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=Shift_JIS"> <title>列追加、削除</title> </head> <body> <table border=1> <col width="150" align="center" style="font-weight:bold"><col span="3"> <tr> <th >No</th> <th >列1</th> <th >列2</th> <th >列3</th> </tr> <tr> <td>1</td> <td><input type="text" name="sankou" value="" size="26" ></td> <td><input type="text" name="sankou" value="" size="26" ></td> <td><input type="text" name="sankou" value="" size="26" ></td> </tr> <tr> <td>2</td> <td><input type="text" name="sankou" value="" size="26" ></td> <td><input type="text" name="sankou" value="" size="26" ></td> <td><input type="text" name="sankou" value="" size="26" ></td> </tr> </table> <table> <tr> <td ><input type="button" VALUE="追加"></td > <td ><input type="button" VALUE="削除"></td > </tr> </table> </body> </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> というメールフォームを作ったのですが、送信ができません。 どこが間違っているのでしょうか? 全くの素人なのでどこが違うのか見当もつきません。 それから、送信後に送信確認ページを表示させたいのですが、どうしたらよろしいでしょうか?

  • onClickがinput type="image"だとできない!

    以前、↓の質問をさせていただき解決したのですが、 input type="image" にしたいのですが、 ただ変更するだけでは、できません。 http://oshiete1.goo.ne.jp/kotaeru.php3?q=2068911 どのように変更したらいいでしょうか? 教えてください! 現在下記の方法でやっています。 <style type="text/css"> .white{ background-Color:white; color:black; } .gray{ background-Color:gray; color:yellow; } .blue{ background-Color:blue; color:red; } </style> <body> <form> 全体: <input type="button" value="White" onClick="document.body.className='white'"> <input type="button" value="Gray" onClick="document.body.className='gray'"> <input type="button" value="Blue" onClick="document.body.className='blue'"><br> テーブル1: <input type="button" value="White" onClick="document.getElementById('t1').className='white'"> <input type="button" value="Gray" onClick="document.getElementById('t1').className='gray'"> <input type="button" value="Blue" onClick="document.getElementById('t1').className='blue'"><br> テーブル2: <input type="button" value="White" onClick="document.getElementById('t2').className='white'"> <input type="button" value="Gray" onClick="document.getElementById('t2').className='gray'"> <input type="button" value="Blue" onClick="document.getElementById('t2').className='blue'"><br> </form> <table width=100% id="t1"> <tr><td>test</td></tr> </table> <table width=100% id="t2"> <tr><td>test</td></tr> </table> </body>

  • tableタグでtdタグ間が離れてしまいます

    <div align="center"> <table class="serch" cellpadding="0" cellspacing="0"> <tr> <td><input type="text" name="serch" size="50"></td> <td><input type="image" value="" src="image/serch.gif" ALT="検索" serchim"></td> </tr> </table> </div> .serch{ border-style: solid; border-width: 1px; width: 100%; background-color: #F3F3F3; text-align:center; height: 30px } input textとinput image タグの間が離れてしまいます。通常連続して表示されると思うのですが 何故離れてしまうのでしょうか?

    • ベストアンサー
    • HTML
  • form 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>

    • ベストアンサー
    • HTML
  • 入力する条件によって文字色・背景色を変えたい

    JavaScriptで、入力する数字の条件によって文字色や背景色を変えたいのですが、どのように記述すれば良いでしょうか。 例えば、条件(1)のボックスに入力する数字が100以上の時に、文字色を「白」、背景白を「赤」にしたいのです。 よろしくお願い致します。 <HTML xmlns="http://www.w3.org/1999/xhtml" lang="ja"> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <TITLE>計算テスト</TITLE> </HEAD> <BODY bgcolor="#FFFFCC"> <FONT SIZE="3"> <SCRIPT language="JavaScript"> <!-- function keisan1(x1,x2){ a=0.2*(eval(x1)/10)*(eval(x1)/10)*Math.sqrt(eval(x2))*1000; return a.toFixed(0);} function keisan2(x1,x2,x3,x4,s1){ b=eval(x2)+Math.pow((0.2*(eval(x1)/10)*(eval(x1)/10)*Math.sqrt(eval(x2))),2)*eval(document.getElementById('s1').value)*eval(x3)+0.1*eval(x4); return b.toFixed(2);} function keisan3(x1,x2){ c=20*(eval(x1)/10)*(eval(x1)/10)*(eval(x2)); return c.toFixed(0);} function calc(){ // ← 計算ボタンが押されたらこの関数が呼ばれる   var d1 = document.fk.d1;   var d2 = document.fk.d2;   var d3 = document.fk.d3;   var d4 = document.fk.d4;   var s1 = document.fk.s1;   var ans1 = keisan1(d1.value, d2.value);   var calc1 = document.fk.calc1;   calc1.value = ans1;   var ans2 = keisan2(d1.value, d2.value, d3.value, d4.value, s1.value);   var calc2 = document.fk.calc2;   calc2 .value = ans2 ;   if(ans2 >= 0) calc2.style.color = "#e60000";   if(ans2 >= 0) calc2.style.backgroundColor = "#ffffff";   if(ans2 >= 1.4) calc2.style.color = "#ffffff";   if(ans2 >= 1.4) calc2.style.backgroundColor = "#e60000";   var ans3 = keisan3(d1.value, d2.value);   var calc3 = document.fk.calc3;   calc3.value = ans3;   if(ans3 <180) calc3.style.backgroundColor = "#D5FFCB";   if(ans3 >=180) calc3.style.backgroundColor = "#FFCC99";   if(ans3 >=270) calc3.style.backgroundColor = "#FF9999"; } //--> </SCRIPT> <FONT SIZE="5"><B>計算</B></font><BR> <FORM name="fk"> <FONT SIZE="3">   ●条件(1):<INPUT size="7" type="text" name="d1" style="text-align:right"><BR>   ●条件(2):<INPUT size="7" type="text" name="d2" style="text-align:right"><BR>   ●条件(3):<SELECT name="s1" id="s1" onchange="b();"> <OPTION value="0.1">A</OPTION> <OPTION value="0.2">B</OPTION> </SELECT> <BR>   ●条件(4):<INPUT size="7" type="text" name="d3" style="text-align:right"><BR>   ●条件(5):<INPUT size="7" type="text" name="d4" style="text-align:right"><BR> <BR>   <INPUT type="button" value="計算開始" onclick="calc()"> <BR> <BR>   ◆回答(1):<INPUT size="7" type="text" name="calc1" style="border-color:#000000; border-width:1px; border-style:solid; text-align:right"><BR>   ◆回答(2):<INPUT size="7" type="text" name="calc2" style="border-color:#000000; border-width:1px; border-style:solid; text-align:right"><BR>   ◆回答(3):<INPUT size="7" type="text" name="calc3" style="border-color:#000000; border-width:1px; border-style:solid; text-align:right"><BR> <BR> </FONT> </FORM> </BODY> </HTML>