ＣＳＳが反映されません

解決済

質問者：Liko_Kaoru
質問日時：2008/08/14 18:39
回答数：3件

勉強不足は承知ですが、もうどうにもお手上げ状態です。
質問させてください。

ＣＳＳを勉強しているのですが、反映されません
（本や、サイトのサンプルとおり記述しても、です）
（タグ、スペルの間違いがないかは１０回以上確かめています）
（ＣＳＳサイトのサンプルをクリックすると、それは表示されます）

●ヘッダー内に指定すると、反映されない
○例
　<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01 Transitional//EN">

<HTML>

<HEAD>
<meta http-equiv="Content-Type" content="text/html;charaset=shift_JIS">
<meta http-equiv="Content-Type" content="tet/css">
<style type="text/css">

</HEAD>
<BODY>

<p.ehon>
「絵本」の色は赤色です
</p>

</BODY>
</HTML>

・・・結果・・・
ブラウザには標準フォント（色、サイズ）で
”「絵本」の色は赤色です”
と表示される

文字色は
font-color:red
font-color:#rbg番号
などしてみても、黒のまま

文字サイズも３０ｐｘ、５０ｐｘ、１００ｐｘとしてみているが、結果は同じ文字サイズ
（標準）になる

○<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01 Transitional//EN">

<HTML>

<HEAD>
<meta http-equiv="Content-Type" content="text/html;charaset=shift_JIS">
<meta http-equiv="Content-Type" content="tet/css">
<style type="text/css">


</HEAD>
<BODY>

<h1>
絵本の色は赤色です
</h1>

</BODY>
</HTML>

・・・結果・・・
ブラウザになにも表示されない

●ＢＯＤＹ内指定
○例
<div style="color:red">
絵本の色は赤色です
</div>

・・・結果・・・
フォントサイズ標準で、文字色赤で表示されました

○例
<div style="color:red;font-size:50px;">
絵本の色は赤色です
</div>

・・・結果・・・
ブラウザに何も表示されませんでした

○２回目
<div style="color:red;font-size:50px;">
絵本の色は赤色です
</div>

・・・結果・・・
フォントサイズそれなりの大きさに。文字色は赤で表示されました

○３回目
全く同じタグでブラウザには何も表示されず・・・・

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

いったい何が問題なのでしょうか。
こんなところで足止めされているのが悲しいです・・・

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： r-y-u-k-i
回答日時：2008/08/14 20:13

No.2の者です。

ミスや説明の足りない部分があったので補足しておきます。
●3. が2つあるのは単なるミスです(笑)

<html lang="ja">としてしまったのは私のクセです。
<html>で特に問題はないでしょう。

（例えば「p.ehon」は<p>タグのみに適用され、<div>タグには適用されません。）
↓
「p.ehon」は、<p class="ehon">のみに適用されます。
<div class="ehon">としても、要素が<p>ではないため適用されません。

些細なことですが誤解を招きそうだったので一応補足させていただきました。

- 0
- 件

通報する

この回答へのお礼

r-y-u-k-iさん。
２度も回答、アドバイスありがとうございました。
ソースをコピペして、参考にさせていただきました。
おかげさまで、ヘッダー内に記述したものを反映させることができるようになりました。

自分で、何度も確認していても、スペルミスとかあるんですね・・・
（＾＾；）自力で・・・と思っていたのですが、質問してみてよかったです。

通報する

お礼日時：2008/08/16 08:59

No.2

回答者： r-y-u-k-i
回答日時：2008/08/14 20:05

回答になっていないかもしれませんが、ひとつのアドバイスとして。

私も独学で趣味の範囲の知識しかありませんので、違っていることもあるかもしれません。
まず、いくつか訂正箇所などがあるのでそれらをひとつずつあげていきます。

●1. <style>タグが閉じられていない。
<style type="text/css">

</style>

↑これ（最後の</style>）が必要です。
「ブラウザに何も表示されない」という問題はおそらくこれが原因でしょう。
タグの閉じ忘れには注意しましょう。

●2. 何箇所か記述ミスがある。
例)
×
<meta http-equiv="Content-Type" content="text/html;charaset=shift_JIS">
<meta http-equiv="Content-Type" content="tet/css">

