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

解決済みの質問

HTMLの質問です。画像を並べて名称を表記します。

ホームページビルダーで作成しました。
今回の例では画像を横4枚、縦2段に並べて画像下にテキストを表記します。
各画像にはリンクを貼っています。
ところが画像下のテキストの右端だけがダブって表記されます。
具体的にはタイトル4とタイトル8というテキストです。
問題点が分かる方はご教授願います。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<title>ホームページのタイトル</title>
<link rel="stylesheet" type="text/css" href="hpb9tm04_8.css" id="hpb9tm04_8"
a:link {
      text-decoration:underline;
      color:#0000FF;
      }
      a:visited {
      text-decoration:underline;
      color:#9900CC;
      }
      a:active {
      text-decoration:underline;
      color:#00FF00;
      }
      a:hover {
      text-decoration:underline;
      color:#00FF00;
      position:relative;top:3px;left:3px;
      }</style>
</head>
<body style="color: #000000; background-color: #ffffff" background="壁紙画像">
<div>
<table class="hpb-main" id="HPB_LAYOUTTABLE_05" cellspacing="0" cellpadding="0" width="760" border="0">
<tbody>
<tr>
<td class="hpb-cnt-cell1" id="HPB_LAYOUT_LMH0" valign="top" align="center" height="18">
<table class="hpb-hmenu1" id="HPB_LINK_MENU_TABLE_01" cellspacing="0" cellpadding="0" align="center" border="0">
</table>
</td>
</tr>
<tr>
<td class="hpb-cnt-cell3-x" valign="top" align="center"><div style="float:left"><img height="43" alt="ホームページのタイトル" width="232" border="0" src="ホームページのタイトル画像" />&nbsp;
<table class="hpb-lb-tb1" cellspacing="0" cellpadding="0" align="center" border="0">
<tbody>
<tr>
<td class="hpb-lb-tb1-cell3" id="HPB_LAYOUT_CONTENTS" valign="top" height="400">
<p><div style="float:left"><img height="37" alt="ホームページのサブタイトル" width="510" border="0" src="ホームページのサブタイトル画像" /></p>

<p>
<a target="_blank" rel="nofollow" リンク先URL"><div style="float:left"><img height="210" alt="タイトル1" width="140" border="0" src="画像" /><br />タイトル1</div></a>
<a target="_blank" rel="nofollow" リンク先URL"><div style="float:left"><img height="210" alt="タイトル2" width="140" border="0" src="画像" /><br />タイトル2</div></a>
<a target="_blank" rel="nofollow" リンク先URL"><div style="float:left"><img height="210" alt="タイトル3" width="140" border="0" src="画像" /><br />タイトル3</div></a>
<a target="_blank" rel="nofollow" リンク先URL"><div style="float:left"><img height="210" alt="タイトル4" width="140" border="0" src="画像" /><br />タイトル4</div></a>
<div style="clear:both"></div></p>
<p>
<a target="_blank" rel="nofollow" リンク先URL"><div style="float:left"><img height="210" alt="タイトル5" width="140" border="0" src="画像" /><br />タイトル5</div></a>
<a target="_blank" rel="nofollow" リンク先URL"><div style="float:left"><img height="210" alt="タイトル6" width="140" border="0" src="画像" /><br />タイトル6</div></a>
<a target="_blank" rel="nofollow" リンク先URL"><div style="float:left"><img height="210" alt="タイトル7" width="140" border="0" src="画像" /><br />タイトル7</div></a>
<a target="_blank" rel="nofollow" リンク先URL"><div style="float:left"><img height="210" alt="タイトル8" width="140" border="0" src="画像" /><br />タイトル8</div></a>
<div style="clear:both"></div></p>
<p>

</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

投稿日時 - 2011-06-16 16:25:39

QNo.6813847

困ってます

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

まず修正から。
結構間違いが多いので勉強をしましょう。

HTMLにCSSを書くなら
/*--CSS--*/

<style type="text/css">
<!--
ここにCSSを書く
-->
</style>

と書きましょう。

で、HTMLは

まず↓の修正
<a target="_blank" rel="nofollow" リンク先URL"><div style="float:left"><img height="210" alt="タイトル1" width="140" border="0" src="画像" /><br />タイトル1</div></a>

<a target="_blank" rel="nofollow" リンク先URL">
「"」がちゃんと閉じられていません。
リンクにタイトルを付けるなら
<a target="_blank" rel="nofollow" title="リンク先URL">
です。
それとdivで囲う必要はありません。

なので、書くとしたら
<a target="_blank" rel="nofollow" title="リンク先URL"><img height="210" alt="タイトル1" width="140" border="0" src="画像" /><br />タイトル1</a>
こんな感じでしょうか。

あ・・・aタグはhrefを書きましょう。
せっかくスタイルを指定しているのにちゃんと動いてませんよ?
<a href="#">タイトル</a>


次に、上から見ていって最初に見つかるtrタグで囲ってあるところは何か入っているのでしょうか?
何もないようでしたら削除をしたほうが良いです。


次に
下から見て一番最初に見つかるpタグはいらないです。


