• ベストアンサー

htmlで改行タグを入れていないのに改行される

WINXPのメモ帳を使い、手打ちでhtmlを書いているのですが、 改行タグを入れてないのに4行分も改行されてしまい困っています。 (異常に空白があったので、反転させたら分かりました。) !<div align="center"><br> !<font size="+2">- MUSIC -&nbsp;&nbsp;&nbsp;</font><br> !<table border="0" cellpadding="1" cellspacing="0" width="90%"> の、tableから上に4行空白が出来てしまいます。 どうしても直したいので、分かる方は教えてくれないでしょうか。

noname#90857
noname#90857
  • HTML
  • 回答数3
  • ありがとう数4

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

  • ベストアンサー
  • leaz024
  • ベストアンサー率75% (398/526)
回答No.2

テーブルの上に空白ができてしまう場合、そのテーブル内の記述に問題があることが多いです。 例えば、 <table>  <tr><td>この行は全角空白でインデント(字下げ)しています。</td></tr> </table> のようにインデントを全角空白で書いてしまうと、その空白は td ブロック外のテキストとしてテーブルの上に表示されてしまいます。 ですので、まずはテーブル内の <td> ~ </td> 外に書かれている全角空白をチェックしてみて下さい。

noname#90857
質問者

お礼

全角空白は使ってないはずだったのですが「念のため…」と思い、 テーブル内に使用した空白を消して、入れ直したら見事に隙間が埋まってくれました! テーブル内の記述がテーブル外に影響するなんて思ってもいませんでした。 かなり悩んでいたので、とても嬉しいです。 ありがとうございます。

その他の回答 (2)

回答No.3

私も#1の方同様試してみましたが、正常に表示されました。 原因として考えられるのは、#2の方が仰っている「インデント(字下げ)」が全角空白で記入されているぐらいですね。 手打ちで「HTML」を打つ場合「メモ帳」は止めた方がいいと思います。 「メモ帳」よりは、フリーウェアのテキストエディタの方が使い勝手はいいと思います。 私は「TeraPad」を使っていますが、「全角空白」や「タブ」などには識別マークがつけられるので便利です。

参考URL:
http://www.vector.co.jp/vpack/filearea/win/writing/edit/index.html
noname#90857
質問者

お礼

全角空白が原因のようでした。 「TeraPad」は持ってはいましたが、全然使っていませんでした。 これからは使ってみようかと思います。 ありがとうございます。

  • argi
  • ベストアンサー率27% (5/18)
回答No.1

実際にローカルで試してみましたが、質問内容のみを純粋に使用して実行すると問題なく表示されるようです。 tableタグ以下に問題があるのではないかと思われます。(tableを閉じていないとかtr/tdの閉じがないとか) 上記のような理由でテーブル自体の表示がテーブルより下のものより下になってしまったことがあったような無かったような。差し支えなければtable以下のソースもあると判断しやすいです。 以下に一応試したHTMLを記入しておきます。 ---------ここから <html> <body> test<br> <div align="center"><br> <font size="+2">- MUSIC -&nbsp;&nbsp;&nbsp;</font><br> <table border="0" cellpadding="1" cellspacing="0" width="90%"> <tr><td>aaaaaaaaaaaa</td></tr> </table> </body> </html> ---------ここまで

noname#90857
質問者

お礼

タグの閉じ忘れなどは目を皿にして探したのでありませんでし、 argiさんが書いてくださったHTMLも問題ありませんでした。 しかし空白が原因だったようで、一度テーブル内の空白を消して入れ直したら直りました! 回答ありがとうございます。

