ベストアンサー

ＣＳＳが反映されません

2008/08/14 18:39

勉強不足は承知ですが、もうどうにもお手上げ状態です。質問させてください。ＣＳＳを勉強しているのですが、反映されません（本や、サイトのサンプルとおり記述しても、です）（タグ、スペルの間違いがないかは１０回以上確かめています）（ＣＳＳサイトのサンプルをクリックすると、それは表示されます） ●ヘッダー内に指定すると、反映されない ○例　<!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> ・・・結果・・・フォントサイズそれなりの大きさに。文字色は赤で表示されました ○３回目全く同じタグでブラウザには何も表示されず・・・・ ///////////////////////////////////////////////////////////// いったい何が問題なのでしょうか。こんなところで足止めされているのが悲しいです・・・

Liko_Kaoru
お礼率46% (196/424)

みんなの回答 （3）
専門家の回答

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

ベストアンサー

r-y-u-k-i
ベストアンサー率100% (1/1)

2008/08/14 20:13 回答No.3

No.2の者です。ミスや説明の足りない部分があったので補足しておきます。 ●3. が2つあるのは単なるミスです(笑) <html lang="ja">としてしまったのは私のクセです。 <html>で特に問題はないでしょう。（例えば「p.ehon」は<p>タグのみに適用され、<div>タグには適用されません。） ↓ 「p.ehon」は、<p class="ehon">のみに適用されます。 <div class="ehon">としても、要素が<p>ではないため適用されません。些細なことですが誤解を招きそうだったので一応補足させていただきました。

質問者

お礼 2008/08/16 08:59

r-y-u-k-iさん。２度も回答、アドバイスありがとうございました。ソースをコピペして、参考にさせていただきました。おかげさまで、ヘッダー内に記述したものを反映させることができるようになりました。自分で、何度も確認していても、スペルミスとかあるんですね・・・（＾＾；）自力で・・・と思っていたのですが、質問してみてよかったです。

その他の回答 (2)

r-y-u-k-i
ベストアンサー率100% (1/1)

2008/08/14 20:05 回答No.2

回答になっていないかもしれませんが、ひとつのアドバイスとして。私も独学で趣味の範囲の知識しかありませんので、違っていることもあるかもしれません。まず、いくつか訂正箇所などがあるのでそれらをひとつずつあげていきます。 ●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>タグ内に書いたスタイルシートが適用される、ということになります。詳しくはスタイルシートの「クラス」について調べてみると良いかもしれません。人に説明したことがないので、分かりにくくてすみませんでした。他にもスタイルシートには便利なものがたくさんあります。それでは、がんばって下さい。

steel_gray
ベストアンサー率66% (1052/1578)

2008/08/14 19:12 回答No.1

<p.ehon> ↓ <p class="ehon"> CSSの参考書・サイトをもういっぺん見てみましょうブラウザにななにも表示されないケースは</style>が抜けている。目で見てもチェックしきれないのでキカイにチェックしてもらうといいです。 http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ↑HTMLの文法チェック http://www.google.com/search?q=css+validator ↑CSSの文法チェック（なんかサイトに繋がらなかったので検索URL）また、FirefoxのエラーコンソールでもCSSのエラーが確認できます。

質問者

お礼 2008/08/14 19:49

ありがとうございます！ p class="ehon"とするのですね。これでもういっぺんやってみます

質問者

補足 2008/08/15 12:07

試してみた結果ですヘッダー内に記述した物が、反映されないようです。 ○例 <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> ・・・結果・・・濃い青緑の文字で、画面の横中央に「この文字は～」と表示されます ●色々試してみたのですが、ＢＯＤＹ内に直接記述した場合、反映されるが、ヘッダー内や、外部シートの場合は反映されないようです

関連するQ&A

