- ベストアンサー
[W3C] dtd型「Strict」における<noscript>と<style>について
お世話になります <noscript>は<body>内に入れないといけないですし<style>は<head>内に入れないといけないという矛盾が生じて解決できないのですが・・・ javascriptでdisplay:block;しているので未対応用に<noscript>でdisplay:block;しておきたいのですがうまくいきません かといって初めからdisplay:block;してjavascriptでonload display:none;すると一瞬表示されてからdisplay:none;されてしまいます <body> <noscript> <style type="text/css"><!-- #title { display:block; } --></style> </noscript> </body> とすると『2エラー』 ・<style>はここではありません （document type does not allow element "STYLE" here.） ・</noscript>が閉じられません （end tag for "NOSCRIPT" which is not finished.） といった感じのエラー <body> <noscript> <div> <style type="text/css"><!-- #title { display:block; } --></style> </div> </noscript> </body> とすると『1エラー』 ・<style>はここではありません <head> <title></title> <noscript> <style type="text/css"><!-- #title { display:block; } --></style> </noscript> </head> <body> とすると『4エラー』 ・<style>はここではありません ・</noscript>が閉じられません ・</head>が開いていません （end tag for element "HEAD" which is not open.） ・<body>はこの位置ではありません （document type does not allow element "BODY" here.） のような感じになってしまいます 『Transitional』にしても『<style>はここではない』エラーがでてます Another HTML-lint gatewayでは100点取ることなど不可能だと分かっているのでせめてW3C Markup Validation Service（http://validator.w3.org/）で緑にしておきたいのですが・・・ 今作成中のページではここだけがエラー対象になっているのですが回避できるのでしょうか？
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
やりたい事は、 ・display:none;で予め何かが隠してある。 ・JavaScriptでそれの表示／非表示の操作をしている。 ・スクリプトが無効の場合、常に表示されるようにしたい。 こういう感じで、あってるでしょうか？ noscript内で、表示／非表示の操作をするのは難しいと思います。 すこし考え方を変えて、隠してある内容と同じ内容を、 noscript内に記述すれば良いと思います。 ----例---- <html> <head> <title>test</title> </head> <body> <a href="javascript:document.getElementById('title').style.display='block';void(0);">表示</a> <div id="title" style='display:none;'> 隠してある内容 </div> <noscript> <div> 隠してある内容 </div> </noscript> </body> </html>
その他の回答 (1)
- SAYKA
- ベストアンサー率34% (944/2776)
ちょっと乱雑なやりかた ---------------------- <head> <style><!-- .T1{display:none} .title{display:block} --></style> </head> <body> <script><!-- document.write("<div class='T1'>"); //--></script> <div class="title">たいとる</div> <script><!-- document.write("</div>"); //--></script> </body> ---------------------- つまりnoscriptでscriptが使えない状態を記述するのではなくscriptである場合にだけ有効になる書き方にするって話。 classで書いてるけどidでも構わないよ。ただidだとページ内で使い回せないからclassの方が良いと思う。
お礼
回答ありがとうございます 試してみたところ後のdocument.write("</div>");の方でエラーされてしまいました（＞＜） 色々やってみたところコンテンツをdisplay:none;にするCSSファイルを作成してそれをjavascriptが有効なときに呼び出すようにして表示もできW3Cでも緑にすることができました（＾＾） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <title></title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript"><!-- window.onload=function() { title_move(-100,125); } function title_move(h1,h2) { obj = document.getElementById("title"); obj.style.display = "block"; h1++; h2--; obj.style.marginTop = h1 + "px"; obj.style.marginBottom = h2 + "px"; if(h1 >15) return false; setTimeout("title_move("+h1+","+h2+")",20); } //--></script> <style type="text/css"><!-- #title { width:450px; height:100px; margin:15px auto; background-color:lightcyan; } --></style> <script type="text/javascript"><!-- document.write("<link rel='stylesheet' href='./css/home.css' type='text/css'>"); //--></script> </head> <body> <div id="title"> 。。。 </div> </body> </html>
お礼
回答ありがとうございます 今やってることは動的コンテンツをつくってます（表示とともに現れたり移動したりさせてます） そのため表示状態(終了状態)と開始状態の位置や状態が異なるので初めdisplay:none;でonloadとともにdisplay:block;しています やはり<noscript>内に<style></style>をいれることは難しいですか～ <script type="text/javascript"><!-- document.write("<div id='title'>"); //--></script> <noscript> <div id="title" style="display:block"> </noscript> ・・・ </div> のようにできればいいんですが・・・ </noscript>と</div>でエラーになるし・・・（－－；） 単純に2度書くしかないですかね？ もうちょっと色々やってみます