- ベストアンサー
CSSエラー！初心者が困っています
- CSS初心者がエラーに困っています。CSS Validatorで検証した結果、文法解析エラーが発生しました。具体的には、text04 pの中に認識できない}が含まれています。
- エラーの原因は、text04 pの中にあるlayout-grid-line : 1.8;の記述です。正しい文法ではありません。
- エラーを解決するためには、text04 pの行のlayout-grid-line : 1.8;を修正する必要があります。正しい文法に修正することでエラーが解消されます。
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
訂正と補足です。 ソースを拝見しましたが、問題ないかと思います。 CSS Validatorでのエラーは layout-grid-lineがCSS3によるものだと思われ、 通常IE5.0以上のブラウザで拝見する分にはエラーとはなりません。 ただ、やはりlayout-grid-lineはIEのみであるのに対し、 line-heightはCSS1でありOPやFF、Macブラウザにも対応しています。 以上からlayout-grid-lineを記載する必要性はないと思います。 また、上記のCSSですと line-heightとlayout-grid-lineが同じクラスの要素内に競合しており、 この場合はline-heightが優先されますので、 後者を記載しても意味を成しません。 なので、.text04 p内のlayout-grid-line : 1.8;の部分を削除して構わないと思います。 加えて、DIVのクラス(text04)で既にline-heightを指定されているので 入れ子で指定する必要はありません。 .text04{ font-size : 16px; font-family: Arial,"ＭＳ Ｐゴシック","MS UI Gothic",Osaka,Sans-Serif; line-height : 180%; color : #666666; background-color : #ffffff; margin-left : 0px; padding-left : 10px;} .text04 p{ font-size : 14px; margin-left : 0px;} 上記で十分だと思います。 ただソースを拝見して気付いたのですが、 冒頭にimgタグを入れられてますので、 その所為でline-heightの指定が反映されなかったのではないでしょうか。 imgタグを全て外した状態ですと、正常に1.8倍の行間を保つ事が出来ました。 もしimgタグを入れたいのであれば、 表のように記載されてますのでtableタグで整理する方が良いと思います。 ▼サンプル▼ <html><head> <style type="text/css"> <!-- .text04{ font-size : 16px; font-family: Arial,"ＭＳ Ｐゴシック","MS UI Gothic",Osaka,Sans-Serif; line-height : 1.8; color : #666666; background-color : #ffffff; margin-left : 0px; padding-left : 10px;} .text04 td{ font-size : 14px; padding-left : 10px;} --> </style></head> <body> <Table border="0" class="text04"><tr><td><strong>＜コミュニティデータ＞</strong></td></tr> <tr><td><img src="img/speser.gif" width="32" height="12" alt="テキサス州,リサーチバレー,工業団地" /></td></tr> <tr><td><img src="img/yaji01.gif" width="18" height="11" alt="都市名" />都市名</td> <td>テキサス州ブラゾス郡、カレッジステーション市、ブライアン市</td></tr> <tr><td><img src="img/yaji01.gif" width="18" height="11" alt="主要都市までの距離" />主要都市までの距離</td> <td>ダラス（100マイル）、ヒューストン（180マイル）、サンアントニオ（182マイル）</td></tr> <tr><td><img src="img/yaji01.gif" width="18" height="11" alt="人口（両都市合計）" />人口（両都市合計）</td><td>192,152人</td></tr> <tr><td><img src="img/yaji01.gif" width="18" height="11" alt="失業率" />失業率</td> <td>約3.4% （2008年3月現在）</td></tr> <tr><td><img src="img/yaji01.gif" width="18" height="11" alt="最寄のコマーシャル空港" />最寄のコマーシャル空港</td> <td>Easterwood Airport （10マイル</td></tr> <tr><td><img src="img/yaji01.gif" width="18" height="11" alt="主な進出企業">主な進出企業</td> <td>東洋インキ製造、Honeywell International、その他</td></tr> <tr><td><img src="img/yaji01.gif" width="18" height="11" alt="高等教育" />高等教育</td> <td>Texas A&M University</td></tr> <tr><td><img src="img/yaji01.gif" width="18" height="11" alt="その他" />その他</td> <td>ブライアン市には、1997年に、第41代大統領George H W Bush<br /> の大統領図書館が開設されました。本施設は、図書館のみでなく、<br /> 文化交流の為の施設としても市民に開放されています。</td></tr></table> </body></html>
その他の回答 (3)
- hitsumari
- ベストアンサー率63% (7/11)
補足なのですが、layout-grid-lineはCSSレベル3で対応ブラウザは限られています。 このため、CSS Validator(CSS2.1まで)ではエラーを返します。 所で、line-heightについてはCSSレベル1で、 IE5.0以上であれば使えるはず・・・ .text04 p{line-height : 1.8;} これだけで改行180％になります。 (IE6.0のブラウザがないので確認できませんが・・・) .text04 pのクラス指定箇所のソースに誤りはありませんか？ 1度ソースを確認してみてください。 因みにline-heightは line-height : 1.8; で1.8倍になりますが layout-grid-lineは layout-grid-line : 1.8em; というように サイズを指定してあげないと駄目だと思います。 そして両方を同じクラスで指定すると、とんでもない行間になります。 この事から言っても、多分.text04 pのクラス指定箇所が間違っているのではと推測されます。 (もし分らなければそのソースを載せて頂ければ・・・と思います。)
お礼
hitsumariさま、ありがとうございます。 ソースの記述は下記の通りです <div class="text04"> <p><strong>＜コミュニティデータ＞</strong><br /> <img src="img/speser.gif" width="32" height="12" alt="テキサス州,リサーチバレー,工業団地" /><br /> <img src="img/yaji01.gif" width="18" height="11" alt="都市名" />都市名 テキサス州ブラゾス郡、カレッジステーション市、ブライアン市<br /> <img src="img/yaji01.gif" width="18" height="11" alt="主要都市までの距離" />主要都市までの距離 ダラス（100マイル）、ヒューストン（180マイル）、サンアントニオ<br /> （182マイル）<br /> <img src="img/yaji01.gif" width="18" height="11" alt="人口（両都市合計）" />人口（両都市合計） 192,152人<br /> <img src="img/yaji01.gif" width="18" height="11" alt="失業率" />失業率 約3.4% （2008年3月現在）<br /> <img src="img/yaji01.gif" width="18" height="11" alt="最寄のコマーシャル空港" />最寄のコマーシャル空港 Easterwood Airport （10マイル）<br /> <img src="img/yaji01.gif" width="18" height="11" alt="主な進出企業" />主な進出企業 東洋インキ製造、Honeywell International、その他<br /> <img src="img/yaji01.gif" width="18" height="11" alt="高等教育" />高等教育 Texas A&M University<br /> <img src="img/yaji01.gif" width="18" height="11" alt="その他" />その他 ブライアン市には、1997年に、第41代大統領George H W Bush<br /> の大統領図書館が開設されました。本施設は、図書館のみでなく、<br /> 文化交流の為の施設としても市民に開放されています。</p> </div>
- hitsumari
- ベストアンサー率63% (7/11)
layout-grid-lineは確かCSSレベル3でIE独自の文法です。 CSS ValidatorではCSSレベル2.1を適応しているので、エラーが出るのだと思います。 行間を指定したいのであれば × layout-grid-line : 1.8; ではなく ○ line-height : 1.8; に変更してみてください。 (×、○、全角空白などは削除してくださいね)
お礼
line-height : 1.8;は指定してありまして IE6でline-height : 1.8;が無効されてるので layout-grid-line : 1.8;を更に付け足した次第です、 なにか他に良い方法がありましたらご指導ください。
□layout-grid-line : 1.8; □は全角スペース。 聞く前にソースを確認しましょう。
お礼
□layout-grid-line : 1.8; □は全角スペース。を取り除いてみましたが 下記エラーが出ました？ プロパティ layout-grid-line は に存在しません : 1.8
お礼
hitsumari様 大変参考になりました、ご指摘の通り修正しました。 imgが入っているのが原因だと解りました。 ありがとうございました。