エラーメッセージによる講演会記録の表示エラーの解決方法
- 初心者の方が講演会の記録をHTML形式で残したいとのことですが、Crescent Eveで解析するとエラーメッセージが表示されてしまいます。
- エラーメッセージの内容は、h2要素やli要素の位置が正しくない、未定義の属性が使用されているというものです。
- エラーを解消するためには、h2要素とli要素を正しい位置に配置し、name属性を使わずid属性を使用する必要があります。
- ベストアンサー
初心者です。エラー表示をなくしたい
講演会記録を、後ですぐみやすいようにHTML形式で残そうと思っていますが、 例えば下記のようにすると、 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>講演会記録</title> </head> <body> <ul> <h2> <li><a href="#memo001">2012 講演会記録</a></li> <li><a href="#memo002">2013 講演会記録</a></li> </h2> </ul> <a name="memo001"></a><p> 2012 講演会内容 </p> <a name="memo002"></a><p> 2013 講演会内容 </p> </body> </html> ちゃんと表示はされ、思った通りの動きはしますが、 Crescent Eveで解析すると、下記エラーがでます。 ◆ 9行: 要素h2はこの位置には置けません。 ◆ 10行: 要素liはこの位置には置けません。 ◆ 11行: 要素liはこの位置には置けません。 ◆ 15行: 未定義の属性です。(name) ◆ 18行: 未定義の属性です。(name) と怒られます。なぜ、エラーでどうしたらエラーがでなくなりますか？ よろしくご教示ください。
- USB99
- お礼率41% (85/206)
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
指摘された部分を修正すれば、エラーは出なくなります。 ・ulの中にh2を記述することはできない。 ・h2の中にliを記述することはできない。 ・a要素にname属性は定義されていない。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>講演会記録</title> </head> <body> <ul> <li><a href="#memo001">2012 講演会記録</a></li> <li><a href="#memo002">2013 講演会記録</a></li> </ul> <p id="memo001"> 2012 講演会内容 </p> <p id="memo002"> 2013 講演会内容 </p> </body> </html>
関連するQ&A
- 外部ページから指定場所にリンクをさせる
ページ内で、リンクをするとき、hrefに飛ばしたい場所を#で指定すれば、name属性のところに ページ移動させれることは知っているのですが、 外部ページから、指定の場所に飛ばすことはできないでしょうか？ ==========内部ページ内でリンクを作成する時(link.html)============= <h1>リンクテスト</h1> <h2>サンプル</h2> <h3><a name="menu" id="menu">メニュー</a></h3> <ul> <li><a href="#section1">メニュー1</a></li> <li><a href="#section2">メニュー2</a></li> <li><a href="#section3">メニュー3</a></li> </ul> <h3><a name="section1" id="section1">セクション1</a></h3> <p>メニュー1の内容。 ...</p> <h3><a name="section2" id="section2">セクション2</a></h3> <p>メニュー2の内容。 ...</p> <h3><a name="section3" id="section3">セクション3</a></h3> <p>メニュー3の内容。 ...</p> <p><a href="#menu">メニューに戻る</a></p> 上記ソースのメニュー部分を別ページ(top.html)に作成し、 リンクページの指定部分をメインで映るようにしたいのです。 例えば、下のメニュー3がクリックされたとき、 link.htmlのsection3の内容部分(link.htmlの下にある、セクション3)が画面中央に来るようにしたいのです。 ご教授お願いします。 ===top.hmtml(メニュー部分抜粋)================== <h1>リンクテスト</h1> <h2>サンプル</h2> <h3><a name="menu" id="menu">メニュー</a></h3> <ul> <li><a href="#section1">メニュー1</a></li> <li><a href="#section2">メニュー2</a></li> <li><a href="#section3">メニュー3</a></li> </ul>
- ベストアンサー
- HTML
- サイドナビゲーションの色の一括指定
CSS3前提でお伺いしたいのですが、サイドナビの表示として <ul> <li><a href="">１階層目１</a></li> <li><a href="">１階層目２</a> <ul> <li><a href="">２階層目１</a></li> <li><a href="">２階層目2</a> <ul> <li><a href="">3階層目1</a></li> <li><em>3階層目2</em></li> <li><a href="">3階層目3</a></li> </ul> </li> <li><a href="">２階層目3</a></li> </ul> </li> <li><a href="">１階層目３</a></li> </ul> といったHTMLを想定していますが、<em>の位置だけで上階層の背景色などを指定する方法はないでしょうか。 CSS3セレクタを見ると子要素に対して～というのはあるのですが、親要素に対して～というのは見つけられませんでした。 よろしくおねがいします。
- ベストアンサー
- CSS
- javascriptでCSVを読み込み表示する方法を探しています。
javascriptでCSVを読み込み表示する方法を探しています。 <div id="hoge"> <ul class="hogehoge"> <li><a href="1行目の1つ目のデータ">1行目の2つ目のデータ</a></li> <li><a href="2行目の1つ目のデータ">2行目の2つ目のデータ</a></li> ・ ・ ・ </ul> </div> で、ulに囲まれた部分をjavascriptで生成させたいのですが・・・ （ulのところのCSS指定は、idではなく、classにしたいです） よろしくお願いいたします。
- 締切済み
- JavaScript
- クリックで表示、非表示するメガメニュー
クリックで表示して再度クリックすると非表示になるメガメニューを作ろうと思ってます。 下記のページを参考にjQueryでマウスオーバーによるメガメニューは作成しました。 http://www.skuare.net/test/jmegadropdown.html ただ、jQueryどころかjavascriptも昔少しやった程度しか知識がありませんので、ソースはほぼ上記のページと同じです。 これをクリックでメニュー表示して、再クリックで非表示にするにはどうしたらよいでしょうか？ 具体的にはマイクロソフトのページの上にあるようなメニューです。 http://www.microsoft.com/ja-jp/default.aspx 自分の今の知識でjavascriptを使って書いたコードは下記のとおりです。 このように書いていけば出来るとは思うのですが、もっと効率よく出来る方法はあるでしょうか？ よろしくお願いします。 function test1() { $("#topnav li .products1 .sub").toggle(); $("#topnav li .sale1 .sub").css("display", "none"); } function test2() { $("#topnav li .products1 .sub").css("display", "none"); $("#topnav li .sale1 .sub").toggle(); } <ul id="topnav"> <li> <a href="#" class="products" onclick="test1()">Products</a> <div class="products1"> <div style="opacity: 0; display: none; width: 600px;" class="sub"> <ul> <li><h2><a href="#">menu1</a></h2></li> <li><a href="#">Link1</a></li> <li><a href="#">Link2</a></li> </ul> <ul> <li><h2><a href="#">menu2</a></h2></li> <li><a href="#">Link1</a></li> <li><a href="#">Link2</a></li> </ul> </div> </div> </li> <li> <a href="#" class="sale" onclick="test2()">Sale</a> <div class="sale1"> <div style="opacity: 0; display: none; width: 450px;" class="sub"> <ul> <li><h2><a href="#">menu</a></h2></li> <li><a href="#">Link - 1</a></li> <li><a href="#">Link - 2</a></li> <li><a href="#">Link - 3</a></li> <li><a href="#">Link - 4</a></li> </ul> </div> </div> </li>
- ベストアンサー
- JavaScript
- li ３列表示
こんにちは、 下記のliを3列づつ表示したいのですが、 どのようにすればよいでしょうか？ （２列とかはあるのですが・・・tableにすべき？） <ul id="leftlist1"> <li><a href="#">a1</a></li> <li><a href="#">a2</a></li> <li><a href="#">a3</a></li> </ul> <ul id="leftlist2"> <li><a href="#">b1</a></li> <li><a href="#">b2</a></li> <li><a href="#">b3</a></li> </ul> <ul id="leftlist3"> <li><a href="#">c1</a></li> <li><a href="#">c2</a></li> <li><a href="#">c3</a></li> </ul>
- ベストアンサー
- CSS
- <ul>〜</ul> 内に普通のテキストを書くことはできません。と診断されます
Another HTML-lint gateway「http://htmllint.itc.keio.ac.jp/htmllint/htmllint.html」にてHTML文法チェックを行ったところ以下のような診断をされました。 <ul>〜</ul> 内に普通のテキストを書くことはできません。（重要度9） なぜこういう診断がされてしまうのか原因がわかりません。 専門のサイトなどで<li>や<ul>について確認しましたが特に問題のある箇所が自分では特定出来ませんでした。 診断されたHTMLコード（抜粋）は以下になります。 <div id="sidebar"> <div id="sidebar_top"> <div id="sidebar_contents"> <p> </p> <p><img src="navigator.png" alt="" width="93" height="18" vspace="5" /></p> <h3>Categories : </h3> <div class="nav"> <ul> <li><a href="top">TOP</a></li> </ul> <h3>コンテンツ</h3> <ul> <li><a href="01">コンテンツ(1)</a></li> <li><a href="02">コンテンツ(2)</a></li> <li><a href="03">コンテンツ(3)</a></li> <li><a href="04">コンテンツ(4)</a></li> <li><a href="05">コンテンツ(5)</a></li> </ul> </div> </div></div></div> ※XHTML1.0 Transitional、UTF-8 これでは情報足りないようでしたら仰って下さい。 何卒、よろしくお願い致します。
- ベストアンサー
- HTML
- javascript(DOM)でIDとテキストノードを取得する方法
下記のことをDOMを使ってやりたいと思っているのですが、ちょっとできないので教えていただきたいです。 ［HTML内での記述］ <h2 id="apple">りんご</h2> <p>...</p> <h2 id="grape">ぶどう</h2> <p>...</p> <h2 id="orange">みかん</h2> <p>...</p> <h2 id="peach">もも</h2> <p>...</p> 上記HTMLから<h2>内のid名とテキストを取得して、下記のようなリストにしたいです。 （<p>...</p>の部分はどうでもよいです。） <ul> <li><a href="#apple">りんご</a></li> <li><a href="#grape">ぶどう</a></li> <li><a href="#orange">みかん</a></li> <li><a href="#peach">もも</a></li> </ul> 要するに、見出しを取得してページ内リンクを作りたいのです。 DOMで、getElementByIdとか使って、、と何となくは分かるのですが、完成させるまでには至っていません。 ご教授いただければと思います。
- ベストアンサー
- JavaScript
- 指定要素をスクロール時に非表示
JSで、divで囲ったある指定要素をスクロールしたら非表示にしたいのですが、 当方jsにまったく疎く、書き方がわかりません。 どなたかお助けいただけますと助かります。 サンプルなのですが、HTMLファイルのコードは以下になります。 <div id="subNav"> <ul class="fixed"> <li><a href="#">A</a></li> <li><a href="#">B</a></li> <li><a href="#">C</a></li> </ul> </div>
- 締切済み
- JavaScript
- ＣＳＳ初心者です
初 挑戦です ビルダー１１を使って製作中です （ 項目をクリックすることで深い階層が現れるリストを製作しています ） いろんなサイトで調べているのですがイマイチ解りません 今 このサイトを参考にしています http://allabout.co.jp/gm/gc/377237/2/ でも、さっぱり解りません 理屈は解るのですが、 ・何処にＣＳＳを記入するのか ・JavaScriptソースをどこに記入するのか いろいろ、試しましたが上手くいきません 例 HTMLソース <ul> <li><a href="url">項目A</a> <ul> <li><a href="url">サブ項目A-1</a></li> <li><a href="url">サブ項目A-2</a></li> <li><a href="url">サブ項目A-3</a></li> </ul> </li> <li><a href="url">項目B</a> <ul> <li><a href="url">サブ項目B-1</a></li> <li><a href="url">サブ項目B-2</a></li> <li><a href="url">サブ項目B-3</a></li> </ul> </li> <li><a href="url">項目C</a> <ul> <li><a href="url">サブ項目C-1</a> <ul> <li><a href="url">サブサブ項目C-1-a</a></li> <li><a href="url">サブサブ項目C-1-b</a></li> <li><a href="url">サブサブ項目C-1-c</a></li> </ul> </li> <li><a href="url">サブ項目C-2</a></li> <li><a href="url">サブ項目C-3</a></li> </ul> </li> </ul> 例 ＣＳＳ a.menu { text-decoration: none; border: 1px solid #8080ff; background-color: #ccccff; padding: 1px; } 例 JavaScriptソース <script type="text/javascript"><!-- function sublist( target ) { var TargetList = target.parentNode.getElementsByTagName('ul'); if ( TargetList[0].style.display == 'none' ) { TargetList[0].style.display = 'block'; } else { TargetList[0].style.display = 'none'; } } // --></script> 初心者です 解りやすく アドバイスお願いします
- ベストアンサー
- CSS
- スマートフォン用サイトのアコーディオンメニュー
スマートフォン用サイトのアコーディオンメニューを作成しています。 http://html-five.jp/140/ こちらのサイト様の情報をもとに2段のメニューが作ろうと思ったのですが、 空白のページが表示されてしまいますが、どこを修正したらよいのかわかりません。 記述したものは下記のとおりです。 解答よろしくお願いいたします。 <head> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css"> <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script> </head> <body> <script type="text/javascript"> $(".accordion p").click(function(){ $(this).next("ul").slideToggle(); $(this).children("span").toggleClass("open"); }); </script> <div> <ul> <li> <p><span>LIST 6</span></p> <ul> <li> <p><span>LIST 6-1</span></p> <ul> <li><a href="page01.html">LIST 6-1-1</a></li> <li><a href="page01.html">LIST 6-1-2</a></li> <li><a href="page01.html">LIST 6-1-3</a></li> </ul> </li> <li> <p><span>LIST 6-2</span></p> <ul> <li><a href="page01.html">LIST 6-2-1</a></li> <li><a href="page01.html">LIST 6-2-2</a></li> <li><a href="page01.html">LIST 6-2-3</a></li> </ul> </li> <li> <a href="page01.html">LIST 6-3 (not to open)</a> </li> </ul> </li> <li> <p><span>LIST 7</span></p> <ul> <li> <p><span>LIST 7-1</span></p> <ul> <li><a href="page01.html">LIST 7-1-1</a></li> <li><a href="page01.html">LIST 7-1-2</a></li> <li><a href="page01.html">LIST 7-1-3</a></li> </ul> </li> <li> <p><span>LIST 7-2</span></p> <ul> <li><a href="page01.html">LIST 7-2-1</a></li> <li><a href="page01.html">LIST 7-2-2</a></li> <li><a href="page01.html">LIST 7-2-3</a></li> </ul> </li> <li> <p><span>LIST 7-3</span></p> <ul> <li><a href="page01.html">LIST 7-3-1</a></li> <li><a href="page01.html">LIST 7-3-2</a></li> <li><a href="page01.html">LIST 7-3-3</a></li> </ul> </li> </ul> </li> </ul> </div> </body>
- ベストアンサー
- JavaScript
お礼
ありがとうございました。 と言うことは、箇条書きの文を大きくしたい場合はエラーを無視するか、フォントの大きさを直接、指定するしかないというと言う理解でいいでしょうか？