• 締切済み

HTMLのレイアウト

以下のようにテキストボックス２つの行とテキストボックス１つの行があり、 上の行のテキストボックスの間にスペースを入れた場合に、上の行と下の行の テキストボックスの終端をそろえる方法を教えてください。 ※下のテキストボックスのサイズを１増やした場合にスペースを１つ増やしても 　 当然幅が同じにならいので困っています。 <input type="text" size="10"/>&nbsp;&nbsp;<input type="text" size="10"/> <br/> <input type="text" size="22"/>

  • HTML
  • 回答数2
  • ありがとう数2

みんなの回答

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

通常はtableでレイアウトします。HTML的--文書構造--にもtableのほうが良いです。

回答No.1

２行目の　ＳＩＺＥ＝22　を　大きくするだけでいいのではないのでしょうか

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • 何がおかしいのでしょうか？

    こんばんわ。これは古い型のプログラミングかもしれませんが、 講義でもやっているので、ＦＯＲＭタグが無くても動作はするようです。 しかし、プログラミングを自分で作ってみても全く動作しません(>_<) 具体的にどこがおかしいため動作が行われないのか、教えてください。 新しいタグを加えなくても講義では動作してますし、このまま 自分で眺めていても全く先に進みません。 よろしくお願いいたします。 <head> <title> プログラミング</title> <script language ="JavaScript" > function calc(){ sub1=798*num1.value; mug.value=sub1; sub2=748*num2.value; tea.value=sub2; sub3=1780*num3.value; teatime.value=sub3; sum=sub1+sub2+sub3; total.value=sum; sub4=3*num1.value; sub5=3*num2.value; sub6=6*num3.value; sum2=sub4+sub5+sub6; souryoupoint.value=sum2; sub7=(((souryoupoint-1) / 5) + 1)*525; souryou.value=sub7; total2.value=sub7+sum; tax.value=Math.round((sub7+sum)-(sub7+sum)/1.05); if(total<4000){post=souryou;} else if(total<7000){post=souryou/2;} else{post=souryou/3;} souryou.value=Math.floor(post); } </script> </head> <body><hr> マグカップ1ペア（2個セット）税込798円:送料ポイント=3<br> 個数: <input type="text" size="4" name="num1">&nbsp&nbsp&nbsp&nbsp 小計: <input type="text" size="8" name="mug">円<br><br> <hr> ティーカップ１セット（カップ＆ソーサー）税込748円:送料ポイント=3<br> 個数: <input type="text" size="4" name="num2">&nbsp&nbsp&nbsp&nbsp 小計: <input type="text" size="8" name="tea">円<br><br> <hr> ティータイムセット 税込1780円:送料ポイント=6<br> (セット内容:ティーポット 1個＆ティーカップ2セット)<br> 個数: <input type="text" size="4" name="num3">&nbsp&nbsp&nbsp&nbsp 小計: <input type="text" size="8" name="teatime">円<br><br><hr> 送料ポイント5毎に送料525円が必要となります。<br> 1～5⇒525円（税込）<br> 6～10⇒1050円（税込）<br> 11～15⇒1575円（税込） 以下、同様に計算します<br><br> サマーバーゲン実施中！<br> 送料を除き商品を4000円以上お買い上げの方は送料半額！<br> さらに、7000円以上（送料除く）お買い上げの方は送料を1/3に！！！<hr><br> <input type="button" value="計算" onclick=calc()"> &nbsp&nbsp&nbsp&nbsp&nbsp&nbspお支払い総額:<input type="text" size="8" name="total2">円&nbsp&nbsp&nbsp&nbsp うち消費税&nbsp&nbsp:&nbsp&nbsp<input type="text" size="8" name="tax">円 <br><br> &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp(内訳）&nbsp&nbsp&nbsp&nbsp 商品代金:&nbsp&nbsp<input type="text" size="8" name="total">円&nbsp&nbsp /&nbsp&nbsp送料ポイント:&nbsp&nbsp<input type="text" size="8" name="souryoupoint"> ⇒送料:&nbsp&nbsp<input type="text" size="8" name="post"><br><br> <hr> </body> </html>

    • ベストアンサー
    • HTML
  • JavaScriptでこんな事って出来ますか？

    JavaScript超初心者です。最近本を買って、ネットで調べながら勉強中なのですが、とても難しいです。 現在この様な事が出来ないかと色々調べているのですが、JavaScriptで、出来ますでしょうか？可能であれば、勉強もかねて作ってみようと思うのですが？ 何も意味の無いスクリプトですが、一行テキスト3つに 入力したものを、各場所に配置して出力させる！と言うものです。まだ何も出来ていませんが、ソースを見ていただければと思います。 ソースです。 <FORM>ここにURL<BR> <INPUT size="50" type="text"><BR> ここにalt<BR> <INPUT size="50" type="text"><BR> ここに表示文章<BR> <INPUT size="50" type="text"><BR> <INPUT type="button" name="button" value="出力"><BR> ここに出力<BR> <TEXTAREA rows="5" cols="50"></TEXTAREA></FORM> といった感じです。出力結果として、 <a href= "1行目のURL" alt="2行目のalt">3行目の表示文章</a> のような感じで、最後のテキストボックスに表示させたいと思います。この様なことは、JavaScriptで可能でしょうか？可能な場合、どの辺を勉強すればいいでしょうか？変な質問ですが、よろしくお願いいたします。

  • textbox間の結合時、空白の時は、スペースを省きたい

    <script type="text/javascript"> <!-- function ketugou(){ 　　　　document.f.q.value=document.f.t1.value+" "+document.f.t2.value+" "+document.f.t3.value+" "+document.f.t4.value+" "+document.f.t5.value; } //--> </script> <form name="f"> キーワードを入力：<br> <input type="text" size="55" name="t1"><br> <input type="text" size="55" name="t2"><br> <input type="text" size="55" name="t3"><br> <input type="text" size="55" name="t4"><br> <input type="text" size="55" name="t5"><br> <input type="button" name="connect" value="結合" onClick="ketugou()"><br> 結合時の内容を表示：<br> <input type="txt" name="q" size="55" maxlength="255" ><br> </form> で、空白のテキストボックスの場合は、スペース（" "）なしで、 結合させたいんですが、どうしたら、良いのでしょうか？

  • 複数のテキストボックスでインデックスを取得する方法

    htmlでテキストボックスを複数作り、そのうちの一つの テキストボックスをクリックすると、Javascriptで そのテキストボックスのインデックスを取得したい思います。 ソースは簡単ですが、以下の通りです。 サンプルとして５つテキストボックスを作成していますが、 実際は不特定（データの読み込み件数）です。 onclick="hoge(???);" の???の部分に、テキストボックスのインデックスを書きたいのですが。。。 リストボックスだと、selectedIndexで取得できるようなのですが、 テキストボックスはどのような関数を使えばいいですか？ <html> <head> 　　<script language="javascript"> 　　　　function hoge(index){ 　　　　alert(index); 　　} 　　</script> </head> <body> 　　<input type="text" name="hoge" onclick="hoge(???);"><br> 　　<input type="text" name="hoge" onclick="hoge(???);"><br> 　　<input type="text" name="hoge" onclick="hoge(???);"><br> 　　<input type="text" name="hoge" onclick="hoge(???);"><br> 　　<input type="text" name="hoge" onclick="hoge(???);"><br> </body> </html>

  • HTML+CSSの印刷に関する質問です。

    HTML+CSSの印刷に関する質問です。 テキストボックスのサイズ内に収まりきらない文字を入力している場合、印刷時に入力 した文字が切れてしまうのですが、印刷時だけ自動的に拡張するといったことは可能で しょうか。 　　<input class="text" size="20" type="text" /> このような感じでテキストボックスを設置してるんですが、size=20を超えて入力した文 字が印刷時に切れてしまいます。 ご回答よろしくお願い致します。

    • ベストアンサー
    • HTML
  • input textでペーストした瞬間フォーカス移動

    input type="textが縦にたくさんあり、 text1[n番目]に文字をペーストするのですが ペーストした瞬間フォーカスをtext1[n]からtext1[n+1]に移動したいのですがonChangeだとうまくペーストした瞬間に移動できません。 良い方法はあるでしょうか。 <input type="text" size="21" value="" name="text1"><br> <input type="text" size="21" value="" name="text1"><br> ・ ・ ・

  • 同じFunctionで、同じ計算させたいのですが

    私は今、以下のようにここで教えていただいたプログラムを参考に組んでは見たものの、同じ行をいくつもコピペすると計算されなくなってしまいます。1行だけの計算でしようとするとうまく計算されるのですが・・・ <HTML> <HEAD> <TITLE> タイトルバーに表示されるテキスト </TITLE> <SCRIPT LANGUAGE="JavaScript"> <!--JavaScript function SUM(){ if(!isNaN(document.sum.text1.value) && !isNaN(document.sum.text2.value) && !isNaN(document.sum.text3.value) && document.sum.text1.value && document.sum.text2.value && document.sum.text3.value){ document.sum.text4.value = eval(document.sum.text1.value) + eval(document.sum.text2.value) - eval(document.sum.text3.value) } if( !isNaN(document.sum.text5.value) && !isNaN(document.sum.text6.value) && document.sum.text5.value && document.sum.text6.value){ document.sum.text7.value = eval(document.sum.text4.value) + eval(document.sum.text5.value) + eval(document.sum.tex6.value) } } //--> </SCRIPT> </HEAD> <BODY> <FORM NAME="sum" onSubmit="SUM();return false;"> A<INPUT TYPE="text" NAME="text1" onChange="SUM()" SIZE="10"><BR> B<INPUT TYPE="text" NAME="text2" onChange="SUM()" SIZE="10"><BR> C<INPUT TYPE="text" NAME="text3" onChange="SUM()" SIZE="10"><BR> D=A+B-C<INPUT TYPE="text" NAME="text4" onChange="SUM()" SIZE="10"><BR> E<INPUT TYPE="text" NAME="text5" onChange="SUM()" SIZE="10"><BR> F<INPUT TYPE="text" NAME="text6" onChange="SUM()" SIZE="10"><BR> G=D+E+F<INPUT TYPE="text" NAME="text7" onChange="SUM()" SIZE="10"><BR> </FORM> </BODY> </HTML>

  • テーブルの最後の行であるか判別したい

    テーブルの中にあるテキストボックスのonchangeイベントの中で、このテキストボックスが最後の行（<tr>レベル）であることを知るにはどうすればいいでしょうか？ <table> <tr><td><input type="text" onchange="islastline()"></td></tr> <tr><td><input type="text" onchange="islastline()"></td></tr> <tr><td><input type="text" onchange="islastline()"></td></tr> </table> この場合一番下のテキストボックスに入力したときだけTRUEを返してほしいのです。

  • 計算結果のテキスト表示

    JavaScript計算式で結果を表示したいのですが できません。 テキストBOXには結果を入れれるのですが、 テキストBOXでなく文字として結果を出したいのですが でません。 以下ソースです。　19行目が表示希望箇所です。 <SCRIPT language="javascript"> <!-- function calc() { with(document.f) { syoukei.value = goods1.value * goods2.value * (goods3.value * 0.01) ; syoukei.value = Math.round(syoukei.value) } } // --> </SCRIPT> <FORM name="f"> 縦<INPUT type="text" name="goods1" size="3" onChange="calc();">m * 横<INPUT type="text" name="goods2" size="3" onChange="calc();">m * 厚み<INPUT type="text" name="goods3" size="3" onChange="calc();">cm<BR> 　　　　　　60L　<INPUT type="text" name="syoukei" size="5">袋<BR> <SCRIPT language="javascript"> <!-- document.write(syoukei); } // --> </SCRIPT> </FORM>

  • テキストボックスの中に順番に○がついていくような・・・

    こんにちは。 jspで画像にあるような画面を表示できるようにと課題が出まして、四苦八苦しております。 内容は９個のテキストボックスがあり、OKボタンを押すごとに次のページに遷移し、１つずつ○が順に表示されていくというものです。 さらに、全てのボックスが埋まっている時にOKボタンを押すと全て空になり、また最初に戻ります。 自分で書いてみたコードはこんな感じです。 <%@page language="java" %> <%@page contentType="text/html;charset=Shift_JIS" %> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <HTML><HEAD><TITLE>課題１</TITLE> </HEAD><BODY> <FORM ACTION="kadai2.jsp" METHOD="post"> <BR> No.1:<INPUT TYPE="text" name="box1" VALUE="○"><BR> No.2:<INPUT TYPE="text" name="box2"><BR> No.3:<INPUT TYPE="text" name="box3"><BR> No.4:<INPUT TYPE="text" name="box4"><BR> No.5:<INPUT TYPE="text" name="box5"><BR> No.6:<INPUT TYPE="text" name="box6"><BR> No.7:<INPUT TYPE="text" name="box7"><BR> No.8:<INPUT TYPE="text" name="box8"><BR> No.9:<INPUT TYPE="text" name="box9"><BR> <INPUT TYPE="submit" VALUE="ok"> </FORM> </BODY></HTML> 上記と同様で、○を１つずつ増やしたファイルを９個作れば表示はできますが、それではHTMLで済んでしまいます。 １～９のボックスの部分をjava(配列)で書けますが、○を１個ずつ増やしていく方法が分かりません。 １つのファイルで自分を呼び出すという方法っぽいですが・・・ sessionでもrequestでも何でも大丈夫です。 ご教示お願いします。

    • ベストアンサー
    • Java

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する