CSSでエラーが出ました

Question

CSS初心者です、宜しくお願いします。
CSS Validatorで検証した結果
文法解析エラーが発生しましたtext04 p・・・ @layout-grid-line : 1.8;
text04 p・・・Parse error - Unrecognized } 
と結果が出ました、
以下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;
  width : 662px;
  padding-left : 10px;
}
.text04 p{
  font-size : 14px;
  font-family: Arial,"ＭＳ Ｐゴシック","MS UI Gothic",Osaka,Sans-Serif;
  line-height : 1.8;
  color : #666666;
  background-color : #ffffff;
  margin-left : 0px;
　layout-grid-line : 1.8;
}
どなたかご指導ください、お願いします。

hitsumari · Accepted Answer

訂正と補足です。ソースを拝見しましたが、問題ないかと思います。 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タグで整理する方が良いと思います。　▼サンプル▼

＜コミュニティデータ＞

都市名	テキサス州ブラゾス郡、カレッジステーション市、ブライアン市
主要都市までの距離	ダラス（100マイル）、ヒューストン（180マイル）、サンアントニオ（182マイル）
人口（両都市合計）	192,152人
失業率	約3.4% （2008年3月現在）
最寄のコマーシャル空港	Easterwood Airport （10マイル
主な進出企業	東洋インキ製造、Honeywell International、その他
高等教育	Texas A&M University
その他	ブライアン市には、1997年に、第41代大統領George H W Bush の大統領図書館が開設されました。本施設は、図書館のみでなく、文化交流の為の施設としても市民に開放されています。

hitsumari · Answer

補足なのですが、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 · Answer

layout-grid-lineは確かCSSレベル3でIE独自の文法です。
CSS ValidatorではCSSレベル2.1を適応しているので、エラーが出るのだと思います。
行間を指定したいのであれば
　　×　layout-grid-line : 1.8;　ではなく
　　○　line-height : 1.8;　に変更してみてください。
(×、○、全角空白などは削除してくださいね)

nekowokai · Answer

□layout-grid-line : 1.8;
□は全角スペース。

聞く前にソースを確認しましょう。

CSSでエラーが出ました

訂正と補足です。

補足なのですが、layout-grid-lineはCSSレベル3で対応ブラウザは限られています。

layout-grid-lineは確かCSSレベル3でIE独自の文法です。

□layout-grid-line : 1.8;

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング