※ ChatGPTを利用し、要約された質問です(原文:至急!HTML.CSS分かる方!)
HTML.CSSが反映されない問題
なぜか記述していくCSSが反映されません。
コードみて、分かる方いらっしゃったら、なぜか、教えてください。
HTML
<!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" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>和小物 きさらぎ</title>
</head>
<body>
<div id="wrapper">
<div id="header">
<p><a href="index.html"><img src="images/header_logo.jpg" width="266" height="154" alt="和小物 きさらぎ"/></a></p>
<div id="menu">
<ul>
<li id="about"><a href="about.html"><img src="images/btn_about.jpg" width="113" height="54" alt="きさらぎについて
"/></a></li>
<li id="m_recommend"><a href="recommend.html"><img src="images/btn_recommend.jpg" width="65" height="54" alt="おすすめ"/></a></li>
<li id="m_catalogue"><a href="m_catalogue"><img src="images/btn_catalogue.jpg" width="63" height="54" alt="商品一覧"/></a></li>
</ul>
</div>
<div id="main"></div>
<div id="sub">
<div id="whatsnew">
<h3>古布携帯ケース大量入荷</h3>
<p>人気の古布携帯ケースが大量に入荷しました。<br />
日本古来の伝統絵柄の着物を再利用した携帯ケースは最新鋭の携帯と驚くほど相性が良いのです。ぜひ、店頭で携帯と合わせてご覧になって、自分だけのお気に入りを選び出してください。</p>
<h3>おばあちゃんの布草履</h3>
<p>スリッパ代わりに愛用の声が多い「おばあちゃんの布草履」が入荷しました。ひとつひとつおばあちゃんが編み込んでいますので、次回入荷は未定です。</p>
</div>
<div id="doc_req"> <a href="document.html">資料請求</a>
<p>これまでの作品などの資料をお送りします。上の「資料請求」よりお申し込みください。</p>
</div>
</div>
<div id="footer">
<p style="">Copyright 2012 KISARAGI All rights reserved.</p>
</div>
</div>
</div>
</body>
</html>
CSS
@charset "utf-8";
/* 基本レイアウト ここから↓ */
* {
padding: 0;
margin: 0;
}
body{
font: 87.5%/1.6 Helvetica, "メイリオ", Meirio, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "MS Pゴシック", "MS PGothic", sans-serif;
background-image: url(../images/bg.jpg);
background-repeat: repeat;
}
#wrapper{
width: 840px;
margin: 0px auto;
background-color: #FFFFFF;
}
#main{
float:left;
width:560px;
margin-left:30px;
}
#sub{
float:right;
width:200px;
margin-right:30px;
}
#footer{
clear:both;
padding-top:2em;
}
#footer p{
height:60px;
font-size:0.8em;
color:#999999;
line-height::30px;
text-align:center;
background-color:#000000;
}
#header{
padding:20px 0px 20px 0px;
text-align:center;
}
#header p{
height:154px;
margin-bottom:7px;
}
img{
border:none;
}
#menu{
height:54px;
margin:0 30px 0 30px;
background-color:#f6f2e6;
}
#menu ul li{
float:left;
margin-left:10px;
list-style-type:none;
}
#menu ul li a{
height:54px;
padding-left:49px;
display:block;
background-image:url(../images/menu_btn_normal.jpg);
background-position:left top;
}
/* 基本レイアウト ここまで↑ */
お礼
おょ、そうですね! 初心者の上に、 ちょっとバージョンの違うDreamweaverを始めて使っているので。 「新規CSSファイルを作成」で、ソースコードのとなりに、 style.CSSが入ったのでもうリンクもしたものと思ってました。 リンクしてなかったんですねぇ。 既存のファイルを添付、を見つけて、 おかげさまで解決できました。 ご回答ありがとうございました。