CSS初心者です、宜しくお願いします。
CSS Validatorで検証した結果
文法解析エラーが発生しましたtext04 p・・・ @layout-grid-line : 1.8;
text04 p・・・Parse error - Unrecognized }
と結果が出ました、
以下CSS記述
.text04{
font-size : 16px;
font-family: Arial,"MS Pゴシック","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 Pゴシック","MS UI Gothic",Osaka,Sans-Serif;
line-height : 1.8;
color : #666666;
background-color : #ffffff;
margin-left : 0px;
layout-grid-line : 1.8;
}
どなたかご指導ください、お願いします。
No.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 Pゴシック","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 Pゴシック","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>
hitsumari様
大変参考になりました、ご指摘の通り修正しました。
imgが入っているのが原因だと解りました。
ありがとうございました。
No.3
- 回答日時:
補足なのですが、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>
No.2
- 回答日時:
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;を更に付け足した次第です、
なにか他に良い方法がありましたらご指導ください。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・14歳の自分に衝撃の事実を告げてください
- ・架空の映画のネタバレレビュー
- ・「お昼の放送」の思い出
- ・昨日見た夢を教えて下さい
- ・ちょっと先の未来クイズ第4問
- ・【大喜利】【投稿~10/21(月)】買ったばかりの自転車を分解してひと言
- ・メモのコツを教えてください!
- ・CDの保有枚数を教えてください
- ・ホテルを選ぶとき、これだけは譲れない条件TOP3は?
- ・家・車以外で、人生で一番奮発した買い物
- ・人生最悪の忘れ物
- ・【コナン30周年】嘘でしょ!?と思った○○周年を教えて【ハルヒ20周年】
- ・ハマっている「お菓子」を教えて!
- ・最近、いつ泣きましたか?
- ・夏が終わったと感じる瞬間って、どんな時?
- ・10秒目をつむったら…
- ・人生のプチ美学を教えてください!!
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・都道府県穴埋めゲーム
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
html でのテキスト結合について
-
tableタグとformタグの組み合わせ
-
同じクラス名はつけないほうが...
-
Tableタグで作成した表の縮小
-
4カラムのテーブルに絶対幅と相...
-
テーブルの一部分のセルだけに...
-
vb2005でwebbrowserに表示した...
-
表とリスト(ulとtable)の違い...
-
td要素内のdiv要素をセンタリン...
-
リストの記号を括弧付きの文字...
-
HTMLのTableの段組について
-
tableのヘッダを固定したい
-
インラインフレームの大きさの変更
-
テーブルタグの中にdivを含めて...
-
テーブルの行を折りたたみたい...
-
TABLEのセルの中の文字を行単位...
-
CSSで特定のテーブルだけに...
-
TRタグの余白をcssで設定するには
-
<th>タグを使っても太字にしな...
-
テーブルとテーブルの間隔について
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
tableタグとformタグの組み合わせ
-
html でのテキスト結合について
-
テーブルの一部分のセルだけに...
-
XHTMLに関する質問 順序が逆に...
-
<img>タグにCSSのclass設定可能?
-
Tableタグ内のspan styleが適応...
-
td要素内のdiv要素をセンタリン...
-
divで囲んだ文字が消える
-
同じクラス名はつけないほうが...
-
Tableタグで作成した表の縮小
-
cssで、テーブルのtdの中の文字...
-
表とリスト(ulとtable)の違い...
-
vbscriptで時計を作りたい
-
Firefoxを使ってるのですがズー...
-
ブラウザによってテーブルのセ...
-
formのinputなどの幅100%指定
-
入れ子にしたテーブルをheight1...
-
firefoxで「height: 100%;」と...
-
作成したメールフォームの内容...
-
レイヤーとセレクトボックスが...
おすすめ情報