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で質問しましょう!
似たような質問が見つかりました
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- オープンソース cssで中央寄せ 1 2023/05/19 06:25
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
html でのテキスト結合について
-
tableタグとformタグの組み合わせ
-
テーブルの一部分のセルだけに...
-
XHTMLに関する質問 順序が逆に...
-
vbscriptで時計を作りたい
-
Visual Studio で CLR 開発でデ...
-
同じwidth=200でもセル内の文字...
-
入れ子にしたテーブルをheight1...
-
同じクラス名はつけないほうが...
-
cssで、テーブルのtdの中の文字...
-
td width="180" と固定してるの...
-
テーブルの枠線に色が付かない
-
テーブル内のテーブルの高さを...
-
Tableタグで作成した表の縮小
-
formのinputなどの幅100%指定
-
表とリスト(ulとtable)の違い...
-
Tableのレスポンシブ対応、教え...
-
リストの記号を括弧付きの文字...
-
Tableタグ内のspan styleが適応...
-
ブラウザによってテーブルのセ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
html でのテキスト結合について
-
tableタグとformタグの組み合わせ
-
特殊文字の検索方法
-
テーブルの一部分のセルだけに...
-
同じクラス名はつけないほうが...
-
Tableタグで作成した表の縮小
-
td要素内のdiv要素をセンタリン...
-
Tableタグ内のspan styleが適応...
-
テーブル内のテーブルの高さを...
-
formのinputなどの幅100%指定
-
divで囲んだ文字が消える
-
cssで、テーブルのtdの中の文字...
-
vbscriptで時計を作りたい
-
HTMLのテーブルでそれぞれの大...
-
td width="180" と固定してるの...
-
同じwidth=200でもセル内の文字...
-
ブラウザによってテーブルのセ...
-
TDタグ内での均等割付の仕方
-
表とリスト(ulとtable)の違い...
-
<img>タグにCSSのclass設定可能?
おすすめ情報