CSSエラー！初心者が困っています

前へ 次へ
このQ&Aのポイント
  • CSS初心者がエラーに困っています。CSS Validatorで検証した結果、文法解析エラーが発生しました。具体的には、text04 pの中に認識できない}が含まれています。
  • エラーの原因は、text04 pの中にあるlayout-grid-line : 1.8;の記述です。正しい文法ではありません。
  • エラーを解決するためには、text04 pの行のlayout-grid-line : 1.8;を修正する必要があります。正しい文法に修正することでエラーが解消されます。
回答を見る
  • ベストアンサー

CSSでエラーが出ました

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; } どなたかご指導ください、お願いします。

  • HTML
  • 回答数4
  • ありがとう数5

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

  • ベストアンサー
  • hitsumari
  • ベストアンサー率63% (7/11)
回答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 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&amp;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>

gonta5401
質問者

お礼

hitsumari様 大変参考になりました、ご指摘の通り修正しました。 imgが入っているのが原因だと解りました。 ありがとうございました。

その他の回答 (3)

  • hitsumari
  • ベストアンサー率63% (7/11)
回答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のクラス指定箇所が間違っているのではと推測されます。 (もし分らなければそのソースを載せて頂ければ・・・と思います。)

gonta5401
質問者

お礼

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&amp;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)
回答No.2

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

gonta5401
質問者

お礼

line-height : 1.8;は指定してありまして IE6でline-height : 1.8;が無効されてるので layout-grid-line : 1.8;を更に付け足した次第です、 なにか他に良い方法がありましたらご指導ください。

noname#76085
noname#76085
回答No.1

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

gonta5401
質問者

お礼

