CSSエラーについて教えてください

このQ&Aのポイント
  • CSSエラーについてW3Cでチェックした結果、6つのエラーが発生しました。
  • 具体的なエラーメッセージは次の通りです。
  • さまざまな要素に対して、文法解析エラーが発生しました。
回答を見る
  • ベストアンサー

CSSエラーについて教えて下さい。

ホームページのCSSエラーをW3Cでチェックしました。 すると6つのエラーが出ました。 それぞれの意味がわからないので教えていただけませんでしょうか。 該当のファイルはreset.cssだと思いますので、コピペします。 8 body 文法解析エラーが発生しました ;*font-size:small; 8 body 文法解析エラーが発生しました ;} 22 input, textarea, select 文法解析エラーが発生しました {*font-size:100%; 22 input, textarea, select 文法解析エラーが発生しました ;} 24 pre, code, kbd, samp, tt 文法解析エラーが発生しました ;*font-size:108%; 28 dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, input, textarea, p 文法解析エラーが発生しました [:100%;} /* ƒfƒtƒHƒ‹ƒg’l */ /**************************************************/ div] /**************************************************/ /* ブラウザ別デフォルト値リセット */ /**************************************************/ /* リセット */ /**************************************************/ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;} body{font:13px/1.231 "MS Pゴシック",arial,helvetica,clean,sans-serif;*font-size:small;} table{border-collapse:collapse;border-spacing:0;font-size:inherit;font:100%;} td{vertical-align:top;} fieldset,img{border:0;} address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;} strong{font-weight:bold;} ol,ul,li{text-align:left;list-style:none;} caption,th{text-align:left;} h1,h2,h3,h4,h5,h6{font-size:100%;} q:before,q:after{content:'';} abbr,acronym{border:0;font-variant:normal;} sup{vertical-align:text-top;} sub{vertical-align:text-bottom;} input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;} input,textarea,select{*font-size:100%;} legend{color:#000;} pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;} /* デフォルト値 */ /**************************************************/ div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,input,textarea,p{text-align:left;} h1,h2,h3,h4,h5,h6,dt{font-weight:bold;} p{line-height:1.6em;} img{display:block;} body{color:#333;background:#FFF;text-align:center;} a:link{color:#069;} a:visited{color:#069;} a:hover{color:#F60;} a:active{text-decoration:none;} /**************************************************/

  • CSS
  • 回答数1
  • ありがとう数1

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

  • ベストアンサー
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

>文法解析エラーが発生しました  これ以上の説明は無いです。文法が間違っている。   具体的には、*font-sizeというプロパティはありません。宣言ブロックは{}で囲います。  ⇒Syntax and basic data types - CSS 2.1 spec (ja)( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/syndata.html )

kino000320
質問者

お礼

助かりました。 デザイン会社でつくったものですので、そんなこととは思いませんでした。 読んで字のごとくなのか、私の設定が悪いのか、バージョンなどの条件が悪いのかわからずずっと考えていました。 もっと、ではどう書き直すべきかcssの勉強をしようとおもいます。 ありがとうございました。

関連するQ&A

  • CSS、おかしいですか?

    CSSですが、本を見てやっています。 下記のように記述したのですが、書かなくてもよい記述とか、おかしいところ、ありますでしょうか? <style type=text/css> body{font-size:10pt} td {font-size:10pt; line-height:12pt} tr {font-size:10pt line-height:12pt} dive {font-size:10pt;line-height:12pt} a:link {font-size:10pt; font-weight:normal; font-style:normal; text-decoration:underline; text-align:left; vertical-align:; color:#990000} a:visited {font-size:10pt; font-weight:normal; font-style:normal; text-decoration:underline; text-align:left; vertical-align:; color:#990000} a:active {font-size:10pt; font-weight:normal; font-style:normal; text-decoration:underline; text-align:left; vertical-align:; color:#ff0099} a:hover {font-size:10pt; font-weight:normal; font-style:normal; text-decoration:underline; text-align:left; vertical-align:; color:#ff0099} </style>

    • 締切済み
    • CSS
  • CSSがうまくレイアウトできない。。

    こんにちは。 この度、ホームページを一新しようとCSSに挑戦中です。 いろいろな書籍等を参考にしながら、やってみているのですが、 出だしでつまずいています。 現在、下記のCSSにて http://www.masudaclub.com/newsite/ でテスト運用中なのですが、ヘッダー部分のロゴと、 その下のメニューがどうしてもずれます。 CSSは書籍のものをベースに改変していったのですが、 部分部分を編集してもいっこうに揃ってくれません。 ご教示願えましたら幸いです。 ※CSSを関連部分を載せました。(全文は文字制限で無理でした) @charset "utf-8"; /* All Layout -------------------------------------------------*/ body,div,ul,li,h1,h2,p { margin: 0; padding: 0; } h1,h2,h3,h4,ul,li,p,address { font-style: normal; font-weight: normal; font-size: 100%; } img { border: 0; vertical-align: bottom; } a { text-decoration: none; } a:link { color: #000000; } a:visited { color: #000000; } a:hover { color: #b6b5b5; } a:active { color: #000000; } body { font: 62.5% Verdana ,sans-serif; letter-spacing: 0.2em; color: #464646; } .clear:after { content: "."; display: block; height: 0; clear :both; visibility: hidden; } .clear { display: inline-table; } /* MacIE begin \*/ * html .clear { height: 1%; } .clear { display: block; } /* MacIE end */ #header, #contents, #gnavi ul { margin: 0 auto; width: 80em; max-width: 100%; min-width: 730px; text-align: left; } /* Wrapper -------------------------------------------------*/ #wrapper { text-align: center; } /* Header -------------------------------------------------*/ #header { padding: 0 0 0 0; text-align: center; } /* Gnavi -------------------------------------------------*/ #gnavi { clear: both; margin: 0 0 0 0; } #gnavi ul li { float: left; list-style-type: none; font-size: 1.2em; } #gnavi ul li a { /* float: left;*/ /* display: block;*/ } #gnavi ul li a:hover { color: #b0b0b0; }

    • ベストアンサー
    • HTML
  • CSS font-size について

    cssでfont-sizeを指定したのに反映されなくて困っています。(スクリーンショットをとって確認したところ) 12pxと13pxは11px 14pxと15pxは13px 16pxは15pxになってしまいます。 プログラムは次のように打ちました。お願いします。 <HTML> <HEAD> <TITLE>無題ドキュメント</TITLE> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <STYLE type="text/css"> <!-- h1 { font-size: 12px; font-weight: normal} h2 { font-size: 13px; font-weight: normal} h3 { font-size: 14px; font-weight: normal} h4 { font-size: 15px; font-weight: normal} h5 { font-size: 16px; font-weight: normal} --> </STYLE> </HEAD> <BODY bgcolor="#FFFFFF" text="#000000"> <h1>春夏秋冬 12px</h1> <h2>春夏秋冬 13px</h2> <h3>春夏秋冬 14px</h3> <h4>春夏秋冬 15px</h4> <h5>春夏秋冬 16px</h5> </BODY> </HTML>

    • ベストアンサー
    • HTML
  • IEでCSSが適用されません。

    現在作成中のページがあるのですが、IEで作成状況をF12で確認すると、 全くCSSが反映されず、グチャグチャに表示されてしまいます。 FireFoxでは、問題なく表示されるのですが・・ div, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote { font-size:100%; font-weight:normal; list-style-image:none; list-style-type:none; margin:0; padding:0; } dl { font-size:100%; font-weight:normal; list-style-image:none; list-style-type:none; margin:0; padding:0; } dt, dd { margin-bottom:2px; margin-top:2px; } 上記をCSSに組み込んで、リストタグの中黒を消すようにしているのですが、IEでは中黒が表示されたままです。 どうすれば良いのでしょうか。 教えて下さい!!

  • 外部CSS使用で異なる大きさの文字を使いたい

    はじめまして。 素材サイトからDLしたテンプレートなのですが、外部CSSにより文字の大きさが固定されており、個別に大きさを変えたいのですが変更できずに困っています。 CSS初心者で、ソースを見てもいまいちわかりません。 どこを変更すればよいかお教え願えないでしょうか。 変更したいページのソースはこちらになります。 <body id="main"> 更新日<br> <h3>テキスト</h3> <ul class="submenu01"> <li><a href="text.html" target="right">TITLE01</a> </ul> <h3>テキスト2</h3> <ul class="submenu02"> <li>TITLE02 <li><a href="text.html" target="right">1</a> </ul> </body> TITLE01、02の下に小さく説明文を入れたいのですが、文字の大きさを変えることができません。更新日、という文字も小さくしたいのです。 外部CSSのソースはこちらです。 body { height:100%; font-size : 90%; line-height : 180%; color : #666666; text-align : center; background-color :#ffffff ; font-family : Verdana, Chicago, osaka, sans-serif, "MS Pゴシック"; } img { border : 0; } br { letter-spacing : normal; } a { color : #666666; text-decoration : none; } a:hover { color : #000000; } h3 { font-size : 150%; color : #000000; padding: 10px 0 0 0; } /* メイン */ body#main { width : 200px; text-align : left; background-color :#FDDED9; margin: 0 10px 0 20px; } #main ul{ padding: 10px 0 0 0; } /* テキストページ*/ ul.submenu02 li{ display: inline; padding : 0 3px 0 0; } bodyタグのサイズを変更すると全体が変更されてしまうし、いっそ小さくした文字を<h4>のようなものを新しく書き足して囲ってみたのですが反映されません。 どうぞよろしくお願いします。

    • ベストアンサー
    • 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 Pゴシック","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 Pゴシック","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;を入れたら隙間が無くなったので 使用した次第です。 以上、宜しくお願いします。

  • htmlとcss

    以下のようにボタンを配置し、その横に文字を書きました。 水平線上で見ると、ボタンのほうが若干上に配置されてしまいます。 綺麗に平行にするためにcssの設定をしたいのですが、誰か教えてくれませんか? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> ul li { list-style-image: url(img/bot01.gif); font-size: 12px; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif; } </style> </head> <body> <ul> <li>ああ</li> <li>あ</li> <li>あ</li> <li>あ</li> <li>あ</li> <li>あ</li> <li>あ</li> <li>あ</li> <li>あ</li> <li>あ</li> <li>あ</li> </ul> </body> </html>

  • liに画像と文字を表示するCSSの方法

    HTML <ul> <li class="home11"><h3><a title="Homeページ" href="../index.html" class="moji5011">Home</a></h3> </ul> CSS a.moji5011 { color: #c60; font-size: 85%; font-weight: 700; text-decoration: none; margin-left: 0; padding: 3px; width: 80px; height: 20px } a:hover.moji5011 { color: #000; font-weight: 700; text-decoration: none; margin-left: 0; padding: 3px } li.home11 { background-image: url("http://www6.big.or.jp/~neon/BTNFLD/BTNIMG/BTN03/btn04smp.gif"); background-repeat: no-repeat; text-align: center; list-style-type: none; margin-right: 5px; width: 80px; height: 20px; float: left } と設定しているのですが、エクスプローラーでは画像の上にHomeが中央に位置しているのですが、Firefoxでは文字が上部に位置して、これをFirefoxでも中央に表示するにはどのようにすればいいのでしょうか。 ボタン全部をリンク対象にするようにしています。

    • ベストアンサー
    • HTML
  • css ドロップダウンメニュー

    http://ri-mode.com/rainbow/2014/06/11/simple_css_dropdown_menu/ 上記のHPを参考にして、CSSでドロップダウンメニューをつくろうと試みましたが、上手く作動しません。どこが間違っているのでしょうか。 〇Html文------------- <!DOCTYPE html> <html lang="ja"> <head> <title>〇〇</title> <meta charset="UTF-8" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link href="style_test.css" rel="stylesheet" > </head> <body> <div class="container"> <div class="menu"> <ul> <li><a href="#">利用案内</a></li> <li><a href="#">あいうえお</a> <ul> <li><a href="#">かきくけこ</a> </li> <li><a href="#">さしすせそ</a> </li> <li><a href="#">たちつてと</a> </li> </ul> </li> </ul> </div><!--menu--> </div><!--container--> </body> </html> 〇style_test.css--------- @charset "UTF-8"; /*================================================ * CSSリセット ================================================*/ html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;font-weight:normal;}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle} /*================================================ * 一般・共通設定 ================================================*/ body{ color:#000; font-size: 14px; line-height: 1.4em; font-family: Avenir, "Open Sans", "Helvetica Neue", Helvetica, Arial, Verdana, Roboto, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro" , "メイリオ" , Meiryo , Meiryo UI , "MS Pゴシック" , "MS PGothic" , "Microsoft Yahei", "PingHei", "Malgun Gothic", "Yoon Gothic", sans-serif; background:#fff; } #container { overflow:hidden; width:1000px; margin: 0px auto; background:#fff; } /*================================================ * メニュー ================================================*/ .menu { clear: both; overflow: hidden; margin: 16px auto; } .menu ul { margin:0; padding:0; } .menu ul li { list-style: none; margin:0; padding:0; font-size:13px; float: left; position: relative; width: 110px;/*親メニューの幅*/ height: 35px;/*親メニューの高さ*/ line-height: 35px; background:#08046c;/*親メニューの背景色*/ color: #fff;/*親メニューの文字色*/ text-align:center; font-weight:500; } .menu ul li a { color: #fff; display: block; text-decoration: none; } .menu ul li:hover, .menu ul li a:hover { background:#085af5;/*ホバー時の親メニューの背景色*/ color:#fff;/*ホバー時の親メニューの文字色*/ } .menu ul li ul { position: absolute; top: 35px;/*親メニューの高さと同じにする*/ width: 110px; z-index: 100; } .menu ul li ul li { visibility: hidden; overflow: hidden; width: 110px;/*サブメニューの幅*/ height: 0; background:#041fb5;/*サブメニューの背景色*/ } .menu ul li ul li:hover, .menu ul li ul li a:hover { background:#08046c;/*ホバー時のサブメニューの背景色*/ } .menu ul li:hover ul li, .menu ul li a:hover ul li{ visibility: visible; overflow: visible; height:35px;/*サブメニューの高さ*/ z-index: 10; } .menu * { -webkit-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; }

    • ベストアンサー
    • CSS
  • CSSを使いたいのですが上手くいきません

    テーブル型のメニューを マウスオンで背景の色を変えたいのですが… CSSの解説HPを見たのですが、どこの記述に誤りがあるのか 恥ずかしながら分かりません。 お分かりになる方いらっしゃいましたら、ご教授お願い致します。 <html> <head> <meta Http-equiv="content-type" Content="text/html; charset=Shift_JIS"> <title>テスト</title> <style type="text/css"> <!-- container{ width:100px;} container ul{ margin:0; padding:0; list-style:none; border-top:1px solid #666666; border-left:1px solid #666666; font-size:small; line-height:150%; border-right:1px solid #666666;} container ul li{ margin:0; padding:0; display:inline;} container ul li a{ margin:0; padding:5px 0; width:180px; display:block; text-align:center; color:#000000; text-decoration:none; background:#CCCCCC; border-bottom:1px solid #666666;} container a:hover{ color:#FFFFFF; text-decoration:none; background:#666666;} --> </style> </head> <body> <div id="container"> <ul> <li><A Href="01.html" Title="test">test1</A></li> <li><A Href="02.html" Title="test">test2</A></li> </ul> </div> </body> </html>

専門家に質問してみよう