最後に
<div style="float:left"><img height="43" alt="ホームページのタイトル" width="232" border="0" src="ホームページのタイトル画像" />&nbsp;
のdivの閉じタグがありません。
<p><div style="float:left"><img height="37" alt="ホームページのサブタイトル" width="510" border="0" src="ホームページのサブタイトル画像" /></p>
も同じです。



自分ならこう書きます。
ちなみにタイトル1~4、タイトル5~8のスタイルは違います。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<title>ホームページのタイトル</title>
<style type="text/css">
<!--
a:link {
text-decoration:underline;
color:#0000FF;
}
a:visited {
text-decoration:underline;
color:#9900CC;
}
a:active {
text-decoration:underline;
color:#00FF00;
}
a:hover {
text-decoration:underline;
color:#00FF00;
position:relative;top:3px;left:3px;
}

.wrap{
width:580px;
border:solid 1px;
}

.hp_title{
text-align:center;
margin:10px;
}

.title_sub{
text-align:center;
margin:10px;
}
-->
</style>
</head>
<body style="color: #000000; background-color: #ffffff" background="壁紙画像">
<div class="wrap">
<div class="hp_title">
<img height="43" alt="ホームページのタイトル" width="232" border="0" src="ホームページのタイトル画像" />
</div>
<div class="title_sub">
<img height="37" alt="ホームページのサブタイトル" width="510" border="0" src="ホームページのサブタイトル画像" />
</div>
<table>
<tr>
<td><a href="#" target="_blank" rel="nofollow" title="リンク先URL"><img height="210" alt="タイトル1" width="140" border="0" src="画像" /></a></td>
<td><a href="#" target="_blank" rel="nofollow" title="リンク先URL"><img height="210" alt="タイトル2" width="140" border="0" src="画像" /></a></td>
<td><a href="#" target="_blank" rel="nofollow" title="リンク先URL"><img height="210" alt="タイトル3" width="140" border="0" src="画像" /></a></td>
<td><a href="#" target="_blank" rel="nofollow" title="リンク先URL"><img height="210" alt="タイトル4" width="140" border="0" src="画像" /></a></td>
</tr>
<tr>
<td>タイトル1</td>
<td>タイトル2</td>
<td>タイトル3</td>
<td>タイトル4</td>
</tr>
<tr>
<td><a href="#" target="_blank" rel="nofollow" title="リンク先URL"><img height="210" alt="タイトル5" width="140" border="0" src="画像" /><br />タイトル5</a></td>
<td><a href="#" target="_blank" rel="nofollow" title="リンク先URL"><img height="210" alt="タイトル6" width="140" border="0" src="画像" /><br />タイトル6</a></td>
<td><a href="#" target="_blank" rel="nofollow" title="リンク先URL"><img height="210" alt="タイトル7" width="140" border="0" src="画像" /><br />タイトル7</a></td>
<td><a href="#" target="_blank" rel="nofollow" title="リンク先URL"><img height="210" alt="タイトル8" width="140" border="0" src="画像" /><br />タイトル8</a></td>
</tr>
</table>
</div>
</body>
</html>

投稿日時 - 2011-06-16 17:11:34

お礼

私の求めていた物そのものです。
ご指摘のとおり単純ミスも多く、勉強しなければならないことがたくさんあります。
ありがとうございました。

投稿日時 - 2011-06-21 16:18:35

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

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

回答(3)

ANo.3

う~ん。
HTMLが完成したら、必ず
The W3C Markup Validation Service ( http://validator.w3.org/#validate_by_input )
Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html )
でチェックして,その後でCSSを作りましょう。
 ホームページビルダーなどオーサリングツールを使う場合は、HTMLの知識は絶対に必要です。そうでないと、とんでもないHTMLを作成してしまいます。

 基本中の基本ですが、まずデザインにTABLEは使いません。
 ほかにもたくさん重要なミスがあります。

 作成したいのは、画像のリストですから、基本はリストを作成します。画像とその説明のリストですから定義リストを使うのが良いですが、今回は説明文にもリンクをかけるので「順不同リスト」を用いてマークアップします。
・・・ここまでは、ビルダーっても良いでしょう。・・・・
注意事項)
・文書内容に直接関係のないタイトルロゴは書かず、実際のタイトル名だけを入れておく
・文書の構造上のheaderはdivで囲んでおく。
・それ以外は、文書の構造にしたがってHTMLを作成する。デザインはここでは考えない。

★スタイルシートは手で書く。
 残念ながら、DreamWeberを含めて、CSSをきちんと書けるオーサリングツールはありません。カスケーディングと言う最も重要なCSSをCSSたらしめている特性をまったく利用できません。
 そのため、デザインのためにHTMLに余分な要素や属性やIDを加えてしまうし、セレクタのグループ化や詳細度は使えません。
W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input )でチェックする。

★サンプルは、上記Validatorでテストしてありますが、HTMLを見てもCSSを見ても何が書かれているかわかると思います。当然、検索エンジンも理解できますし、スタイルシートをscreenのみに適用させれば、携帯電話でも閲覧可能です。
 このサンプルを表示させるとわかりますが、ウィンド幅にもまったく依存しません。