□layout-grid-line : 1.8; □は全角スペース。を取り除いてみましたが 下記エラーが出ました？ プロパティ layout-grid-line は に存在しません : 1.8

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • CSSでbodyに入ってるこの意味は何でしょうか？

    あるサイトのCSSのbodyのfont sizeに 12px/1.22 "Osaka", "ＭＳ Ｐゴシック", Arial, sans-serif と、記述していましたが /1.22とは何を意味してるのでしょうか？

    • ベストアンサー
    • HTML
  • Firefoxで文字がimgの裏側に入ってしまう

    CSSでHPを作成しています、 ie6・7・8では下記ソースheader部分にimgを入れて<p>・・・</p>で 文字を上に表示しています、 ie6・7・8では思い通り表示されますがFirefoxでは<p>・・・</p>の文字が表示されません、imgの下側（裏側）になっているのか？ 下記にソースとCSS記述を書きましたので解決方法を教えてください。 ソース記述 <body><!-- Container --> <div id="container"><!-- Header --> <div id="header"><img src="img/logotop.gif" width="800" height="143" /> <h1>ブルベリーパン</h1> <p>ブルベリーパンを作って39年、厳選された素材と<br /> 熟成されたパン生地が生み出す匠の味、1日限定350個<br /> </p> <dl> <dd>：：：：：：：：：：：：：<br /> ・・・・・・・・・・・・・・・・・<br /> ・・・・・・・・・・・・・・・・・<br /> <dd> </dl> </div> CSS記述 #header{ margin-bottom : 0px; } #header h1{ font-size : 8px; color : #4a7aab; font-weight : 100; margin-top : -144px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; } #header p{ font-size : 13px; color : #000000; margin-top : 4px; padding-left : 3px; line-height : 1.6; margin-left : 10px; padding-top : 65px; font-family: Arial,"ＭＳ Ｐゴシック","MS UI Gothic",Osaka,Sans-Serif; width : 500px; float : left; } #header dd{ font-size : 13px; color : #4a7aab; margin-top : 0px; line-height : 1.4; font-family: Arial,"ＭＳ Ｐゴシック","MS UI Gothic",Osaka,Sans-Serif; }

  • fc2ブログのスタイルシートについて

    h1～h6タグの文字の大きさ＆改行（しない）を変更したいのですが、 fc2ブログのスタイルシートのどこに書き込めばいいのか分からない状態です。 色々調べてみたのですが、どうしても分からないので、分かる方がいましたら、教えて下さい。 よろしくお願いします。 ソースは、こちらになります。 （文字数が足りないので数ヵ所省きました）↓ body{ font-family: "Verdana","ＭＳ Ｐゴシック", "MS UI Gothic","Arial","Osaka"; margin:0px; margin-left:auto; margin-rught:auto; padding:0px; background-color: #FFFFFF; color:#666666; text-align:center; letter-spacing:1px; word-break: break-all; } #container{ width:840px; margin-right:auto; margin-left:auto; padding:0px 0px; background-color: #FFFFFF; border-left:1px solid #DECE21; border-right:1px solid #DECE21; } /* ### 共通のタグ ### */ blockquote{ font-family: "MS UI Gothic","Verdana","ＭＳ Ｐゴシック", "Arial","Osaka"; margin:15px 0px; padding:10px; background-color:; border:1px dashed #996600; font-size:12px; line-height:150%; width:90%; voice-family:"\"}\""; voice-family:inherit; width:90%; } html>body blockquote{ width:90%; } blockquote p{ margin:0px 0px; padding:0px; line-height:150%; } h1.blogtitle{ position:absolute; width:820px; font-family: "Century Gothic","MS UI Gothic","ＭＳ Ｐゴシック", "Arial","Osaka"; padding:0px; margin:0px; top:3px; left:20px; color:#333333; font-size:24px; font-weight:normal; z-index:1; } h1.blogtitle_back{ position:absolute; width:818px; font-family: "Century Gothic","MS UI Gothic","ＭＳ Ｐゴシック", "Arial","Osaka"; padding:0px; margin:0px 0px 0px 1px; top:4px; left:21px; color : #CCCCCC; font-size:24px; font-weight:normal; z-index:0; } /* ### メイン部（左側） ### */ #main{ width:590px; float:left; margin:0px; padding:0px; } #contents{ margin:0px 20px 0px 20px; padding:0px; text-align:left; width:590px; voice-family:"\"}\""; voice-family:inherit; width:550px; } html>body #contents{ width:550px; } /* ### エントリー（記事） ### */ .e_title{ font-family: "MS UI Gothic", "Verdana","ＭＳ Ｐゴシック", "Arial","Osaka"; height:20px; text-indent:60px; margin: 0px 0px 0px 0px; padding: 10px 0px 0px 0px; color:#967B3F; font-size:14px; font-weight:bold; letter-spacing:1px; } .e_date{ font-family: "Verdana","ＭＳ Ｐゴシック", "MS UI Gothic", "Arial","Osaka"; margin:0px 0px 30px 60px; text-align:left; color:#999999; font-size:10px; line-height:150%; letter-spacing:1px; } .e_body{ font-family: "MS UI Gothic","Verdana","ＭＳ Ｐゴシック", "Arial","Osaka"; margin:0px 0px 15px 0px; margin-bottom:25px; padding:0px ; color:#444444; font-size:12px; line-height:155%; letter-spacing:1px; } .e_body img, .e_body a img{ margin:2px; border:0px; } .e_body_w{ margin:0px; padding:5px 15px 5px 15px; background-attachment: scroll; background-image: url(http://blog-imgs-41.fc2.com/a/w/i/awitchsally/aws_np03_point.gif); background-repeat: no-repeat; background-position: 0% 0%; border:1px solid #E9F3E9; } .e_more{ margin:30px 0px 15px 0px; padding:0px; text-align:left; color:#333333; font-size:10px; font-weight:bold; letter-spacing:1px; } .e_state{ font-family: "Verdana","ＭＳ Ｐゴシック","MS UI Gothic", "Arial","Osaka"; margin:5px 0px; text-align:left; color#967B3F; font-size:10px; letter-spacing:1px; line-height:150%; font-weight:bold; }

    • ベストアンサー
    • HTML
  • CSSで文法エラーが出ました

    CSS素人です、 CSS Validator検証結果で下記エラーが出ました、IE6・IE7・IE8・firefoxでは表示は崩れませんが 下記エラーを無くしたいのですがどなたかご指導いただけませんでしょうか？ #mnu1 img 　文法解析エラーが発生しました @vertical-align:text-bottom; #mnu1 img　 Parse error - Unrecognized } .td01 文法解析エラーが発生しました @border-width : 1px 1px 1px 1px; 文法解析エラーが発生しました : solid solid solid solid;border-color : #999999 #999999 #999999 #999999;border-width : 1px 1px 1px 1px;} .td01a CSS記述は以下の通りです ul#menu{ margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; padding: 0px; } ul#menu li{ list-style-type : none; } ul#menu li a{display: block; text-decoration: none; outline: none; } #mnu1 a{ background-image : url(menu/menu1.gif); text-decoration : none; background-repeat : no-repeat; outline: none; display : block; width : 108px; height : 40px; } #mnu1 a:hover{ background-position : left bottom;} #mnu1{ margin-top : 0px; margin-bottom : 0px; } #mnu1 img{border-width : 0px 0px 0px 0px; 　vertical-align:text-bottom; } .td01{ font-size : 13px; font-family: Arial,"ＭＳ Ｐゴシック","MS UI Gothic",Osaka,Sans-Serif; background-color : #dce6f4; padding-top : 2px; padding-bottom : 2px; padding-left : 2px; 　border-width : 1px 1px 1px 1px;border-style : solid solid solid solid;border-color : #999999 #999999 #999999 #999999;border-width : 1px 1px 1px 1px;} .td01a{ font-size : 13px; font-family: Arial,"ＭＳ Ｐゴシック","MS UI Gothic",Osaka,Sans-Serif; background-color : #c1cdde; padding-top : 2px; padding-bottom : 2px; padding-left : 2px; 　border-width : 1px 1px 1px 1px;border-style : solid solid solid solid;border-color : #999999 #999999 #999999 #999999;border-width : 1px 1px 1px 1px;} ※ #mnu1 img内の　vertical-align:text-bottom;は 縦にメニューを並べているのですが各上下に隙間が入るので vertical-align:text-bottom;を入れたら隙間が無くなったので 使用した次第です。 以上、宜しくお願いします。

  • CSSファイル内のバグの原因

    あるサイトのリニューアル中リンクバナーに指定したレイアウト用のCSSが急に機能しなくなり、原因がわかりません。同じCSSファイルを使用したページで共通したバグがj生じるのでCSSファイルが原因と思いチェックしたのですが、自分では原因を突き止められずにいます。サイトは、 http://www.vesta.dti.ne.jp にアップロードしています。問題のCSSファイルの対象と思われるソースをコピーしました。宜しくお願いいたします。バグの原因になる要素でご存知のものがあれば教えて下さい。 body{font-family: Arial,sans-serif;color: #333333;line-height: 1.166;margin: 0px;padding: 0px;background: #cccccc;background-color: #cccccc;} a:link, a:visited{color: #005FA9;text-decoration: none;} a:hover{text-decoration: underline;} h1{ font: bold 120% Arial,sans-serif;color: #334d55;margin: 0px; padding: 0px;} h2{font: bold 120% Arial,sans-serif;color: #006699;margin: 0px; padding: 0px;} h3{font: bold 100% Arial,sans-serif;color: #334d55;margin: 0px;padding: 0px;} h4{ font: 100% Arial,sans-serif;color: #333333;margin: 0px;padding: 0px;} h5{font: 100% Arial,sans-serif; color: #334d55;margin: 0px;padding: 0px;} form {margin: 0;padding: 0;}label{ font: bold 1em Arial,sans-serif;color: #334d55;}input{font-family: Arial,sans-serif;} #pagecell1{position:absolute;top: 112px;left: 2%;right:2%;width:85.6%;background-color: #ffffff;} #tl {position:absolute;top: -1px;left: -1px;margin: 0px;padding: 0px;z-index: 100;} #tr {position:absolute;top: -1px;right: -1px;margin: 0px;padding: 0px;z-index: 100;} #masthead{position: absolute;top: 0px;left: 2%;right: 2%;width:85.6%;} #pageNav{float: right;width:190px;padding: 0px;background-color: #f5f7f7;border-left: 1px solid #cccccc;border-bottom: 1px solid #cccccc;font: small Verdana,sans-serif;} #content{padding: 0px 10px 0px 0px;margin:0px 190px 0px 0px; border-right: 1px solid #ccd2d2;} #siteName{margin: 0px;padding: 16px 0px 8px 0px;color: #ffffff;font-weight: normal;} #utility{font: 75% Verdana,sans-serif;position: absolute;top: 16px;right: 0px;color: #919999;} #utility a{color: #ffffff;} #utility a:hover{text-decoration: underline;} #pageName{padding: 0px 0px 14px 10px;margin: 0px;border-bottom:1px solid #ccd2d2;} #pageName h2{font: bold 165% "ＭＳ Ｐ明朝", "細明朝体", "ヒラギノ明朝 Pro W3";color: #336633;margin:0px;padding: 0px;} #pageName img{position: absolute;top: 0px;right: 6px;padding: 0px;margin: 0px;} #globalNav{position: relative;width: 100%;min-width: 640px;height: 32px;color: #cccccc;padding: 0px;margin: 0px;background-image:url(../commonimg/glbnav_background.gif);} #globalNav img{margin-bottom: -4px;} #gnl {position: absolute;top: 0px;left:0px;} #gnr {position: absolute;top: 0px;right:0px;} #globalLink{position: absolute;top: 6px;height: 22px;min-width: 640px;padding: 0px;margin: 0px;left: 10px;z-index: 100;} a.glink, a.glink:visited{font-size: small;color: #666666;font-weight: bold;margin: 0px;padding: 2px 5px 4px 5px;border-right: 1px solid #8FB8BC;} a.glink:hover{background-image:url(../commonimg/glblnav_selected.gif);text-decoration: none;} .skipLinks {display: none;} .subglobalNav{position: absolute;top: 84px;left: 0px;/*width: 100%;*/min-width: 640px;height: 20px;padding: 0px 0px 0px 10px;visibility: hidden;color: #ffffff;} .subglobalNav a:link, .subglobalNav a:visited{ font-size: 80%;color: #ffffcc;} .subglobalNav a:hover{color: #ffffcc;} #search{position: absolute;top: 5px;right: 10px;z-index: 101;} #search input{font-size: 70%;margin: 0px 0px 0px 10px; } #search a:link, #search a:visited {font-size: 80%;font-weight: bold;} #search a:hover{margin: 0px;}

  • CSSファイル内のバグの原因

    あるサイトのリニューアル中リンクバナーに指定したレイアウト用のCSSが急に機能しなくなり、原因がわかりません。同じCSSファイルを使用したページで共通したバグがj生じるのでCSSファイルが原因と思いチェックしたのですが、自分では原因を突き止められずにいます。サイトは、 ​http://www.vesta.dti.ne.jp​ にアップロードしています。問題のCSSファイルの対象と思われるソースをコピーしました。宜しくお願いいたします。バグの原因になる要素でご存知のものがあれば教えて下さい。 body{font-family: Arial,sans-serif;color: #333333;line-height: 1.166;margin: 0px;padding: 0px;background: #cccccc;background-color: #cccccc;} a:link, a:visited{color: #005FA9;text-decoration: none;} a:hover{text-decoration: underline;} h1{ font: bold 120% Arial,sans-serif;color: #334d55;margin: 0px; padding: 0px;} h2{font: bold 120% Arial,sans-serif;color: #006699;margin: 0px; padding: 0px;} h3{font: bold 100% Arial,sans-serif;color: #334d55;margin: 0px;padding: 0px;} h4{ font: 100% Arial,sans-serif;color: #333333;margin: 0px;padding: 0px;} h5{font: 100% Arial,sans-serif; color: #334d55;margin: 0px;padding: 0px;} form {margin: 0;padding: 0;}label{ font: bold 1em Arial,sans-serif;color: #334d55;}input{font-family: Arial,sans-serif;} #pagecell1{position:absolute;top: 112px;left: 2%;right:2%;width:85.6%;background-color: #ffffff;} #tl {position:absolute;top: -1px;left: -1px;margin: 0px;padding: 0px;z-index: 100;} #tr {position:absolute;top: -1px;right: -1px;margin: 0px;padding: 0px;z-index: 100;} #masthead{position: absolute;top: 0px;left: 2%;right: 2%;width:85.6%;} #pageNav{float: right;width:190px;padding: 0px;background-color: #f5f7f7;border-left: 1px solid #cccccc;border-bottom: 1px solid #cccccc;font: small Verdana,sans-serif;} #content{padding: 0px 10px 0px 0px;margin:0px 190px 0px 0px; border-right: 1px solid #ccd2d2;} #siteName{margin: 0px;padding: 16px 0px 8px 0px;color: #ffffff;font-weight: normal;} #utility{font: 75% Verdana,sans-serif;position: absolute;top: 16px;right: 0px;color: #919999;} #utility a{color: #ffffff;} #utility a:hover{text-decoration: underline;} #pageName{padding: 0px 0px 14px 10px;margin: 0px;border-bottom:1px solid #ccd2d2;} #pageName h2{font: bold 165% "ＭＳ Ｐ明朝", "細明朝体", "ヒラギノ明朝 Pro W3";color: #336633;margin:0px;padding: 0px;} #pageName img{position: absolute;top: 0px;right: 6px;padding: 0px;margin: 0px;} #globalNav{position: relative;width: 100%;min-width: 640px;height: 32px;color: #cccccc;padding: 0px;margin: 0px;background-image:url(../commonimg/glbnav_background.gif);} #globalNav img{margin-bottom: -4px;} #gnl {position: absolute;top: 0px;left:0px;} #gnr {position: absolute;top: 0px;right:0px;} #globalLink{position: absolute;top: 6px;height: 22px;min-width: 640px;padding: 0px;margin: 0px;left: 10px;z-index: 100;} a.glink, a.glink:visited{font-size: small;color: #666666;font-weight: bold;margin: 0px;padding: 2px 5px 4px 5px;border-right: 1px solid #8FB8BC;} a.glink:hover{background-image:url(../commonimg/glblnav_selected.gif);text-decoration: none;} .skipLinks {display: none;} .subglobalNav{position: absolute;top: 84px;left: 0px;/*width: 100%;*/min-width: 640px;height: 20px;padding: 0px 0px 0px 10px;visibility: hidden;color: #ffffff;} .subglobalNav a:link, .subglobalNav a:visited{ font-size: 80%;color: #ffffcc;} .subglobalNav a:hover{color: #ffffcc;} #search{position: absolute;top: 5px;right: 10px;z-index: 101;} #search input{font-size: 70%;margin: 0px 0px 0px 10px; } #search a:link, #search a:visited {font-size: 80%;font-weight: bold;} #search a:hover{margin: 0px;}

  • ▲▲HTML・CSSの BODY{} について▲▲

    CSSの BODY { ○○ } の中に記入する事について質問します。 例えば。 BODY { font-size : 12px; font-family : MS UI Gothic; font-color : #FF0000 } と指定した場合、普通に<BODY>内に入力したものは、 上記で指定したものになりますか？ もう1つは上記の指定以外に .font { font-size : 10px; font-family : MS UI Gothic; font-color : #000000 } 上記のものも指定したと想定し<BODY>内に あいうえおかきくけこさしすせそ <font span="font1">あいうえおかきくけそさしすせそ</span> と入力した場合<font span="font1">と指定した以外の場所は、 BODY { font-size : 12px; font-family : MS UI Gothic; font-color : #FF0000 } で指定したものになりますか？ 長くてスイマセン。おわかりになる方教えてください☆

    • ベストアンサー
    • HTML
  • CSS2.1とCSS３の違いを教えて下さい。

    HTMLの勉強中の作家です。 色々悩んだ末にサイトをHTML5に移行作業中です。 テキストを読んでもCSS３の書式がイマイチよく分かりません。 (CSS2.1の)指定は背景色、文字色(１部文字色変更含む)、フォントの種類、背景色etcetc…と言った至ってシンプルな文字のみのサイトです。 あちこちのサイトを見ながら悪戦苦闘をしていますが、CSSのチェックをかけるとエラーが出ます。 CSS2.1を３にするためにはどこをどう変えれば良いのでしょうか？ ちなみに @charset "UTF-8"; .ryoko { color : #407133;} .kazumi { color : #336070;} div,p { color : #222222;} p { font-family: Arial, Helvetica, sans-serif;} body { background-color:#e0ffe0;} a:link { color : #0000ff;} a:visited { color : #003333;} a:hover { color : #660000;} a:active { color:#660066;} p{ margin: 1px 0px 1em 0px; font-size:95%; line-height:103%;} div { color : #222222;} div { font-family: Arial, Helvetica, sans-serif;} div{ margin: 1px 0px 1em 0px; font-size:95%; line-height:103%;} .akeru{ line-height:1em; } ↑これです。テキストとCSS3について説明されているＨＰと各マチマチなもので戸惑っています。

    • ベストアンサー
    • HTML
  • CSSでの影の付け方

    http://radiocaroline.jp/ 上記のサイトのようにコンテンツ表示領域と 背景領域の間のグラデーション部分はどのように 設定すればいいのでしょうか？ 現在真ん中780px固定で左右を背景画像にしてます。 <style type="text/css"> <!-- body { background: #000000; margin: 0px; padding: 0px; text-align: center; color: #ffffff; background-color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 100%; background-image: url(images/bg.gif); background-repeat: repeat; } .oneColFixCtrHdr #container { width: 780px; background: #000000; margin: 0px auto; text-align: left; } .oneColFixCtrHdr #header { padding: 0px; background-color: #000000; } .oneColFixCtrHdr #header h1 { margin: 0px; padding: 0px 0px; } .oneColFixCtrHdr #mainContent { padding: 0px; background-color: #000000; } .oneColFixCtrHdr #footer { padding: 0px; background-color: #000000; } .oneColFixCtrHdr #footer p { margin: 0px; padding: 5px 0px; } #left { background-color:#000000; width:530px; float:left; } #right { background-color:#000000; width:250px; float:left; } .style2 { color: #FFFFFF; font-size: 80%; } .style1 {font-size: 60%; color: #CCCCCC; } .style6 {color: #CCCCCC} .style7 {font-size: 70%} --> </style>

  • h1のみが反映されない！？

    外部.cssに body { font-size : 80%; font-family:Verdana,Chicago,osaka,sans-serif,"ＭＳ Ｐゴシック"; line-height: 140%; text-align: center; background-color : #ffffff; color:#555; } /* タイトル*/ h1 { font-size:2.3em; color:#ffffff; text-align:left; padding: 10px 0px 0px 10px; } h2 { font-size:1.2em; color:#ff0000; text-align:left; padding: 10px 0px 0px 10px; } h3 { font-size:1.2em; color:#ff0000; text-align:rihgt; padding: 10px 10px 0px 0px; } と設定し、HTML内で任意の＊＊＊場所に <div id="＊＊＊"> <h1>タイトル</h1> </div> と記述してもデフォルトサイズと#555のカラーになってしまいます。 text-align:left;　や padding: 10px 0px 0px 10px; も全く反映しません。 タイトルの位置を任意の場所を変更しても、状況は同じで <h1>を<h2>や<h3>に打ち直すと.css通りきちんと反映されます。 全体.css記述をコピーすると膨大なので省略しますが、解せないのは<h2>や<h3>なら反映するのに、<h1>のみ反映しないのがわかりません。 色々試してみましたが、今現在は<h1>で表示したいタイトルを h2 { font-size:2.3em; color:#ffffff; text-align:left; padding: 10px 0px 0px 10px; } としてＵＰしてますが、<h1>と記述してWEB上で反映しない原因は何でしょうか？宜しくお願い致します。

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する