- 締切済み
同じ行に間(空欄)を空けて表示させるには
全くの初心者です。 現在基礎的な部分を学んでいますので お恥ずかしいのですが教えて頂きたいことがございます。 以下のソースを実行しますと <html> <body> <div align="left"> <ahref="http://www.yahoo.co.jp"><TD width="100%"><FONT size=5>Yahoo! </FONT></TD></a> <img src="sankaku.gif">=三角 <img src="sikaku.gif">=四角 </body> </html> 表示は Yahoo!と三角のイメージ、四角のイメージがつながって表示されます。 これを Yahoo!【 ~ここに間を作りたい~ 】三角のイメージ、四角のイメージ と表示させたいのです。 申し訳ありませんがご教授お願い致します。
- みんなの回答 (3)
- 専門家の回答
みんなの回答
- shioz
- ベストアンサー率62% (529/853)
テーブルを使っているので、"Yahoo!"と"三角""四角"をそれぞれ別のセルに分けて、"Yahoo!"と"三角"の間には空白のセルを作ってwidthで幅を調整してはいかがでしょうか? No.1の回答のように三角と四角は同じセルでもいいですが。 <tr> <td>Yahoo!</td> <td width="xxx"></td> <td><img src="sankaku.gif"></td> <td><img src="sikaku.gif"></td> </tr> わけあって、Yahoo!~四角を同じセルにしたい場合は、もう一つ、透過gifで1ピクセルx1ピクセルの画像を用意して、間に入れるといいと思います。 仮に、透過gifを"space.gif"とすると以下のようになります。 <tr> <td>Yahoo! <img src="space.gif" width="xxx"><img src="sankaku.gif"><img src="sikaku.gif"></td> </tr> 開けたい幅が広い場合は、画像を使ってwidthで任意に(画像の)幅を設定するほうがいいと思いますが、1文字分くらいなら、文字コードで置き換えて文字としてのスペースを挿入するといいと思います。 以下の例ではスペース( )を2つ入れています。 <tr> <td>Yahoo! <img src="sankaku.gif"><img src="sikaku.gif"></td> </tr> タグ表記が化けてしまうかもしれないので、この回答と同じ内容を下記にあげておきます。 http://uproda11.2ch-library.com/src/11139536.jpg
- yoyox
- ベストアンサー率44% (86/193)
自動リンクのせいで表示が省略されてしまいましたね。 半角スペースを挿入しておきます。 <html> <body> <table width="100%"> <tr> <td><font size=5><a href="http://www.yahoo.co.jp">Yahoo!</a> </font></td> <td></td> <td><img src="sankaku.gif"><img src="sikaku.gif"></td> </tr> </table> </body> </html>
- yoyox
- ベストアンサー率44% (86/193)
TD要素の使い方が根本的に間違っています。 どこで習いましたか? or 何を参考にしましたか? TD要素は表の一つのセルを表す要素で、TR要素の子要素、TABLE要素の孫要素である必要があります。また、TD要素はA要素の子要素にすることはできません。さらに、DIV要素が閉じられていないのも気になります。 あまり推奨されないやり方ですが、テーブルレイアウトを用いると初心者には分かりやすいでしょう。 <html> <body> <table width="100%"> <tr> <td><FONT size=5><a href="http://www.yahoo.co.jp">Yahoo!</a></FONT></td> <td></td> <td><img src="sankaku.gif"><img src="sikaku.gif"></td> </tr> </table> </body> </html> 他にも必要な表記(DOCTYPE宣言、alt属性など)はたくさんあるのですが、簡単にするために省略してます。 失礼を承知で申し上げますと、このままの知識で残りのページを製作しても行き詰まるのは目に見えています。今一度、正しいHTMLの知識を勉強した方がよいでしょう。