★ポイントはビルダーを使って文書構造にしたがってシンプルなHTMLを書くこと、その上でスタイルシートは手で書きましょう。短いしわかりやすいから、後からいくらでも修正できます。どのようなデザインにも変更できます。そのためにはHTMLをきちんと書くこと。そのためにビルダーを使ってもよいです。

なお、ソース中の_は、タブに変換してテストしてください。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
_<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
_<title>タイトル</title>
_<meta name="author" content="ORUKA1951" />
_<meta http-equiv="Content-Style-Type" content="text/css" />
_<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" />
_<link rel="start" href="../index.html" />
<style type="text/css">
<!--
div.header h1,
div.header h2,
div.imageList{
_width:70%;max-width:760px;
_padding:0;
_margin:0 auto;
_text-align:center;
}
div.header h1 span,
div.header h2 span{display:none;}
div.header h1{
_height:43px;width:232px;
_background-image:url(./title.jpg);
}
div.header h2{
_height:37px;width:510px;
_background-image:url(./title2.jpg);
}
div.imageList{
_background-color:silver;
_padding:5px;
_border:solid 1px black;
}
div.imageList ul li{
_list-style:none;display:block;
_width:150px;height:270px;margin:5px;
_float:left;
_border:solid 1px 3px 3px 1px gray;
}
div.imageList ul li img{border:solid 4px white;}
div.imageList ul li span{
_display:block;margin:0.2em 0.5em;
_text-indent:1em;text-align:left;text-decoration:none;
}
hr{
_clear:both;height:1px;visibility:hidden;
}
-->
_</style>
</head>
<body>
_<div class="header">
__<h1><span>ホームページのタイトル</span></h1>
__<h2><span>ホームページのサブタイトル</span></h2>
_</div>
_<div class="imageList">
__<ul>
___<li><a href="./images/photo/a.jpg"><img src="./images/photo/ab.jpg" height="210" width="140" alt="タイトル1" />
____<span>説明1がここに入ります。</span></a>
___</li>
___<li><a href="./images/photo/a.jpg"><img src="./images/photo/ab.jpg" height="210" width="140" alt="タイトル2" />
____<span>説明2</span></a>
___</li>
___<li><a href="./images/photo/a.jpg"><img src="./images/photo/ab.jpg" height="210" width="140" alt="タイトル3" />
____<span>説明3</span></a>
___</li>
___<li><a href="./images/photo/a.jpg"><img src="./images/photo/ab.jpg" height="210" width="140" alt="タイトル4" />
____<span>説明4</span></a>
___</li>
___<li><a href="./images/photo/a.jpg"><img src="./images/photo/ab.jpg" height="210" width="140" alt="タイトル5" />
____<span>説明5</span></a>
___</li>
___<li><a href="./images/photo/a.jpg"><img src="./images/photo/ab.jpg" height="210" width="140" alt="タイトル6" />
____<span>説明6</span></a>
___</li>
___<li><a href="./images/photo/a.jpg"><img src="./images/photo/ab.jpg" height="210" width="140" alt="タイトル7" />
____<span>説明7</span></a>
___</li>
___<li><a href="./images/photo/a.jpg"><img src="./images/photo/ab.jpg" height="210" width="140" alt="タイトル8" />
____<span>説明8</span></a>
___</li>
__</ul>
__<hr />
_</div>
</body>
</html>

投稿日時 - 2011-06-16 21:16:07

お礼

ご指導ありがとうございます。

投稿日時 - 2011-06-21 16:17:32

ANo.1

ごちゃごちゃして見にくいので同様のページを作りました。



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head><title></title>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta content="MSHTML 6.00.6000.17097" name="GENERATOR"></head>
<body>
<p>
<table cellspacing="0" cellpadding="0" width="75%" align="center" border="1">
<tbody>
<tr>
<td colspan="4">
<p align="center">第一段目のタイトル</p></td>
</tr>
<tr>
<td>
<p align="center">画像</p></td>
<td>
<p align="center">画像</p></td>
<td>
<p align="center">画像</p></td>
<td>
<p align="center">画像</p></td>
</tr>
<tr>
<td>
<p align="center">タイトル1</p></td>
<td>
<p align="center">タイトル2</p></td>
<td>
<p align="center">タイトル3</p></td>
<td>
<p align="center">タイトル4</p></td>
</tr>
<tr>
<td colspan="4">
<p align="center">第二段目のタイトル</p></td>
</tr>
<tr>
<td>
<p align="center">画像 </p></td>
<td>
<p align="center">画像 </p></td>
<td>
<p align="center">画像 </p></td>
<td>
<p align="center">画像 </p></td>
</tr>
<tr>
<td>
<p align="center">タイトル5</p></td>
<td>
<p align="center">タイトル6</p></td>
<td>
<p align="center">タイトル7</p></td>
<td>
<p align="center">タイトル8</p></td></tr></tbody></table></p></body></html>

投稿日時 - 2011-06-16 16:57:05

お礼

ご丁寧にありがとうございます。

投稿日時 - 2011-06-21 16:16:59

あなたにオススメの質問