ＣＳＳ今度は外部ファイル！
前回「ＣＳＳが反映されない」で質問させていただきました。おかげさまで、ヘッダー内で記述したものが、反映されるようになりました。ところで、今度は外部ファイルの読み込みで「できない！」となっています。自分ではどこがいけないのか、発見できなかったので、また皆さんのお力をいただきたいと思います。 ○abc.css(外部ファイル） .body{ color:#006666; font-size:30px; } ○ＨＴＭＬファイル <! 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">  </style> </head> <body> 背景色は濃い青緑です<br> フォントサイズは３０ｐｘ・・・<br> <br> になるはずです・・・ </body> </html> ・・・結果・・・真っ白な画面に標準フォントで表示。 ○外部ファイル .hp-name{ font-size:55px; color:#006666; text-align:center; } ⇒ファイル名　hp-name.css ○ＨＴＭＬファイル <! 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">  </style> </head> <body> <div class="hp-name"> ＨＰ名は「○○△△◇◇」です </div> ////////////////////////////////////////////////////////////////////////////////////// 今度はどこがいけないのでしょう。 <link rel・・・・・・・・で、外部ファイルを読み込むだけではいけないのでしょうか？それとも、外部ファイルの書き方がいけないのでしょうか？外部ファイルには「スタイルシートの部分だけ」記述すればいいと思っていたのですが・・・ ○外部ファイルを <style type="text/css">  </style> をつけてみたのですが、ダメでした
- ベストアンサー
- その他（インターネット・Webサービス）
IE用CSSが適用されない
通常は12pxを指定して、IEのみフォントサイズを11px指定したいのです。 <!DOCTYPE HTML> <html lang="jp"> <head> <meta charset="UTF-8"> <title>タイトル</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Style-Type" content="text/css">  <style> body { background-color:#FFFFFF; color:#333333; font: 'Lucida Grande', Verdana, Arial, 'Hiragino Kaku Gothic Pro', Meiryo, 'メイリオ', sans-serif; } #figure_main { font-size:12px; margin-top:10px; margin-left:10px; width:510px; } </style> </head> <body> <div id="figure_main"> <div class="box1"> <span>取締役会</span> </div> <div class="box1"> <span>取締役社長</span> </div> <div class="box2"> <span>常勤役員会</span> </div> <div> <ul> <li class="list_l">営業局</li> <li>人材派遣部</li> </ul> </div> </div> </body> </html> HTMLには<!--[if IE]>を記述し、 ie.cssには @charset "utf-8"; /* CSS Document */ #figure_main { font-size:11px; } と記述しましたが、適用されませんでした。適用されない理由を教えてくださいますか？宜しくお願いします。
- ベストアンサー
- HTML
外部CSSと　HEAD内の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> です。誰かお答えくださいませ。
- ベストアンサー
- Mac
急にCSSが反映されなくなった
質問お願いします。自社サイトの更新を担当することになったのですが、数日前まできちんとサイト上でも CSSが反映されていたのに、先日からいきなりCSSが反映されなくなり原因が分からず困っています。当方、コードは読める位の超初心者レベルです。。因みに、コードは下記のようになっています。（途中省略してあります）また、Dreamweaver8を使用しています。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta name="copyright" content="Nikukyu-Punch" /> <title>自社サイト</title> <meta name="description" content="○○" /> <meta name="keywords" content="○○" /> <link href="style.css" rel="stylesheet" type="text/css" /> <style type="text/css">  </style> </head> <body> <div id="container"> <div id="header"> <h1>○○</h1> <a href="index.html"><img src="images/logo1.gif" alt="○○" name="logo" width="653" height="114" id="logo" /></a></div>  <div id="contents"> <div id="wrap"> <div id="main"> <h2>○○</h2> <br /> <p >○○</p> <div class="item-box"><img src="images/item/3401.jpg" alt="○" width="164" height="164" /><div class="box-btn3"><a href="○"><img src="images/new1.gif" alt="new" />○○<br /> </a></div> </div> <div class="item-box"><img src="images/item/3403.jpg" alt="○○）" width="164" height="164" /> <div class="box-btn3"><a href="○○">○○</a></div> </div> </div>  <div id="sub"> </div>  <div id="side">  <div id="footer"> Copyright(C)○○ All Rights Reserved.<br /> </div>  </div>  </div>  </body> </html> ---------------------CSS----------------------------------- @charset "shift_jis"; body { font-family: "メイリオ", Meiryo,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳＰゴシック", "MS PGothic", sans-serif; font-size: 90%; line-height: 2; color: #333333; margin: 0px; padding: 0px; text-align: center; } /*コンテナー ---------------------------------------------------------------------------*/ #container { text-align: left; width: 1091px; margin-right: auto; margin-left: auto; border-top: 5px solid #ff476d; background-color: #FFFFFF; } /*３カラムを囲むボックス ---------------------------------------------------------------------------*/ #contents { clear: left; width: 100%; } /*左・中央を囲むボックス ---------------------------------------------------------------------------*/ #wrap { width: 897px; float: left; padding-bottom: 50px; margin-top: 20px; } /*中央ブロック ---------------------------------------------------------------------------*/ #main { float: right; width: 703px; } #main .item-box{ foat:left; width:200px; height:300px; border:1px #CCCCCC solid; padding:5px 5px 0px 5px; float: left; margin-top: 0px; margin-right: 6px; margin-bottom: 15px; margin-left: 15px; } #main .item-box img{ /*margin: 5px 0px 5px 5px;*/ margin-left:15px; border:solid #cccccc 1px; } #main .box-btn3 { font-size:10px; color: #333333; width:164px; text-align:center; padding: 0px 0px 0px 0px; margin-left:15px; border:1px #CCCCCC solid; } /*フッター ---------------------------------------------------------------------------*/ #footer { clear: both; width: 100%; text-align: center; border-top: 1px solid #bfbfbf; padding-top: 1em; padding-bottom: 1em; } どなたかご教授頂けたら助かります
- 締切済み
- デザイナー・クリエイティブ職
CSSが正確に反映されません。
４つの枠を丸で囲み、かつそれぞれの枠を等間隔で空けたいと思います丁度以下の2つを表示した場合の、contentsとmainの間の間隔が理想的です。しかし書いたCSSの設定が正確に反映されません。 headerとfooterもこの大きさで広げたいと思うのですが、広がりません。また、なぜheaderは丸くならず、footerはサイズからはみ出すのでしょうか。背景を赤に設定しているのですが、それも反映されません。なぜこうなるのかどなたかご存知の方、ご指摘いただけると助かります。どうかよろしくお願いします。以下、2つのファイルは同じフォルダに保存しました。 dreamweaverのアカデミック版で作り、firefox3.6.13で表示しています。 style.css ---------------------------------------------------------- @charset "utf-8"; /* CSS Document */  body { background-color: red; }  #wrapper, #main, #header, #menu, #footer { width:1120px; }  #header, #menu, #contents, #footer { background-color: #66FFFF; border:2px solid #999; padding: 8px; margin-bottom:5px; -webkit-border-radius: 5px; /* Safari,Google Chrome用 */ -moz-border-radius: 5px; /* Firefox用 */ }  #wrapper { margin: 0 auto; line-height: 1.5; } #main { } #header { height: 50px; } #menu { width: 160px; float: left; } #menu ul { list-style: none; margin-left: 1em; } #contents { float: right; width: 900px; } #footer { clear: both; height: 50px; text-align: center; } --> ------------------------------------------------------------------------------------ index.html ------------------------------------------------------------------------------------ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"><head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>勉強用</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="wrapper"> <div id="header"> <h1>Site Title</h1> </div> <div id="main"> <div id="menu"> <p><strong>float:left</strong></p> <ul> <li>Menu</li> <li>Menu</li> </ul> </div> <div id="contents"> <h2>Sub Title</h2> <p><strong>float:left</strong></p> <h2>Sub Title</h2> <p>text</p> </div> </div> <div id="footer"> <p>Footer</p> </div> </div> </body> </html>
- 締切済み
- CSS
html,css初心者です。ヘッダーの余白について
ヘッダーの余白について教えて下さい。どうしてもヘッダーの上部分に余白ができてしまいます。 HTMLとCSSをはります。 bodyに色をつけるとヘッダー上部分の余白の色も色がついてしまうので困っています・・・ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <link rel="stylesheet" href="font.css" type="text/css"> </head> <body> <div id="header"> あいうえお </div> </body> <html> CSS #header{ width: 980px; margin: 0 auto; background: #fff; text-align: left; } 宜しくお願いします。
- ベストアンサー
- HTML
【フォント】記述したCSSが反映されない
ログを検索しましたが同様の質問は無いようなので投稿させて頂きます。先日PCを買い替えましてXPからVistaへと移行しました。しかし新しいPCで自分のサイトを見てみると、CSSでフォントをTahomaに指定していたページの文章が何故かゴシック体で表示されています。（サイトは旧PCでビルダー7を利用して作成したものです）古いPCからHTMLのデータを移動し早速ソースを確認、上書き保存等してみましたがフォントはゴシック体のまま。明朝なども試しましたが反映されてくれません。やはりOSやブラウザの変更が原因なのでしょうか。アドバイスをよろしくお願いします。 ↓HTMLソースの一部を掲載します <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <meta name="robots" content="noindex,nofollow"> <STYLE type="text/css">  </STYLE> <style type="text/css">  </style> <style type=text/css>  </STYLE> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 7.0.0.0 for Windows"> <META http-equiv="Content-Style-Type" content="text/css"> <META name="IBM:HPB-Input-Mode" content="mode/flm; pagewidth=750; pageheight=900"> <TITLE>(仮）</TITLE> </HEAD>
- ベストアンサー
- HTML
cssでのレイアウト
下をピッタリそろえて「Ｌ」のような形にしたいのですが、簡単な方法を教えてください。下がそろっていませんが、イメージは↓のような感じです。もっと簡単に下揃えをつくる基本的な方法があったような気がするのですが分かりません。宜しくお願いします。 ■html■ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional1//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>CSS練習</title> <link href="def2.css" rel="stylesheet" type="text/css"> </head> <body> <div class="blue"> <h1>あ行</h1> あいうえお </div> <div class="red"> <h1>か行</h1> かきくけこ </div> <div class="blue"> <h1>さ行</h1> さしすせそ </div> <div class="a"> <h1>あ行</h1> あいうえお </div> <div class="ka"> <h1>か行</h1> かきくけこ </div> <div class="sa"> <h1>さ行</h1> さしすせそ </div> </body> </html> ■CSS■ body { font-size: 12px; color: #333333; background-color: #FFFFFF; } h1 { color: #000000; font-size: 16px; } div.red { background-color: #ff3333; } div.blue { background-color: #3333ff; } div { width: 3cm; } div.a { background-color: #ff7777; } div.ka { margin-top: -4em; margin-left: 3cm; background-color: #ff7777; } div.sa { margin-top: -4em; margin-left: 6cm; background-color: #77ff77; }
- ベストアンサー
- HTML
CSSで左側の余白
CSS本を見ながら苦闘しています。下のようなCSSを書いたのですが、全体のレイアウトが左寄せから10pxほど余白が出て表示されてしまいます。 HTMLではそのような指定はしていません。どうしてなのでしょうか。また、どのようにしたら良いのでしょうか。レイアウトは div#top div#top1 で２段上下にブロックしたあと、左右のブロックで分けています。 ※また、:と;の間にスペースを入れる、入れないは本によってマチマチなのですが、どのような書き方が正しいのでしょうか。 <style type="text/css">  </style>
- ベストアンサー
- HTML
CSSで設定した背景画像がFirefoxだとズレて表示されます
以下のように、CSSを設定しました。 -- CSSの内容(抜粋) ------------------------------- H2{ 　　color:#333333; 　　background-image:url(img/title-01.jpg); 　　background-repeat:repeat-x; 　　padding:3px 25px; 　　font-family:"Lucida Sans"; 　　font-size:medium; } -- HTMLの指定 ------------------------------------ <!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"> <title>タイトル</title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <div id="info-area"> 　<h2>いろはにほへと</h2>　←問題なくタイトル文字の後ろに背景画像title-01.jpgが表示されている　<div></div> 　<div></div> </div> <div id="main-area"> 　<h2>ちりぬるをわか</h2>　←大幅に上方にズレて表示される　<div></div> 　<div></div> </div> …以下省略… CSSは外部読込にしてあり、HTML内には幅や高さ，色などを指定するタグは一切ありません。問題の部分に到達するまでのタグはなお、上記の指定方法でInternetExplorer6.02とSleipnir2.8.5では問題なく表示されています。表示が崩れたFirefoxは3.0.11です。 Firefoxでも意図したように表示される方法はありますか？
- ベストアンサー
- CSS

ＣＳＳが反映されません