関連するQ&A

  • ヤフオクのテンプレートでバックグラウンドを使いたい

    今、オークション用のテンプレートを作ってるのですが、テーブルの背景に、 <table width="900" height="1000" border="0" cellspacing="0" cellpadding="0" background="http://000.com/000.png"> と言った感じで画像を背景に配置したいと考えていますが、どうやってもうまくいきません。 プレビュー表示の段階で、ソースコードを見てみたのですが、ちゃんと設定されているにもかかわらず、背景画像だけが表示されません。 別の方法で、 <div style="background-image:url(http://www.000.com/000.png);"> でも試して見ましたが、同じ結果でした。 背景画像の上に「商品説明」などの画像を重ねて配置したいので、どうにか上手くできる方法がありましたら是非教えて下さい。 ※上に重ねる画像だけが表示されます。 参考までに今編集中のソースを貼っておきます。 <center> <table width="900" height="1000" border="0" cellspacing="0" cellpadding="0" background="http://000.com/000.png"> <tr> <td align="center" valign="top"><br /> <center> <table width="650" border="0" cellspacing="0" cellpadding="0"> <tr> <td><img src="http://000.com/001.png"></td> </tr> </table> <table width="650" border="0" cellspacing="0" cellpadding="5"> <tr> <td><font color="#a00e15"><p align="left"> 商品説明 </p></font></td> </tr> </table> <br /> <br /> <br /> <table width="650" border="0" cellspacing="0" cellpadding="0"> <tr> <td><img src="http://000.com/002.png"></td> </tr> </table> <table width="650" border="0" cellspacing="0" cellpadding="5"> <tr> <td><font color="#a00e15"><p align="left"> 発送方法 </tr> </table> <br /> <br /> <br /> <table width="650" border="0" cellspacing="0" cellpadding="0"> <tr> <td><img src="http://000.com/003.png"></td> </tr> </table> <table width="650" border="0" cellspacing="0" cellpadding="5"> <tr> <td><font color="#a00e15"><p align="left"> お支払い方法 </p></font></td> </tr> </table> <br /> <br /> <br /> <table width="650" border="0" cellspacing="0" cellpadding="0"> <tr> <td><img src="http://000.com/004.png"></td> </tr> </table> <table width="650" border="0" cellspacing="0" cellpadding="5"> <tr> <td><font color="#a00e15"><p align="left"> 注意事項 </p></font></td> </tr> </table></td> </tr> </table> </center>

  • HPを、HTML言語で編集しています。

    HPを、HTML言語で編集しています。 「例」という添付図の、枠内の提灯を右の余白に動かしたいのですが、うまくいかなくて困っています。ご教示下さい。 タグは以下です。 <CENTER><TABLE border="0" cellpadding="0" cellspacing="0"> <TR> <TD width="700" height="10" background="red.gif"></TD> </TR> </TABLE></CENTER> <CENTER><TABLE border="0" cellpadding="0" cellspacing="0"> <TR> <TD width="10" height="150" background="red90.gif"></TD> <right><img src="tyoutin.gif" width:76px; height:96px; border="0" alt="maru"></right> <TD align="left">&nbsp;&nbsp;&nbsp;&nbsp; 日付 ○○○○○○○○○○○○○○○○</A><BR> <BR>&nbsp;&nbsp;&nbsp;&nbsp; 日付 ○○○○○○○○<BR> <BR>&nbsp;&nbsp;&nbsp;&nbsp; 日付 ○○○○○○○○○○○○○○○○○○○○○○○○ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;& nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</P> <TD width="10" height="150" background="red90.gif"></TD> </TR> <CENTER><TABLE border="0" cellpadding="0" cellspacing="0"> <TR> <TD width="700" height="10" background="red.gif"></TD> </TR> </TABLE></CENTER><br><br><br><br>

  • borderが1のテーブル

    ボーダーが1ピクセルくらいの表を作りたいので、tableの入れ子で作ったのですが「tableの入れ子は良くない」ととあるサイトで読んだので、入れ子にしないでtableを作りたいのですが何か良い方法はありますでしょうか? 私が書いたのはこんなかんじです。 <table width="400" border="0" cellpadding="0" cellspacing="0"> <tr> <td bgcolor="#000000"><table width="100%" height="100%" border="0" cellpadding="0" cellspacing="1"> <tr bgcolor="#999999"> <th><div align="center"><font size="2">名称</font></div></th> <th><div align="center"><font size="2">模型材質</font></div></th> <th><div align="center"><font size="2">生産材質</font></div></th> </tr> <tr bgcolor="#FFFFFF"> <td bgcolor="#999999"><div align="center"><font size="2">本体</font></div></td> <td><div align="center"><font size="2">発泡塩ビ板</font></div></td> <td><div align="center"><font size="2">プラスチック</font></div></td> </tr> </table></td> </tr> </table> CSSで「style="border-width :1px 1px 1px 1px;border-style : solid solid solid solid ;border-color :#000000 #000000 #000000 #000000 ;"」というのを入れてやってみたのですが、これだと外側にしかラインが表示されませんでした。 よろしくおねがいします。

  • テーブル内の改行のズレ

    テーブル内で、文字の並びを縦横揃えようと思い、MSゴシックを使っています。幅を指定しているので、自動改行されるのですが、微妙なところでズレてしまいます。"。"の文字が影響しているようなのです。 例1)では、 ABCDE ABCDE となり、 例2)では、 ABCDE ABCD E。 となります。 例2)を ABCDE ABCDE 。 とするには、どうしたらいいのでしょうか? 例1) <table border=1 width=90 cellspacing=0 cellpadding=2> <tr> <td><font face="MS ゴシック"> ABCDEABCDE</font> </td> </tr> </table> 例2) <table border=1 width=90 cellspacing=0 cellpadding=2> <tr> <td><font face="MS ゴシック"> ABCDEABCDE。</font> </td> </tr> </table>

    • ベストアンサー
    • HTML
  • デーブルが延びる

    たまにテーブルが意図しないかんじで右にのびる場合が あります。これを防ぐにはどうすれば、いいですか? どういうタグを打てばいいですか? <table width="85%" border="0" cellspacing="0" cellpadding="2" bgcolor="#ff0066"><trheight="216"> <td valign="top" align="center" bgcolor="#ff0066" width="786" height="216"><table width="786" border="0" cellspacing="0" cellpadding="2" bgcolor="#eeeeee"><tr> <td colspan="2" bgcolor="#ff0066" width="782" height="23" valign="top"><div align="left"> <font size="3" color="white" face="MSゴシック,OSAKA">例</font><b><font size="2" color="white"><font size="3" face="arial,verdana"><b><br></b></font></font></b></div></td></tr> <tr height="158"><td colspan="2" align="center" bgcolor="white" width="782" height="158"> <div align="left"><br> <font size="3" color="#555555" face="MSゴシック,OSAKA">テスト募集</font><font size="2" color="#555555" face="MSゴシック,OSAKA">!</font> <p><font size="2" color="#555555">XXXXX参加して頂ける方を随時募集しております。<br> </font></p><p></p> <div align="left"><p></p></div></div></td> </form></tr><tr height="23"><td colspan="2" width="782" height="23" valign="top"> <div align="right"><br></div></td></tr> </table></td></tr><tr> <td valign="top" width="786"><br></td> </tr></table>ソフトはD WとGo Liveを使います。

    • ベストアンサー
    • HTML
  • Dreamweaverのデザインで表示がおかしい時

    IEだと綺麗に表示されるけど、Dreamweaverのデザインで見ると表示がおかしい時って結構あり困ってます。 ソースフォーマットとかやってもやはり駄目です。 今回の場合、どのタグが悪そうでしょうか? <HTML> <HEAD> <META HTTP-EQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML; CHARSET=EUC-JP"> </HEAD> <BODY> <BR> <BR> <BR> <TABLE align="center" cellSpacing=0 cellPadding=0 width="95%" bgColor=#0066cc border=0> <TBODY><TR><TD> <TABLE cellSpacing=2 cellPadding=1 width="100%" border=0> <TBODY> <TR bgColor=#0066cc> <TD align=middle><SMALL><B><FONT color=#ffffff> テキストツール </FONT></A></B></SMALL>&nbsp; </TD></TR> <TR bgColor=#ffffff> <TD align=middle> <TABLE height="400" cellSpacing=0 cellPadding=1 width="95%" border=0> <TBODY> <TR valign=top> <TD width="100%" valign="center" align="center"> <BR><A>トップページ</A><BR><BR> </TD> </TR> <TR valign=top> <TD width="100%" valign="top" align="center"> <A HREF="list">あ</A><BR><BR> <A HREF="clist">い</A><BR><BR> <A HREF="slist">う</A><BR><BR> </TD> </TR> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </BODY></HTML>

  • ヤフオク出品時のタグで・・・

    商品説明のタグで <div align="center"> <table border="0" width="60%" cellpadding="0" cellspaing="0"> <tr><td align="left"><font color="#60457a"> ここに商品説明を入れる。 </font></td></tr> <tr><td align="left"><hr color="#7a6d45"></td></tr> <tr><td align="left"><font color="#60457a"> </table> </div> このようなものを作りましたが (これは1行のみですが実際は何行にもなります) 出品時に見ると左寄せになってしまいます。 センター合わせになると思い作ったのですが どこがわるいのでしょう?

  • HTMLのどこを削除すれば罫線が消えますか?

    添付画像の【ドリッパー&リッド付きルシード・ドリップ・イン・マグ】の文字の下の罫線を削除したいのですが、HTMLのどこを削除すれば罫線が消えますか? 教えて下さい。 <table width="700" cellspacing="0" cellpadding="5" style="font-size:10pt;"><tr> <td width="47" align="left" style="border-bottom:#666666 1px solid;"> <div align="left"></div></td> <td width="6" align="left" style="border-bottom:#666666 1px solid;"></div></td> <td width="601" style="border-bottom:#666666 1px solid;"><div align="left"><b>ドリッパー&リッド付きルシード・ドリップ・イン・マグ</b></div></td> </tr> </table> <table width="700" border="0" cellspacing="0" cellpadding="10"> <tr> <td align="center"><img src="http://image.co.jp/deco/cabinet/item/04751544/imgrc0065803424.jpg" ></td> </tr> </table>

  • タグの記述について教えて下さい!

    HP上で、2つの swfファイルを画面中央に横に並べたいと思っていますがどうしたらよいのかわかりません。 下記は、*****2.swfを画面の左詰にしている記述ですが、先程も申し上げたように、*****2.swf と *****1.swf を画面中央に横に並べるにはどうすればよいでしょうか? 宜敷くお願いします。 <br /> <P align=left><br /><table width="200" border="0" cellspacing="0" cellpadding="0"><tr><td><div align="left"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,2,0" height="200" width="200"><param name="quality" value="best"><param name="movie" value="*****2.swf"><embed height="200" src="*****2.swf" type="application/x-shockwave-flash" width="200" quality="best"></object><br><font size="5" color="blue">**************</a></font></div></td></tr></table> <br />

  • HTMLタグについて

    <!-- #EndEditable --> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <link rel="stylesheet" href="古いデーター/text.css" type="text/css"> </HEAD> <BODY bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="5" marginwidth="0" marginheight="5"> <table width="760" border="0" cellspacing="0" cellpadding="0" align="center"> <tr> <td><div align="center"><img src="toppu2.gif" width="700" height="92"></div></td> </tr> </table> <div align="center"> <table width="760" border="0" cellspacing="0" cellpadding="0"> <tr> <td><div align="center"><img src="botan4.gif" width="700" height="57" border="0" usemap="#Map6"></div></td> </tr> <tr> <td><div align="left"><!-- InstanceBeginEditable name="contents" --> _________________________  上記のタグで 【<link rel="stylesheet" href="古いデーター/text.css" type="text/css"> 】が文字化けしてるから可笑しいと思うのですが、これを テンプレート上で下記のように修正してもエラーが出て 上手くいきません。 <link rel="stylesheet" href="../../text.css" type="text/css">  この他におかしい部分が多分あると思うのですが、 そこをお教えください。  宜しくお願い致します。

専門家に質問してみよう