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

解決済みの質問

CSS今度は外部ファイル!

前回「CSSが反映されない」で質問させていただきました。
おかげさまで、ヘッダー内で記述したものが、反映されるようになりました。

ところで、今度は外部ファイルの読み込みで「できない!」となっています。
自分ではどこがいけないのか、発見できなかったので、また皆さんのお力をいただきたいと
思います。

○abc.css(外部ファイル)

.body{
color:#006666;
font-size:30px;
}

○HTMLファイル
<! DOCTYPE PUBLIC HTML "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charaset=shift_jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
<!--
<link rel="stylesheet" href="abc.css" type="text/css">
-->
</style>
</head>
<body>
背景色は濃い青緑です<br>
フォントサイズは30px・・・<br>
<br>
になるはずです・・・
</body>
</html>

・・・結果・・・
真っ白な画面に標準フォントで表示。

○外部ファイル
.hp-name{
font-size:55px;
color:#006666;
text-align:center;
}
⇒ファイル名 hp-name.css
○HTMLファイル
<! DOCTYPE PUBLIC HTML "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type"Content="text/html;charaset=shift_jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
<!--
<link rel="stylesheet" href="body.css" type="text/css">
-->
</style>
</head>
<body>
<div class="hp-name">
HP名は「○○△△◇◇」です
</div>


//////////////////////////////////////////////////////////////////////////////////////

今度はどこがいけないのでしょう。
<link rel・・・・・・・・
で、外部ファイルを読み込むだけではいけないのでしょうか?
それとも、外部ファイルの書き方がいけないのでしょうか?
外部ファイルには「スタイルシートの部分だけ」記述すればいいと思っていたのですが・・・

○外部ファイルを
<style type="text/css">
<!--

-->
</style>
をつけてみたのですが、ダメでした

投稿日時 - 2008-08-16 09:20:56

QNo.4254612

困ってます

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

> ファイル名、パス確認してみましたがダメでした

HTMLやCSSの構文にミスがなければ、ファイルの指定ミスしかありません。
CSSファイルのファイル名が実は「○○.css.txt」となっていたりしませんか?
OSで拡張子を表示しない設定になっていると、気が付きにくいですがよくありますよ。
特に関連づけしていないのに、WindowsでCSSファイルダブルクリックしたらメモ帳で開くなら、この可能性大です。


HTMLとCSSファイルが同じ階層(場所)にあるなら以下の通りで問題ありません。

HTMLファイル【test.html】
---
<! DOCTYPE PUBLIC HTML "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type"Content="text/html;charaset=shift_jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
背景色は青で文字は30px
</body>
</html>
---

CSSファイル【test.css】
---
body {
color: blue;
font-size:30px;
}
---

投稿日時 - 2008-08-17 14:45:32

補足

拡張子を確認してみましたが、cssファイルになっていました。
またdezimacさんが記述してくださったソースをコピペして表示してみましたが、これも反映されず、フォントの色、サイズとも標準で表示されました。

投稿日時 - 2008-08-17 19:20:52

お礼

回答ありがとうございます。
CSSファイル(メモ帳に歯車のアイコンで、カスケードスタイルシートドキュメントと表示されている)を開いたら、メモ帳でした。

投稿日時 - 2008-08-17 15:23:49

ANo.2

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

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

回答(2)

ANo.1

<style type="text/css">
<!--

-->
</style>
不要です。

---
<meta http-equiv="Content-Type"Content="text/html;charaset=shift_jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" href="body.css" type="text/css">
</head>
---

○abc.css(外部ファイル)
.body{
color:#006666;
font-size:30px;
}

この記述だと、<body>に対しての設定じゃなくて、bodyと言う名前のクラスに対して設定になります。
先頭に「.」付けばクラス扱いなります。
<body>に設定したいなら、
---
body{
color:#006666;
font-size:30px;
}
---
として下さい。

それで反映されないなら、外部CSSのファイル名やパスの指定ミスです。
Firefox使っているなら「ページの情報」表示する機能あるから、それでリンクされているか確認できます。

投稿日時 - 2008-08-16 10:09:17

お礼

回答ありがとうございます。
ファイル名、パス確認してみましたがダメでした・・・

投稿日時 - 2008-08-16 17:59:52

あなたにオススメの質問