○
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Style-Type" content="text/css">

1行目「charset」が「charaset」となってしまっています。
2行目「text/css」も「tet/css」となってしまっていますね。
cssに関するmetaタグは「Content-Style-Type」とした方が良いかもしれないです。
この辺は私も勉強不足なので、"とりあえず今はこんな感じに"程度として捉えて下さい。

●3. クラスの使い方の間違い。
一番最初に使っている方法（<p.ehon>）は私も正しいのかすらよく分かりません。
が、少なくとも<p.ehon>という使い方はまずしないと思われます。
クラスについては下記でもう少し詳しく説明しますので、そちらを参考に。
最初に使っている方法がうまく表示できないのはこのためかもしれません。

●3. タグは小文字が好ましい。
好みにもよると思いますが、<HTML>よりも<html>の方が良いということです。
HTMLの仕様上はどちらでも構わないのですが、XHTMLでは小文字でないといけないため、
小文字で書くクセをつけてしまうのがベストかと思われます（個人的にですが）。

以上を踏まえて、以下のソースを参考に書いてみてはいかがでしょうか。
解決にはなっていないかもしれませんが、これが分かるようになれば応用が利くと思われます。

--------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">

</style>
</head>

<body>
<div class="ehon">絵本の色は赤色です</div>
</body>
</html>

--------------------

簡単に説明いたしますと・・・。
スタイルシートにはクラスという便利なものがあるので、それを使ってみましょう。

まず、<style>タグ内でクラスについていろいろと記述します。
（外部ファイルから読み込む方法などもありますが、今回はhtml内に書きます。）
ここでは「ehon」という名前のクラスについて書きました。
クラスについて書く際は、必ずクラス名の前にピリオド"."を付けて書きます。

.ehon {
color: #FF0000;
font-size: 12px;
}

という感じになります。
Liko_Kaoruさんの一番最初の方法で「p.ehon」と書かれていたのもクラスです。
あのように「要素.クラス」という書き方をする場合、その要素でのみ適用されます。
（例えば「p.ehon」は<p>タグのみに適用され、<div>タグには適用されません。）

次に、そのようにして書いたものを実際に使って見ます。
<p.ehon>という方法ではなく、<p class="ehon">が正しい使い方です。
つまり、htmlのタグに「class="クラス名"」と追加してあげるだけで、
<style>タグ内に書いたスタイルシートが適用される、ということになります。

詳しくはスタイルシートの「クラス」について調べてみると良いかもしれません。

人に説明したことがないので、分かりにくくてすみませんでした。
他にもスタイルシートには便利なものがたくさんあります。
それでは、がんばって下さい。

- 0
- 件

通報する

No.1

回答者： steel_gray
回答日時：2008/08/14 19:12

<p.ehon>

↓
<p class="ehon">
CSSの参考書・サイトをもういっぺん見てみましょう

ブラウザにななにも表示されないケースは</style>が抜けている。

目で見てもチェックしきれないのでキカイにチェックしてもらうといいです。
http://openlab.ring.gr.jp/k16/htmllint/htmllint. …
↑HTMLの文法チェック
http://www.google.com/search?q=css+validator
↑CSSの文法チェック（なんかサイトに繋がらなかったので検索URL）

また、FirefoxのエラーコンソールでもCSSのエラーが確認できます。

この回答への補足

試してみた結果です
ヘッダー内に記述した物が、反映されないようです。
○例
<head>
<meta htttp-equiv="content-style-type" content="text/css">
<content="text/css">

</head>

<body>
<p class="ehon">
絵本の色は濃い青緑です
</p>

・・・結果・・・
標準フォント（サイズ）文字色黒で、「絵本の色は～」と表示。

ＢＯＤＹ内に直接記述したら、それは反映されました
○例
<div style="font-size:30px;color:#006666;text:align;">
この文字は３０ｐｘです
</div>
・・・結果・・・
濃い青緑の文字で、画面の横中央に「この文字は～」と表示されます

●色々試してみたのですが、ＢＯＤＹ内に直接記述した場合、反映されるが、ヘッダー内や、外部シートの場合は反映されないようです