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

解決済みの質問

CSSが反映されない!ソース公開

なぜかCSSが表示されずに困っています。
解決方法をご指導願います。

CSS↓(ファイル名screen.css)

* { margin: 0; padding: 0; list-style: none; text-decoration: none; }
body { margin: 25px 0 25px 0; font: normal 11px Trebuchet MS, Sans-serif; background: #000; color: #999; text-align: center; }
#container { width: 320px; margin-left: auto; margin-right: auto; border: 1px solid #666; padding: 250px 25px 25px 25px; background: url("../images/top.jpg") no-repeat; text-align: left; }
h1 { font: normal 20px Georgia, Sans-serif; margin-left: 45px; margin-bottom: 20px; }
h1 span.highlight { color: #efefef; }
h1 span.small { font-size: 11px; color: #333; }
h2 { margin-top: 15px; margin-left: -25px; padding-left: 20px; border-left: 5px solid #666; font: bold 11px Trebuchet MS, Sans-serif; }


INDEX.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="pl" lang="pl">

<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="styles/screen.css" media="screen">
</head>
<body>

はじめてのHP作成です。凡ミス等ご指導よろしくお願いします。

投稿日時 - 2008-08-01 14:52:33

QNo.4220169

困ってます

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

回答がレスと行き違いになってしまった様で失礼しました。
が、

> <link rel="stylesheet" type="text/css" href="./screen.css">
> を記載すれば読み込みましたが、今度はtop画像(top.jpg)のみが反映されません。

…上記からして、HTMLファイル、CSSファイル、イメージファイル、それぞれの参照先の関係が正しくない様ですね。今一度、各ファイルの相対位置関係を落ち着いて見直して見るべきでしょう。

投稿日時 - 2008-08-01 16:23:00

お礼

ありがとうございます!が、あいかわらず反映されません。
恐らく小さなミスかとも思いますが、見当たらないです!

いちおう参照先は大丈夫だと思います。
ゆっくり見直ししてみます。

投稿日時 - 2008-08-01 16:54:49

ANo.5

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

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

回答(5)

ANo.4

>記載すれば読み込みましたが、今度はtop画像(top.jpg)のみが反映されません。
階層を間違えていた、ということに気づきましたか?
styles/screen.css では表示されない
./screen.css で表示される
つまり、htmlファイルと同じ場所にcssファイルがあった(もしくは移動した?)わけですね。

では、画像はどうですか。
画像アドレスと実際の画像のある場所が違っていませんか?

投稿日時 - 2008-08-01 16:20:47

お礼

ありがとうございます!

画像は元ある位置から移動してしまいました。
cssの画像アドレスを変更したのですが、相変わらず画像のみ反映されません。

デスクトップ上の画像アドレスに書き換えても無理でした、そして
アップロードしhttpでの画像に書き換えても反映されません。
無知識で申し訳ないです。

投稿日時 - 2008-08-01 16:53:06

ANo.3

> CSSが表示されず

というのは具体的にどういう状態ですか?

というのは、検証してみたところ、恐ろしいことに今までの回答者様が指摘された珍妙なミスを抱えたままでも「CSSは反映」されてしまうからです(IE、Firefox共に)。

ただし、質問者様は別のスレッドでエンコーディングに関するミスをされていた様ですので、試しにHTMLファイルの実際の文字コードをmetaタグ内で宣言しているUTF-8ではなくShift_JISにわざと変更してみましたら、IE6ではものの見事にCSSどころかブラウザ上に「何も表示されない」という状態になりました(Firefoxでは、文字化けこそするものの、CSSは反映されたままです)。
もし質問者様の環境で起こっている不具合が、上記の様な現象でしたら、HTMLとCSSファイルそれぞれの実際の文字コードを確認しておかなしな事になってないかをチェックしてみて下さい。

もし上記の様な状態ではなく、HTMLファイルはそのまま表示されていてCSSだけが全く無効になっている、というのであればパスの間違いやCSSファイル内に余計な全角スペースなどのゴミが入ってないかを確認されてみては。

いずれにせよ、ANo.1&2の回答者様が指摘されている様な間違いは修正しておいて下さい。

投稿日時 - 2008-08-01 16:18:59

ポーランド語のサイトを作る日本人って珍しいですね。

font属性の中で「Trebuchet MS」ってフォントを指定してるのが敗
因だと思います。途中にスペースなどを含む場合は引用符を省略で
きませんから、そこから先は全部読んでくれてない可能性がありま
す。

もちろんファイルの階層が違ってる可能性も否定しません。

投稿日時 - 2008-08-01 15:55:11

お礼

ありがとうございます。

さきほど解決?しましたが、画像が読み込まれません。
フォント指定も変更済みです。

ありがとうございました

投稿日時 - 2008-08-01 16:15:42

ANo.1

CSS自体をかなり省略されて書かれているのは、この場合関係ないとは思います。(個人的には気になりますが)

htmlとcssは、
─┌─ index.html
 └─ styles ── screen.css
という、構造ですよね。

<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="styles/screen.css" media="screen">

は本来、
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="styles/screen.css" media="screen" />
と閉じタグが必要です。

投稿日時 - 2008-08-01 15:07:23

お礼

ありがとうございます。さきほど、

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

を記載すれば読み込みましたが、今度はtop画像(top.jpg)のみが反映されません。

Adobe GoLive CSでプレビューしても反映されていないのでアップロード等が原因でなくタグが原因じゃないかとも思います。

ご指摘ありましたらよろしくお願いします。
勉強になります。

投稿日時 - 2008-08-01 16:11:24

あなたにオススメの質問