- ベストアンサー
[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/）で緑にしておきたいのですが・・・ 今作成中のページではここだけがエラー対象になっているのですが回避できるのでしょうか？
- leap_day
- お礼率94% (142/151)
- HTML
- 回答数2
- ありがとう数6
- みんなの回答 （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>
関連するQ&A
- スタイルシート
こんばんは。HPを独学で作っている超初心者です。 スタイルシートが反映してくれないのです。下記の記述で 何が違うのでしょうか？？？ ---01.css--- <sytle type="text/css"> a:link{text-decoration:none;} <style> ---index.html（抜粋）--- <head> <link rel="stylesheet" href="01.css" type="text/css"> </head> どうしても index.html のリンク部分に下線が出てきます。 どうして消せないのかが分かりません！！！ どなたか教えてください！よろしくお願いいたします！
- 締切済み
- その他（インターネット・Webサービス）
- noscript内にlinkは間違い？
javascript初心者です。 javascriptが無効な場合に、 <noscript><link href="css/noscript.css" rel="stylesheet" type="text/css" /> ・・・・・・・・ </noscript> という形でcssを一部適用させているのですが、<noscript>のなかに<link>を書くのは文法上あまりよろしくないとのことで、ほかに正しい方法があれば教えてください。 よろしくお願いします。
- ベストアンサー
- JavaScript
- 印刷曜CSSがどこかおかしい・・・非常に困っています。。。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title></title> <link rel="stylesheet" type="text/css" media="print" href="print.css"> <style type="text/css"> <!-- .style1 { font-family: "ＭＳ Ｐゴシック"; font-size: 12px;} --> <style type="text/css" media="print"> .print { display: "none" } </style> </style> </head> <body> <span class="style1"><p class="print"><p class="print2"><a onclick="window.print();return false;" href="#" >おおお</a></p></p></span> とソースに記載すると、「おおお」が印刷されないと思うのですが、なぜか、「おおお」が印刷されてしまいます。 どうすれば、「おおお」を印刷されなくなるのでしょうか？
- ベストアンサー
- HTML
- スタイルシートでのセンタリングについて。
スタイルシートでセンタリングをしたいのですが、できなくて困っています。 以下のような場合に、センタリングをしようと思い「text-align:center;」を追加しましたがセンタリングされません。 どうしたらセンタリングできるでしょうか？ ソース ------------------------------------ <html> <head> <title></title> <style type="text/css"> <!-- .test{ font-size: 10pt; font-family: ＭＳ 明朝; margin: 1px; padding: 1% 10%; border: outset 1px #EEDDFF; } --> </style> </head> <body> <span class=test>○○○○○</span> </body> </html>
- ベストアンサー
- HTML
- スタイルシートでの中央揃え
<html> <head> <title>文書のタイトル</title> <meta http-equiv="Content-Style-Type" content="text/css"> <style> body{text-align: center;} </style> </head> <body> <table> <tr> <td> テーブルの内容 </td> </tr> <table> テーブル外の内容 </body> </html> のように、スタイルシートで、 body{text-align: center;} を指定したのですが、IE6ではtableが中央揃えされましたが、NN7.1やFirefox 1.5.0.7ではtableが中央揃えされませんでした。 centerタグを使えば問題ありませんでしたが、非推奨なのであまり使いたくありません。 スタイルシートを用いてIE6と同様にNNやFirefoxでtableを中央揃えするようにするにはどうすればいいでしょうか。
- ベストアンサー
- HTML
- ページが切り替わるスクリプトで最初から指定のページを表示させる
<html> <head> <script type="text/javascript" language="JavaScript"> <!-- JavaScript小技集 2005. 6.17 function showthis(obj) { if(!obj) return false; if(document.getElementById) { document.getElementById("item1").style.display = "none"; document.getElementById("item2").style.display = "none"; document.getElementById("item3").style.display = "none"; document.getElementById(obj).style.display = "block"; } else { return false; } } // --> </script> <style type="text/css"> #item1,#item2,#item3 { display: none; } </style> </head> <body> <form> <select onchange="showthis(this.value)"> <option selected="selected">記事を選ぶ</option> <option value="item1">記事１</option> <option value="item2">記事２</option> <option value="item3">記事３</option> </select> </form> </body> <html> これなんですが、これを貼ってあるページを読み込んだ際、最初からitem1を表示した状態にしたいのですが どうすればよいのでしょう？
- 締切済み
- Java
- <Style>～</Style>
<Style>～</Style>を使いたいのですが、 使い方として以下の注意書きを見ました。 </head>タグの直前に<Style>キーワード</ Style> をコピー&ペーストしてください。 CSSは詳細なレイアウトであって文字は入れられるかどうか知りたいのですが。 多分入れられないと思うのですが。 例えば「あけましておめでとう。」の文字を <head> <style type="text/css"> <!-- div{color:#f00} -->あけましておめでとう。 </style> </head> とかできるかどうかと思ったので。 上記の意味として <head>～<Style>単語</ Style></head>で使い方はあっているのでしょうか。
- 締切済み
- HTML
- スタイルシートの設定
スタイルシートをリンク設定したく、文頭に下記の記述をしました。 ++++++++++++++++++++++++++++++++ <html> <head> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> ++++++++++++++++++++++++++++++++ まったく、反映されません・・ どうして何でしょうか？ どなたかお助けください。
- 締切済み
- ホームページ作成ソフト
- style="displey:none"ができない
まず、このソースを見てください。 <html><head><base target="migi"></head> <body style="margin-top:3px;margin-left:3px;margin-right:3px;"> <div onmousedown="fmenu1()" style="cursor:hand;">メニュー表示</div> <table id=menu1 style="displey:none" border=0> <tr><td>あいうえお <br>かきくけこ <br>さしすせそ </td></tr></table> <SCRIPT language="JavaScript"> function fmenu1(){ if( menu1.style.display == "none") menu1.style.display = "block"; else menu1.style.display = "none"; } </SCRIPT> </body></html> これを表示すると、最初から「あいうえお」「かきくけこ」「さしすせそ」が出ている状態になります。 style="displey:none" というのは間違っているでしょうか？ 回答お願いします。
- ベストアンサー
- 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度書くしかないですかね？ もうちょっと色々やってみます