こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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>

投稿日時 - 2010-01-04 16:30:10

QNo.5567011

すぐに回答ほしいです

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

長くなりますがご容赦ください。お書きになっていたタグに行をつけて見やすくしてみました。(空白タグは除いてあります)

01 <CENTER>
02 <TABLE border="0" cellpadding="0" cellspacing="0">
03 <TR>
04 <TD width="700" height="10" background="red.gif"></TD>
05 </TR>
06 </TABLE>
07 </CENTER>
08 <CENTER>
09 <TABLE border="0" cellpadding="0" cellspacing="0">
10 <TR>
11 <TD width="10" height="150" background="red90.gif"></TD>
12 <right><img src="tyoutin.gif" width:76px; height:96px; border="0" alt="maru"></right>
13 <TD align="left">日付</A><BR><BR>
14 日付<BR><BR>
15 日付</P>
16 <TD width="10" height="150" background="red90.gif"></TD>
17 </TR>
18 <CENTER>
19 <TABLE border="0" cellpadding="0" cellspacing="0">
20 <TR>
21 <TD width="700" height="10" background="red.gif"></TD>
22 </TR>
23 </TABLE>
24 </CENTER>

1)これは2つのテーブルで構成されているのでしょうか?3つのテーブルで構成されているのでしょうか?
2つのテーブルなら17行目と18行目は不要で、23行目と24行目の間に</tr>と</table>が必要です。
3つのテーブルなら18行目に</table>が入り、且つ、7行目、8行目、18行目の<center>や</center>は不要です。

2)回答No.1の方のご指摘通り、12行目は11行目の<td>に入れないと成立しません。
書き方の例としては、

<TD width="10" height="150" background="red90.gif">
<div align="right"><img src="tyoutin.gif" width="76" height="96" border="0" alt="maru"></div>
</TD>

となるかと思います。

3)13行目から15行目ですが、意味のない</a>や</p>が入っています。正しくは、

<TD align="left">日付<BR><BR>
日付<BR><BR>
日付</TD>

ではないかと思います。
文字数の制限がありますので、テーブル3つの場合を想定して書いたものを画像として添付しますので、ご参考までにご覧下さい。

投稿日時 - 2010-01-04 18:05:57

お礼

ありがとうございます。わかりました。

投稿日時 - 2010-01-13 10:23:02

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

回答(4)

ANo.4

CSSにミスがあったので修正して・・
下記をメモ帳にコピーペーストしてsample.htmlとして保存し表示させてみる。
<html><head>
<style>
div.Menue{ width: 400px; border: solid red 5px; clear: both; margin-left: auto; margin-right: auto; padding: 6px;}
div.Menue p.Logo{ float:right; background-color:red; width:71px; margin:5px;}
div.Menue ol{ display:block; margin:0px; padding:0px;}
div.Menue ol li{ list-style: none; margin:0px; padding:0px;}
</style>
</head><body>
<div><h1>見本</h1>
<div class="menue">
<p class="Logo">
<img src="http://cmm001.goo.ne.jp/img/logo/goo.gif" width="71" height="37" alt="gooLogo">
</p>
<!-- width属性の場合は値は=""とかく。-->
<ol class="">
<li>日付:○○○○○○○○○○○○</li>
<li>日付:○○○○○○</li>
<li>日付:○○○</li>
</ol>
</div>
</body></html>

投稿日時 - 2010-01-04 23:41:39

お礼

ありがとうございます。わかりました。

投稿日時 - 2010-01-13 10:23:56

ANo.2

HTMLの記述に関する質問ですね。
まず、参考にされている資料は破いて捨ててください。
【理由】
<CENTER>は非推奨です。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/graphics.html#edef-CENTER )
<BR>が連続しています。
&nbsp;は、改行しない空白文字です。スペースを開けるために使用すべきではありません。とこにその後に<BR>が来ているのは意味的におかしい。
<right>このような要素は、HTML4では廃止されています。

★とても大事★
 HTMLはデザインするための言語ではなく、文書中の要素を識別させるためのマークアップ言語である。
 たとえば、<strong>この部分は重要</strong>
 <h2>ここは見出し(レベルは2)<h2>
 <p>ここからひとつの段落</p>
 <ul><!-- ここからリスト(順位がある箇条書き) -->
  <li>箇条書きの一行</li>
 </ul>
 というふうに、

 あなたの場合は多分
・・・・以下のソースはわかりやすいように全角スペースでインデントさせています。テストするときは全角スペースをタブに変換してください。・・・・
<div class="menue">
  <p class="Logo">
    <img src="tyoutin.gif" width=76" height="96" alt="maru">
  </p>
   <!-- width属性の場合は値は=""とかく。-->
  <ol class="">
    <li>日付</li>
    <li>日付</li>
    <li>日付</li>
  </ol>
</div>
とでもしておいて、・・これで機械にも文書の構造がわかる・・・

CSSにて
div.Menue{
  width: 700px;
  border: solid red 5px;
  clear: both;
  margin-left: auto;
  margin-right: auot;
}
div.Menue p.Logo{
 width: 76px;
 float:right;
 background-color:red;
}
div.Menue ol{
 display:block;
 margin:0px;
 padding 0opx;
}
div.Menue ol li{
 list-style: none;
 margin:0px;
 padding 0opx;
}

位ですむはずです。

★テキストエディタで、HTMLを作成するのは、オーサリングツールを使うと、文章の内容を読んで判断できない機械(コンピュータ)では、適切なマークアップができなかったり、無用な、あるいは不適切なタグ(繰り返しBRとか、空のpとか・・)を挿入してしまうからなのです。
【参考】HTMLエディタ ( http://ja.wikipedia.org/wiki/Web%E3%82%AA%E3%83%BC%E3%82%B5%E3%83%AA%E3%83%B3%E3%82%B0%E3%83%84%E3%83%BC%E3%83%AB#HTML.E3.82.A8.E3.83.87.E3.82.A3.E3.82.BF )

 とにかくまず、
はじめてのWebドキュメントづくり ( http://www.asahi-net.or.jp/%7Esd5a-ucd/www/ )
 あたりから、基礎を身に着けてください。

それと仕様書(http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/cover.html)は、いつでも参照できるようにしましょう。

投稿日時 - 2010-01-04 17:47:31

お礼

ありがとうございます。わかりました。

投稿日時 - 2010-01-13 10:22:38

ANo.1

なんかHTML的にメチャクチャですね。

<table>~</table>で閉じてるにも関わらず、<tr></tr>以下が再登場してしまっていたりと。

やり方としてはtdタグの属性値にalign="right"をつければ、テーブルのセル内の要素が右寄せになりますので、やりたいことが実現できるかと思います。

#あと細かいですが
HTMLは「Hyper Text Markup Language」ですから、「HTML言語」というのはちょっと可笑しいです。

投稿日時 - 2010-01-04 16:46:44

補足

ご回答ありがとうございます。
提灯だけを右にしたいのですが、align="right"とやって左に行ってしまうんですが。

投稿日時 - 2010-01-04 17:28:07

お礼

ありがとうございます。わかりました。

投稿日時 - 2010-01-13 10:23:39

あなたにオススメの質問