※ ChatGPTを利用し、要約された質問です（原文：外部CSSと HEAD内のCSSの違い）
外部CSSとHEAD内のCSSの違いとは？
このQ&Aのポイント
外部CSSとHEAD内のCSSの違いについて教えてください。
macで Dreamweaver8を使用してHPを作成していますが、外部のcssがうまく反映されず困っています。head内に同じcssを入れるときちんと反映されるのですが、なぜ違いが出るのでしょうか？
具体的には、外部.cssファイルを読み込む方法と、headタグ内に<style>タグで直接CSSを書く方法がありますが、この違いがどのような影響を与えるのか教えてください。
現在、macで Dreamweaver8を使用してHPを作っています。
外部のcssがうまく反映されません。
そこで、head内に同じcssを入れたところ、きちんと反映されました。
どうして違いがでるのか教えてください。
『head内に入れた時』
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>無題ドキュメント</title>
<style type="text/css">
body {
font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
font-size: 14px;
font-weight: normal;
background-position: center;
padding: 0px;
margin: 0px;
}
#page {
background-color: #009900;
height: 800px;
width: 760px;
margin-right: auto;
margin-left: auto;
position: relative;
top: 0px;
}
#title {
background-color: #CCFF00;
height: 120px;
width: 700px;
position: relative;
left: 0px;
top: 0px;
margin-right: 15px;
margin-left: 15px;
padding-right: 15px;
padding-left: 15px;
}
</style>
</head>
<body>
<div id="page">
<div id="title">
</div>
</div>
</body>
</html>
『外部cssの時』
[styel.cssは]
body {
font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
font-size: 14px;
font-weight: normal;
background-position: center;
padding: 0px;
margin: 0px;
}
#page {
background-color: #009900;
height: 800px;
width: 760px;
margin-right: auto;
margin-left: auto;
position: relative;
top: 0px;
}
#title {
background-color: #CCFF00;
height: 120px;
width: 700px;
position: relative;
left: 0px;
top: 0px;
margin-right: 15px;
margin-left: 15px;
padding-right: 15px;
padding-left: 15px;
}
[反映されるhtmlは]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>無題ドキュメント</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="page">
<div id="title">
</div>
</div>
</body>
</html>
です。
誰かお答えくださいませ。
お礼
harawo さんへ めんどうな質問に丁寧に答えてくれてありがとうございました。 今日、昨日と同じ作業をしたところ、うまく反映されました。 どこかが違うはずなのですが…。 font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";が 入っていても、いなくてもきちんと思うように反映されました。 いま、昨日のものと今日のものを比べてみたのですが、違うところはないようです。 リンクなどがおかしかったのかもしれません。 すみませんでした。