みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

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

解決済みの質問

練習でHTMLを作っています

HPを作っているのですがメニューコンテンツの画像が表示されませんでした。
どうしたら表示されるようになるのか教えていただけないでしょうか?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">



<head>
<meta http-equiv="Content-Type" content=text/html; charset=Shift_JIS>
<title>猫の飼い方・育て方</title>

<link rel="stylesheet"
type="text/css"
href="neko_index.css"


</head>

<body>


<div id="container">

<div id="header">
<h1>猫を飼うためには</h1>
</div><br>



<div class="PR1"><!--PR1-->
<img src="image/PR.gif"alt="PR">
<a href="">
</a></div>
<!--PR1-->



</div>


<div id="contents">
<h4>このサイトの主旨</h4>
職業訓練の一環として練習のためにweb製作をしている。参考として色々な猫に関するサイトのいいところを参照させていただいている。
多々文章が類似している箇所があると思いますがご容赦ください。今のところあくまでも練習のためのサイトです。</p>

<h4>飼い主と我が家の猫紹介</h4>
<ul>
<li>まめたろう・・・山形県在住 30才・男 アトピー・花粉症・鼻炎持ち元小児喘息患者。病弱だった為に動物を飼うことが間々らなかったが大人になったため自己責任の名のもとに猫を飼い始めて猫主夫になる。</li><br>

<li>ノアくん・・・美形・性格おとなしくてやさしいおにーちゃん。里親サイトで譲っていただいた雑種猫♂</li><br>
<img src="image/top_noha.jpg"alt="ノアくん写真"width="600" height="350"vspace="10">
<a href=""></a>
<br>
<li>春ちゃん・・・美醜猫系・足長・耳たれのアメショ&マンチカンMIX♀のマンチカン。里親サイトで譲っていただいた。耳たれ具合からして大本の血筋はスコテッシュ不フィールドだと思う。</li>
<img src="image/top_haru.jpg"alt="春ちゃん写真"width="600" height="350"vspace="10">
<a href=""></a>
</ul>
<br></div>


<div id="menu">
<div id="image">

<ul>
<li>メニュー</li>
<li><a href="contents/neko_wo_kauhouhou.html"><img src"image/menu_nav1.gif"alt="猫の里親になろう"width="100"height="50">猫を飼う方法</a></li>
<li><a href="contents/.html"> 猫の里親になろう!</a></li>
<li><a href="contents/.html">子猫の飼い方</a></li>
<li><a href="contents/.html">猫のお手入れ</a></li>
<li><a href="contents/.html">猫の体のしくみ</a></li>
<li><a href="contents/.html">猫の病気</a></li>
<li><a href="contents/.html">猫の習性</a></li>
<li><a href="contents/.html">猫の気持ち</a></li>
<li><a href="contents/.html">去勢と避妊</a></li>
<li><a href="contents/.html">猫の種類</a></li>
<li><a href="contents/.html">猫に芸を覚えさせよう</a></li>
</ul>
</div>
</div>



<!--PR-->
<div id="menu under PR">
<img src="image/PR.gif"alt="PR">
<a href="">
</a></div>
<!--PR-->




<div id="footer">
<ul>
<li><a href="contents/.html">home
<li><a href="contents/.html">猫を飼う方法</li></a>
<li><a href="contents/.html">猫の里親になろう!</li></a>
<li><a href="contents/.html">子猫の飼い方</li></a>
<li><a href="contents/.html">猫のお手入れ</li></a>
<li><a href="contents/.html">猫の体のしくみ</li></a>
<li><a href="contents/.html">猫の病気</li></a>
<li><a href="contents/.html">猫の習性</li></a>
<li><a href="contents/.html">猫の気持ち</li></a>
<li><a href="contents/.html">去勢と避妊</li></a>
<li><a href="contents/.html">猫が妊娠したら</li></a>
<li><a href="contents/.html">猫の種類</li></a>
<li><a href="contents/.html">猫に芸を覚えさせよう</li></a></li>

<div align="center">
<br>Copyright(C) 猫の飼い方・育て方.All right Reserved.
</div>

</div><!--これはfooterの終止タグ-->

</div><!--これはcontainerのdiv-->

</body>
</html>



css

#menu {

background-color:#191970;
line-height:1.5;
width:200px;
padding:10px 0;
}


#menu ul{

background-color:#191970;

margin:0;
padding:0 10px;
width:180px;
line-height:1.5;

}


#menu li{

background-image:url(image/menu_background.gif);
margin:0;
padding:0;
margin-left:0px;
list-style: none;
}



a:link {
color:#0000cc;
text-decoration: none;
}


#contents{
background-image:url(image/contents_background-img.jpg);
line-height: 1.5;
width:650px;
float:right;
margin-left:20px;
margin-bottom:20px;
padding-top:30px;
padding-bottom:30px;
padding-left:20px;
padding-right:20px;
}




#footer{
width:900px;
font-size:10px;
float:right;

}

#footer ul{
width:900px;
margin:0;
padding:0;
text-align:center;
}

#footer li{
list-style:none;
display:inline;
}

投稿日時 - 2011-08-05 14:23:45

QNo.6923098

困ってます

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

<li><a href="contents/neko_wo_kauhouhou.html"><img src"image/menu_nav1.gif"alt="猫の里親になろう"width="100"height="50">猫を飼う方法</a></li>

この部分ですよね?

<img src="

という感じで、srcの後ろの=が抜けています。

あと、画像の場所とかリンク先とか、./とか../とか使ってちゃんと書いたほうがいいと思いますよ。

投稿日時 - 2011-08-05 15:05:18

お礼

まさにその通りでした。私としたことが…(笑)
ご指摘ありがとうございました。

投稿日時 - 2011-08-08 12:59:09

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

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

回答(3)

ANo.2

ちゃんと引用符で囲まれていないために表示されていないんだと思います。

>background-image:url(image/menu_background.gif);

ここを

background-image:url("image/menu_background.gif");

このように変更してください。

投稿日時 - 2011-08-05 14:58:55

お礼

ご指摘ありがとうございました。なかなか慣れないと細かいミスは見つけられませんね。どうもありがとうございました。

投稿日時 - 2011-08-08 13:00:31

ANo.1

imageフォルダに画像がサーバーにアップされていると仮定しますが、imageフォルダの階層は上のHTMLファイルがあるのと同じ階層ですか?

参考
http://masaboo.cside.com/new_html1/ht_67.htm

投稿日時 - 2011-08-05 14:46:52

お礼

参考URLありがとうございます。何かありましたらまたご指導お願いします。

投稿日時 - 2011-08-08 13:01:10

あなたにオススメの質問